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.
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.
[…] Reference : http://themelab.com […]
Thanks…I’ll implement it in my BLOG
thank you
thanks a lot
[…] of blogs. If you like Gravatars, then you’ll like this theme a lot. Not only does this theme have Gravatar-enabled comments, but also Gravatar display for the post author. This theme is also 125Ă—125 ad ready, so feel free […]
Just what I was looking for 🙂 Great explanation with “Where to put the code” and “Styling your Gravatars” – Thanks
[…] is also a plugin for this, although I like to edit the code myself. Here are some advice on that, just add some […]
Thanks for the tips. The Gravatar site didn’t explain it clearly enough, but your screenshot made it clear. Cheers.
Sweet! I’ve been hacking away at a theme for a long time and this was the finishing touch. Thank you so much!
That was super helpful, bro. I’ve spent the last two days trying to figure this out. WordPress couldn’t answer my question; neither could Gravatar. But you did. Thank you.
@testercraft: I found this plugin that may be what you’re looking for: Gravatar Recent Comment
i have installer the gravatar and it is functioning well on my comment page..but how do i show the avatar on my recent comments on the sidebar?
[…] Silahkan dibaca-baca situs ini jika mengalami masalah yang sama dengan gue. “Add Gravatar to WordPress Comment” […]
Thank for the help. I made some changes to my site the other day, and noticed…where the heck are my gravatars? Had to figure out how to put back on. The best help was including the css info.
hmm… finally I know what “The WordPress” loop is! I’ve searched for theloop.php <- LOL
thank you 🙂
WordPress 2.6 Gravatar in Brian Threaded Comment…
It’s been quite a while that I wanted to have gravatars appeared in this blog’s Brian Threaded comments without using any plugins. Just a simple code. It should be possible considering WordPress 2.5+ and 2.6 are gravatars built-in.  It t…
Hi,
I have added gravatar to my comment list from ur great trick, Really its very simple. The same code is given http://hackwordpress.com/wordpress-25-how-to-add-gravatar-to-your-wordpress-theme/ here also but its difficult caz i d’t know where to post the code, BUT YOUR POST TELL EVERTHING CLEARLY.
But still i am facing a problem. I also wantto display gravatar in the sidebar “Recent Comments” section, so please tell me to do so, which file i need to edit. I am using wordpress 2.6
Thanks,
Prashant
@Spencer: You know…that’s actually been bothering me for the longest time and I had no idea what the problem was. I just added the background CSS to the .post class and .head class. Thanks for the tip.
@eTomyam: Hmm…is this a Gravatar issue or a styling issue?
Thanks for the comments everyone, glad you all liked the tutorial.
This might be kind of anal, but those who are copying and pasting code that you have posted, could you add the background:#fff; to your div.post within your css? If you try highlighting the code the way that it is now, it’s hard to tell what you’re highlighting because you haven’t declared a background on it. Anyways, it might make things easier for your users…
Thanks!