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?
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.
Thaaaaaaaaaaaaaank you!!!! 🙂
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.
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!
Thanks for this great how-to mate! Works just fine! Whoop whoop!
It worked like a charm! Thank you soooo much Leland for your post! Your Blog is truly a blessing to all who have WordPress! 🙂
Thank you so much – worked like a charm!
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. 😉
My theme doesn’t contain this loop inside comments.php, any ideas?
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.
Thanks, I’ve just set it up on my blog, too.
Thanks a lot! This was easy 🙂
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 🙂
Hi there,
Useful information, I’ve now successfully integrated Gravatar into my site.
Cheers,
Eddie Gear
[…] Learn more: Using Gravatars Add Gravatar Support to Your WordPress Comments […]
[…] Add Gravatar Support to Your WordPress Comments […]
[…] 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 […]
@Alejandro: Check out this link: http://themeshaper.com/how-to-add-gravatars-for-the-post-author-in-wordpress/
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!!!
Really effective, I was looking for this. Thanks.
[…] 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 […]
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!
[…] Theme Lab – Add Gravatar Support to Your WordPress Comments — to add more imagery to the comments section […]
great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.
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 🙂
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.