Customizing the Get Recent Comments Plugin
July 24th, 2008
There’s a cool little plugin I’ve come to really love for WordPress. It’s called “Get Recent Comments” and it does what it says it does: offers the php function <?php get_recent_comments(); ?> that lists the latest comments on your site. The best part about this simple plugin are the great customization opportunities that come with it.
- First thing is first: Go download the Get Recent Comments plugin!
- Unzip the plugin and upload the plugin to your /plugins directory.
- Go to the Plugins tab on the Dashboard and activate the Recent Comments plugin.
A Quick Brief Lowdown
To really get what you want out of this plugin you need to have a decent grasp on the code behind the layout (CSS styles or HTML) of your WordPress site. If you have the gravatar option activated on your WordPress, then even better!
Here’s a quick look at what the default options are. The default option is set to list any recent comments regardless of where they were posted on your site. This is the simplest setup with the following code:
<li>
<a href="%comment_link" title="%post_title, %post_date">
%comment_author</a>: %comment_excerpt
</li>
Once you select the checkbox option under Plugins > Get Recent Comments > Comments called “Group comments by Posting” then you get two new code field that you can edit–one before the code bit listed above, and one below it. This option organizes comments based on the blog post they are connected to. Here’s the first box that will come before the code listed above:
<li>
<strong>
<a href="%post_link" title="%post_title was posted on
%post_date">%post_title</a>
(<a href="#" title="There are %post_counter comments to
this posting">%post_counter</a>)
</strong>
<ul>
The third box will close the nested </ul> wrapper, followed by a closed </li> in following many WordPress template standards for sidebar content. By following these standards this plugin ensures that your sidebar content will follow the same CSS styles conventions that are built into your current WordPress design.
This is where I’d like to start my personal Get Recent Comments setup in case there are others out there who’d like to drop the default <ul><li> setup.
Removing the <li> and <ul> Tags
I wanted more layout control so I settled on the following options:
- Click on the Settings tab on the Dashboard and click on Get Recent Comments in order to change some settings around.
- Go to the Gravatar menu option and set the pixel size of the gravatar to 30.
- Go back to the Comments menu option. There are a couple setting options you can edit but the one I turned on is the “Group comments by Posting”; check the check box.
- In the first box I used the following code:
<div class="sidebartext"> <strong> <a href="%post_link" title="%post_title was posted on %post_date">%post_title</a> (<a href="#" title="There are %post_counter comments to this posting">%post_counter</a>) </strong> <br> - In the second box I used the following code:
<table> <tr> <td valign="top" halign="left" width="33"> <a href="/user-avatars/">%gravatar</a> </td> <td> <a href="%comment_link" title="%post_title, %post_date"> %comment_author</a>: %comment_excerpt </td> </tr> </table> - In the third box I use the following code:
</div><br>
You’ll likely have to use a style appropriate to your CSS style design for rightbar content. This is usually easy to find in your site’s stylesheet. You need to wrap your Get Recent Comments plugin content in a <div class=”sidebarcontent”> (or <span>, or <p> tag, etc.) tag if you want to keep it fitting in with the rest of your design. The class attribute “sidebarcontent” needs to be whatever you set it up to be, or whatever style already exists in your stylesheet that would work for this particular purpose. Each site is different so this part I leave to you! Good luck!
I created the CSS style “.sidebartext” with the same properties as the CSS style content targeting <ul><li> tags in my sidebar sections. That is why my first box of code starts with <div class=”sidebartext”>.
In order to get the gravtar thumbnail to sit on the left side I wrapped the content output in <table> tags (you can do this with pure CSS styles if you’re confident in your abilities of course). The gravatar code constructs the <img src=”"> tag and attributes automatically which doesn’t allow a coder/designer to add the align=”left” attribute to the tag so that text flows around the image. Unfortunately, the only way to align left in CSS (float: left;) doesn’t actually wrap the text around the image; it just sites on the left of the text and the text starts at the baseline of the image.
|
|
|
By creating a table with two cells I was able to set the left cell to contain the gravatar thumbnail while the right cell contained the actual comment text output. The final result is a much cleaner looking one than the default one (at least I think so).
If you come up with other unique and cleaner solutions than mine please leave them in the comments below!







I came across a character generator about a year ago for another site I run that supports a gaming community. The generator is called RPGQuest Hero-O’Matic designed by a Brazilian guy (sorry couldn’t find a name!) based on the art of Ronaldo Barata and Pietro Antognioni, the official designers of RPG Quest.
There are some kinks in the layering of objects and the whole thing is in Portuguese. The layering can be fixed with selecting better lower-layer objects, and the Portuguese–if not known–can be figured out by clicking around and getting comfortable with what changes after you go clicky-click. The selection is mostly (if not all) fantasy based but it doesn’t reduce the beauty of the final output if you’re using it for visual kicks. It’s got an info-drop component to it as well: Name, Race, Class, Level, and stats and experience if you play games that need such things before you do a Print Screen for your next character sheet. I’ve designed myself with Webtertainment Battle Armour with a Librium of Social Who-Haa >> Race: Hyper-Human; Class: Awesome; Level: Epic.



