ThemeLab's Blog

Stay up to date with our newest WordPress themes, WordPress plugins, WordPress tutorials, and other announcements.

Add Gravatar Support to Your WordPress Comments

Last Updated on by

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.

  • http://www.xixblog.com Banago

    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!

  • Leland

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

  • http://hackwordpress.com Kyle Eslick

    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!

  • http://hotwordpresstips.com mayooresan

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

  • http://www.xixblog.com Banago

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

  • Leland

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

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

  • http://www.xixblog.com Banago

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

  • http://www.wplancer.com Banago

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

  • Pingback: WPZOOM ›› Best Resources for WordPress - Round 1

  • Pingback: Wordpress Comment Styling Round Up

  • Pingback: ArsGeek » Wordpress Comment Styling Round Up

  • Pingback: PixelCSS : Soporte de gravatar en wordpress

  • http://www.pixelcss.es bienB

    Muchas gracias por el articulo.

  • Pingback: Adding Gravatar Support to your Wordpress Comments | The Second Press

  • http://www.watulawang.co.cc shunichirou

    wow, thanks for the tutorial :D

    i was wandering the net for this, thanks

  • http://limitededitioniphone.com Limited Edition iPhone

    Thanks for the help!

  • vegas

    Thanks!

  • http://thatscarychick.com Pauline

    Thank you! You explained it very easily.

  • http://www.revitalsalomon.com Revital

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

    Thanks!!!

  • http://lifesotomyam.com/ eTomyam

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

  • Pingback: iGraphiX Blog | RS10 - Free WordPress Theme

  • Pingback: WordPress 2.6 Released - some new features - More than just work?!

  • Pingback: » SimpleWP - Free WordPress Theme ThemeHook: ??? WordPress Blog

  • Pingback: Daily Design Links for 7-25-08 | Anidan Design : eco-friendly web & graphic design

  • Pingback: Chocolate WordPress Theme Review | FreeWordpressThemes.us

  • http://barefoot-webdesign.com Spencer

    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!

  • Leland

    @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.

  • Prashant

    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

  • Pingback: Blogger Indonesia A. Fatih Syuhud Weblog

  • http://khal3d.mofdala.net Khal3d

    thank you :)

  • http://www.anomtejo.web.id tejo

    hmm… finally I know what “The WordPress” loop is! I’ve searched for theloop.php <- LOL

  • http://www.bestwebimage.com Rob

    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.

  • Pingback: Blognya AUDI » Masang Avatar

  • testercraft

    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?

  • Leland

    @testercraft: I found this plugin that may be what you’re looking for: Gravatar Recent Comment

  • http://blog.the-thinking-man.com/ Thin king man

    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.

  • http://www.raymondburton.com Raymond Burton

    Sweet! I’ve been hacking away at a theme for a long time and this was the finishing touch. Thank you so much!

  • http://www.yoursearchadvisor.com/blog/ Andrew Miller

    Thanks for the tips. The Gravatar site didn’t explain it clearly enough, but your screenshot made it clear. Cheers.

  • Pingback: Hacks to boost your WordPress 2.7 blog

  • http://www.bravonet.dk Henning Nielsen

    Just what I was looking for :) Great explanation with “Where to put the code” and “Styling your Gravatars” – Thanks

  • Pingback: DivageekDesigns.com - 15 WordPress Themes made just for you!

  • oussama

    thanks a lot

  • http://hho.host-il.info BFalcon

    thank you

  • http://emag.joreeldiaz.com joreel

    Thanks…I’ll implement it in my BLOG

  • Pingback: Add Gravatar Support to Wordpress Comments | just another damn notes

  • Mark

    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.

  • http://www.animejackpot.com/blog TAG

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

  • http://thesocalledme.net Jenny

    great!! glad i found this. now to find a way to reset my comments so they all have gravatars next to them.

  • Pingback: Craisin.com | Craisin.com Revamp - Spring 2009!

  • http://livingtheliminal.com Peter

    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!

  • Pingback: Add New Post | scream out

  • http://labs.dariux.com Dario Gutierez

    Really effective, I was looking for this. Thanks.

  • Alejandro

    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!!!

  • Leland
  • Pingback: Gravatars Enabled - Your Search Advisor Blog

  • Pingback: Add Gravatar in WordPress Comments « Ivan Teoh

  • Pingback: Cool random avatars | Turtle Juice: Making Money Online

  • http://metalique.com Eddie Gear

    Hi there,

    Useful information, I’ve now successfully integrated Gravatar into my site.

    Cheers,
    Eddie Gear

  • http://www.eskandarany.org Ismail Mohamed

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

  • ancore

    Thanks a lot! This was easy :)

  • http://www.portigal.com/blog Steve Portigal

    Thanks, I’ve just set it up on my blog, too.

  • http://gamingirl.com Twinkling82

    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.

  • http://hairlosspress.com Hairtransplantdoc

    My theme doesn’t contain this loop inside comments.php, any ideas?

  • http://gamingirl.com Twinkling82

    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. ;)

  • http://herecomesthestork.com/blog Heather

    Thank you so much – worked like a charm!

  • http://thisshouldhelp.net Sandra Hendricks

    It worked like a charm! Thank you soooo much Leland for your post! Your Blog is truly a blessing to all who have WordPress! :)

  • http://apas.gr Apostolos

    Thanks for this great how-to mate! Works just fine! Whoop whoop!

  • Sasha

    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!

  • http://www.latestjewels.com Bruce

    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.

  • Nico

    Thaaaaaaaaaaaaaank you!!!! :-)