How to Add Pics to Your Recent Comments in WordPress

As a special request, this is a quickie to show you how to add visitor photos (aka gravatars) in your comments like I have on my blog.  You will need to have the Recent Comments plugin installed and activated in WordPress.

In you Recent Comments configuration screen, click on the Output link to be taken to the Output Settings page.  Here is where you will create your “output template”.   There are a number of tags available for use with Recent Comments.

The ones you want are for your output template are:

  • {gravatar} – this is your visitor’s photo, it will be shown if they are signed up at gravatar.com
  • {commenterurl} – this is the link to your visitors website (or whatever site they put into the website box when they left the comment)
  • {commentlink} – this is the link to the actual comment they left on your website and it includes their name and which post they commented on as part of the link text
  • {commentexcerpt:20} – this displays the first 20 characters of the comment (you can change the #20 to however many characters you want, its like a preview/excerpt of what they said)
  • {commenturl} – this is the link to the actual comment they left on your website

Now with a little HTML we can create the layout of the list of comments (explanation follows):

<center>
<a href={commenterurl}>{gravatar:65:G:identicon}</a>
</center>
{commentlink}{commentexcerpt:20} <a href=”{commenturl}><br>read more</a>

First, I want to make sure the gravatar is centered so I will use the <center> tag. Next I want to link the gravatar to the visitors website, so I will create a hyperlink. This is the same as you would do when linking to your keywords in your articles using <a href>. However, instead of using an actual URL like http://www.gwentanner.com, you will use the {commenterurl} tag in it’s place. Notice you still have to enclose it in quotes.  Next I want to show the gravatar, so I will use the {gravatar} tag and then close the link tag with a </a>.

Take a look at some of the other stuff I’d added to the {gravatar} tag.  The “65″ is the width of the gravatar, you can change this to 20, 80, 100, etc. however large you want it to be.  Next is a “G” this means you only want the G rated avatars to show (WordPress seems to understand what this means, so just enter G). Then you will see “identicon”, this is the name of the generic icon I want to show when folks don’t have one. You can find these in the Avatars section of your Discussion settings in your WordPress Admin area. These three additional parameters are separated by colons.

Moving on….  I closed with the  </center> tag so that the following text will not be centered. I only want the photo centered.  The next thing is the link to the comment on your blog. Since this tag “fills in” the link yoyu don’t have to use the <a href> tag, just enter {commentlink}. You may notice I typed in a colon after mine, just to separate it when it displays.  Now I added in the 20 character excerpt with the {commentexcerpt:20} tag.  Finally, I made a link for the “read more” text using the {commenturl} tag. Right before it I added <br> (line break, like a carriage return) to make sure “read more” was shown on the following line.

Now, take all of this and paste it into the Output template box and click Save Output Settings.   And that should be it!

Keep in mind that you can style yours with quotes and ellipses like I did, but I just want to show you the basics. You would add them in around the tags, just like I’m showing with the colon above. You can also play around with some of the other available tags to style your recent comments the way you like. Here are the other tags that you can use.

I know it’s a little technical, but if you have any questions let me know and I might be able to help you out :)

  • Share/Bookmark

3 Responses to “How to Add Pics to Your Recent Comments in WordPress”

  1. Follow me on Twitter:

    Great Tutorial, Gwen! The instructions you provided were easy to follow! Thanks!
    Jaime´s last blog ..My Fab 5 – Online Gurus My ComLuv Profile

  2. Follow me on Twitter:

    Gwen, You are such a fabulous teacher! This was already set up on my main business site, but I recently moved my Skin Care Blog at yvonneajones.com from Blogger to WordPress and notice that no pictures are showing with the comments. Could it be that these persons have not created an Avatar, or perhaps I need to do the above?

    I’ll explore this further, but this is a great tutorial I’ll keep a note of since my market is for beginners and I can refer them to your post. Thanks, Gwen.
    Yvonne A Jones´s last blog ..Learn the Secrets to Increase Your Online Visibility Through Your BlogMy ComLuv Profile

  3. Follow me on Twitter:

    Hi Yvonne,

    Thanks for visiting! It’s always so great to have you stop by. I just found a great post on your yvonneajones.com site and left a comment. My gravatar showed when I made the post, so I think it’s working. I guess the other commenters just hadn’t setup their Gravatar accounts.

    Gwen

Leave a Reply

Subscribe to RSS 2.0 for comments

CommentLuv is enabled for my visitors!

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.