X

Add Gravatar Support to Your WordPress Comments

After a few different people requested Gravatar support in the comments for the popular Choice WordPress theme, I decided to look into it more carefully. I came across this great post by HackWordPress which gives you a small code snippet to add Gravatars to your comments loop. Since then, I’ve been adding Gravatar support to all the themes here, just because it’s so simple to do. In this guide I’ll show you how exactly I integrate Gravatars into themes.

Before you continue, please understand this is guide is written for WordPress 2.5 and above only. The code gone over will not work in previous versions.

The Gravatar Code

Just plopping in the following code in your comments loop will work, but it probably won’t look very good as-is.
<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '50'); } ?>

Basically this code will check to see if you have the get_avatar (native to WordPress 2.5), then display the avatar of the commenter in a 50px square.

Use a Ruler

If you want to make sure your Gravatars are at a suitable size, I recommend the MeasureIt Firefox extension. This will help you measure out an area in your theme to determine a good size for Gravatars.

Where to put the code?

In the Choice theme, I found that 40 was a good size. So where did I put this code exactly?

Choice Gravatar Location

Anywhere within the foreach and endforeach (the comments loop) will work.

Styling your Gravatars

Once you have Gravatars displayed on your comments template, you’ll probably want to style them too. You’ll notice the Gravatar code spits out the “avatar” class on each image. Let’s add a line to the CSS stylesheet to float this to the left, and add a small right margin.

img.avatar {float:left; margin-right:5px;}

There you go, you have nice looking, perfectly sized, styled Gravatars. Of course themes will differ, you can style them however you like.

Conclusion

Remember, this code will only work on WordPress 2.5 and above. The function_exists conditional tag will cause your theme not to break, but nothing will show up in previous versions. More information on other methods of using Gravatars are detailed on the WordPress Codex.

If you just read this whole article and have no clue what a Gravatar is, I suggest you read this one first by Lorelle on WordPress. It goes over the basics of how to get your own Gravatar by signing up at Gravatar.com as well as using Gravatars on older versions of WordPress with plugins.

Not only can Gravatars be used for comments, but they can also be added to author’s individual posts as well.

If you enjoyed the article feel free to comment and share. I’d like to hear your thoughts. Subscribe to the feed for the latest Theme Lab updates.

Comments  Leave a Reply

  1. Thaaaaaaaaaaaaaank you!!!! 🙂

  2. Wow! That helps. I been fooling around with my non premium theme for hours trying to figure that out. WordPress Codex support doesn’t help much. They don’t explain exactly where to put the code. What a relief that I found this site. Been coding since 2008 and still run into problems.

  3. Thanks, I am having some real issues getting this to work on my blog, but hopefully this will help. I am using a theme that runs on Thematic so I can find the “foreach” you mentioned but not the “endforeach” and when I added the code it didn’t work for me. I guess I will keep at!

  4. Thanks for this great how-to mate! Works just fine! Whoop whoop!

  5. Sandra Hendricks May 20, 2010 at 4:15 pm

    It worked like a charm! Thank you soooo much Leland for your post! Your Blog is truly a blessing to all who have WordPress! 🙂

  6. Thank you so much – worked like a charm!

  7. Your theme should contain avatar, as it’s quite standard in wordpress. If it doesn’t it’s a craooy theme, and you would be better off finding another theme. 😉

  8. Hairtransplantdoc October 19, 2009 at 11:18 am

    My theme doesn’t contain this loop inside comments.php, any ideas?

  9. Oh my god, at last a code, that worked… I couldn’t get the system to load the avatars, that were attached to the author emails… you’rs worked!!

    Many many thanks.

  10. Thanks, I’ve just set it up on my blog, too.

  11. Thanks a lot! This was easy 🙂

  12. nice i done with the comments
    but i want to add more info with each post about the author
    his name
    his avatar
    and bio
    my blog here http://www.eskandarany.org/blog
    how and what the CSS code to style all this new stuff

    thanks in advance 🙂

  13. Hi there,

    Useful information, I’ve now successfully integrated Gravatar into my site.

    Cheers,
    Eddie Gear

  14. Cool random avatars | Turtle Juice: Making Money Online July 8, 2009 at 5:00 am

    […] Learn more: Using Gravatars Add Gravatar Support to Your WordPress Comments […]

  15. Add Gravatar in WordPress Comments « Ivan Teoh July 8, 2009 at 1:59 am

    […] Add Gravatar Support to Your WordPress Comments […]

  16. Gravatars Enabled - Your Search Advisor Blog July 2, 2009 at 7:15 am

    […] add Gravatars to your WordPress blog, download the plugin and follow these instructions. Simple! var addthis_pub = ‘RichmondWiki’; var addthis_brand = ‘Your Search Advisor’;var […]

  17. Hi man, the post is awesome. But my problem is to asociate the gravatar image to an author image in my index.php WordPress blog. I don’t know the correct sintaxis to do this. Have you any sugerence? Thanks a lot!!!

  18. Dario Gutierez May 19, 2009 at 9:58 am

    Really effective, I was looking for this. Thanks.

  19. Add New Post | scream out May 2, 2009 at 1:28 am

    […] by myself. This theme has all the normal features of a blog theme here at Theme Lab, including Gravatar support for comments, a widget-ready sidebar, and native WordPress tag support. This theme also 125×125 ad […]

  20. Thanks so much for this post. After reading this, it took me about 4 minutes to follow your instructions and get them working on my site.

    You rock!

  21. Craisin.com | Craisin.com Revamp - Spring 2009! April 5, 2009 at 12:19 am

    […] Theme Lab – Add Gravatar Support to Your WordPress Comments — to add more imagery to the comments section […]

  22. great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.

  23. I am so glad I found your site. Great information on how to get to add a Gravatar to ones site. I wasted hours trying to play with a plugin and it took me just seconds following your examples to get what I wanted for the site.

    Thank you so much! I only wished I had googled you earlier 🙂

  24. The code works to get the avatars in the comments. I’m having trouble with alignment in IE7.

    In IE7, the first avatar aligns correctly, then avatars in subsequent comments are indented to the right by a couple of pixels.

Add a Comment

We're glad you have chosen to leave a comment. Please keep in mind that all comments are moderated according to our privacy policy, and all links are nofollow. Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WordPress Launch Checklist

The Ultimate WordPress Launch Checklist

We've compiled all the essential checklist items for your next WordPress website launch into one handy ebook.
Yes, Send Me the Free eBook!
[60% OFF Today!]
[60% OFF Today!]
[10% OFF Today!]
[10% OFF Today!]
[50% OFF Today!]
[50% OFF Today!]