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.
Anyways, how can one contact you to do...
I have implemented gravatars at the theme of my blog. In fact I was about to ask for a feedback about my new design. I would love your feedback. Thanks!
@Banago: Nice, I like it. Thanks for commenting.
Great post Leland!
I’m a huge supporter of Gravatars, so I love seeing more theme designers add built-in Gravatar support.
Like you said, it really is that easy to do!
Thanks for the tips…
Hope to enable in my theme verysoon….
some themes now coming with buid-in gravatar support such as mistylook!
@Leland: Thanks for your feedback, I really appreciate that. I would love it if you posted a commet at my blog as not everybody had done so
Second: When do you intend to implement gravatars at your blog?
@Banago, left you a comment on your blog.
About Gravatars on Theme Lab, I’ll add those soon enough.
@Leland: Thanks for the comment, it was very nice of you.
Oh, that is good, you implemented gr avatars. They look good.
Muchas gracias por el articulo.
wow, thanks for the tutorial
i was wandering the net for this, thanks
Thanks for the help!
Thanks!
Thank you! You explained it very easily.
Thanks a lot. I tried some other codes offered around the web, this one was the one that worked exactly as I needed!
Thanks!!!
interesting, I’m facing the gravatar issues right now, it fixed well in my mozilla browser but turn ugly on IE7..
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!
@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.
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
thank you
hmm… finally I know what “The WordPress” loop is! I’ve searched for theloop.php <- LOL
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.
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?
@testercraft: I found this plugin that may be what you’re looking for: Gravatar Recent Comment
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.
Sweet! I’ve been hacking away at a theme for a long time and this was the finishing touch. Thank you so much!
Thanks for the tips. The Gravatar site didn’t explain it clearly enough, but your screenshot made it clear. Cheers.
Just what I was looking for
Great explanation with “Where to put the code” and “Styling your Gravatars” - Thanks
thanks a lot
thank you
Thanks…I’ll implement it in my BLOG
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.
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
great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.
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!
Really effective, I was looking for this. Thanks.
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!!!
@Alejandro: Check out this link: http://themeshaper.com/how-to-add-gravatars-for-the-post-author-in-wordpress/