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.

Subscribe to RSS

By: Leland on May. 9

Bookmark and Share

22 Comments »

Comment by Banago Subscribed to comments via email
2008-05-09 12:38:46

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!

 
Comment by Leland
2008-05-09 12:55:57

@Banago: Nice, I like it. Thanks for commenting.

 
Comment by Kyle Eslick
2008-05-09 14:13:03

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!

 
Comment by mayooresan Subscribed to comments via email
2008-05-10 01:26:35

Thanks for the tips…
Hope to enable in my theme verysoon….
some themes now coming with buid-in gravatar support such as mistylook! :)

 
Comment by Banago Subscribed to comments via email
2008-05-10 12:08:32

@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? :)

 
Comment by Leland
2008-05-11 19:43:42

@Banago, left you a comment on your blog. :)

About Gravatars on Theme Lab, I’ll add those soon enough.

 
Comment by Banago Subscribed to comments via email
2008-05-12 10:53:57

@Leland: Thanks for the comment, it was very nice of you.

 
Comment by Banago
2008-05-17 11:37:39

Oh, that is good, you implemented gr avatars. They look good.

 
Comment by bienB
2008-06-01 06:32:15

Muchas gracias por el articulo.

 
Comment by shunichirou
2008-06-03 04:02:03

wow, thanks for the tutorial :D

i was wandering the net for this, thanks

 
2008-06-19 07:55:38

Thanks for the help!

 
Comment by vegas
2008-06-22 10:53:01

Thanks!

 
Comment by Pauline
2008-07-01 01:32:34

Thank you! You explained it very easily.

 
Comment by Revital
2008-07-01 08:22:09

Thanks a lot. I tried some other codes offered around the web, this one was the one that worked exactly as I needed!

Thanks!!!

 
Comment by eTomyam
2008-07-07 09:25:10

interesting, I’m facing the gravatar issues right now, it fixed well in my mozilla browser but turn ugly on IE7..

 
Name (required)
E-mail (required - never shown publicly)
URI
Subscribe to comments via email
Your Comment (smaller size | larger size)
You may use <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> in your comment.

Trackback responses to this post

Recent Comments

  • Nisheeth: Hi, How to make changes to the main page, like changing the text of About or removing it
  • Marshal: Hi Leland, I am a big user of these theme, but I run my blog in Spanish, so every time the theme is updated...
  • Dan Gheorghe Somnea: Hello, I am an wordpress newbie. I appreciae this 3 columns wordpress theme as an oportune for...
  • Anto: Meh this looks interesting. I hope they put better themes up there tho. Or design some with they’re...
  • #FN$#: Really? Oh,thank you!! I’m glad you like it!…

About The Author

Welcome to Theme Lab. My name is Leland, and I run the place. I write all the tutorials and code all the themes you see here on the site.

For more information about me, feel free to read the about page. If you want to drop me a message, feel free to contact me.

Interested in advertising on Theme Lab? We have advertising available at very reasonable rates. Head on over to the advertising page for further details.

Please read our Privacy Policy and Terms of Service in regards to theme usage.

© 2008 - Theme Lab - Powered by WordPress