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.
[…] Comments with Gravatar support […]
[…] Add Gravatar Support to Your WordPress Comments (tags: wordpress gravatar Tags: Daily Links, design links, links Posted under: Daily Links Subscribe to this feed […]
[…] 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 […]
[…] Updates like these just get you all excited to try and make use of the features, full avatar support as well for commenters across both gravatar, identicon and monsterID. Been dying to implement the avatar feature on the company blog for sometime, and this will be the perfect time. For those wanting to add it as well, found a great writeup this morning on how to enable the feature with some very basic PHP changes here, Gravatar Support. […]
[…] Soul, integrated into a WordPress theme. This one has all the usual features, including native Gravatar support (WordPress 2.5+ only), tagging support, and a widget-ready sidebar. It also has a special homepage […]
interesting, I’m facing the gravatar issues right now, it fixed well in my mozilla browser but turn ugly on IE7..
Thanks a lot. I tried some other codes offered around the web, this one was the one that worked exactly as I needed!
Thanks!!!
Thank you! You explained it very easily.
Thanks!
Thanks for the help!
wow, thanks for the tutorial 😀
i was wandering the net for this, thanks
[…] Add Gravatar Support to Your WordPress Comments | Theme […]
Muchas gracias por el articulo.
[…] hemos visto en ThemeLab SHARETHIS.addEntry({ title: “Soporte de gravatar en wordpress”, url: […]
[…] THEMELAB: “Add Gravatar Support to Your WordPress Comments” […]
[…] THEMELAB: “Add Gravatar Support to Your WordPress Comments” […]
[…] Visit Tutorial […]
Oh, that is good, you implemented gr avatars. They look good.
@Leland: Thanks for the comment, it was very nice of you.
@Banago, left you a comment on your blog. 🙂
About Gravatars on Theme Lab, I’ll add those soon enough.
@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? 🙂
Thanks for the tips…
Hope to enable in my theme verysoon….
some themes now coming with buid-in gravatar support such as mistylook! 🙂
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!
@Banago: Nice, I like it. Thanks for commenting.
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!