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.

1. First thing is first: Go download the Get Recent Comments plugin!
2. Unzip the plugin and upload the plugin to your /plugins directory.
3. 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:

1. Click on the Settings tab on the Dashboard and click on Get Recent Comments in order to change some settings around.
2. Go to the Gravatar menu option and set the pixel size of the gravatar to 30.
3. 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.
4. 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>

5. 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>

6. 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.

This is an example of float: left CSS style.

When all any of us REALLY want is something like this!

So I settled on this option instead!!! Take that!

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.

The biggest sadness in all this is that when I looked for their website, it was dead! The greatest happiness in all this is that I don’t just find a golden nugget and put it on my counter top. I take the damn nugget and store it away in a safe safe place so that I can keep fascinating myself over my precious.

So to the benefit of all who still care to play around with a character generator that has kick as art, I’ve got a downloadable copy right here! Mwhahaha!

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.

As much as I’d like to forever more give credit to the original creators I wasn’t able to find their names then and I can’t find their names now. If someone knows of finds out can you please comment below with an update–especially if they have a site up somewhere again! Sorry original-creator-dudes but this is too good to keep under wraps… unless RPGQuest nailed you, in which case it’s a countdown for this post’s days as well! Take it while you can!

Download Flash RPGQuest Hero-O’Matic (1.30 MB)

UPDATE December 15, 2008 for Heroomatic (AKA Fabrica de Heróis)

RPGQuest Hero-O-Matic
http://rapidshare.com/files/117289940/RPGQuest_Hero_OMatic_beta.zip.html
Fábrica de Heróis
http://rapidshare.com/files/133970420/fabrica.rar.html
New Version
http://fabricadeherois.blogspot.com/

Here’s a little tutorial on how to get your gravatar icons in WordPress to appear left aligned in your comment thread without tweaking WordPress’s core code.

For a little background, a user comment is called with:

<?php comment_text() ?>

This spits out the user’s comment thread wrapped in <p> tags–oh, wonderful layout-compromising <p> tags…

A gravatar, or globally recognized avatar, is an avatar image that follows you from weblog to weblog appearing beside your name when you comment on gravatar enabled sites. The gravatar images supported in the new version of WordPress 2.5 onwards is called with the following code:

<?php echo get_avatar( $comment, 30 ); ?>

The “30″ represents the width and height of the icon; you can read more about these arguments at the Gravatar website. I won’t go into that much detail here. I’m going to continue assuming you’ve made yourself comfortable with the Gravatar service and feel comfortable with writing CSS styles and modifying WordPress template code.

In this example, I want to call the gravatar icon and align left so that the comment text wraps around the icon–as presented in the image below:

Adding <div align=”left”> around the the “get_avatar” php code won’t work! This is where CSS comes in!

First I’ve added a style for the <ul> tags that’ll layout the user comments by removing the bullet and the indents as such:

ul.nobullet {
list-style-type: none;
margin-left: 0px;
padding-left: 0px;
}

Internet Explorer and Opera use margin values for the indentation whereas Mozilla/Netscape/Firefox all use padding values.

Next I created a CSS style for the gravatar icon to get it to align left with a bit of a buffet around the image like so:

.commentavatar {
float: left;
padding: 0px 5px 2px 0px;
}


I’d hope this was enough, but alas, there is ONE more step to get around those tricky little <p> tags! I created a CSS style for the actual comment content like so:

.commentcontent {
padding: 0 10px;
margin-bottom: 15px;
}

This last step seems to help bypass the <p> tag formating and your final code inside your “comments.php” WordPress template file would look something like this:

<ul class="nobullet">
<li id="comment-">
<div class="commentcontent">
<div class="commentavatar">
<?php echo get_avatar( $comment, 30 ); ?>
</div>
<?php comment_text() ?>
</div>
<cite><?php comment_type(__('Comment'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a></cite> <?php edit_comment_link(__("Edit This"), ' |'); ?>
</li>
</ul>

That’s it! If anyone out there knows a more streamlined way of doing this, please enlighten this adventurous noob. When I want something figured out, it gets figured out; it doesn’t mean it’s the best work around though! Now get your gravatars set up!