How to Add Gravatars to WordPress Themes

Add Gravatars to your WordPress theme. Gravatars are a quick way to add a personal touch to your blog comments by displaying the avatar of the commenters alongside their comment. The latest WordPress versions incorporate Gravatar support by default (you don’t need a plugin anymore!). This article will show you how to add gravatars / avatars to your WordPress theme in a few minutes.

1. Show Avatars in WordPress

First you need to enable your WordPress theme to display avatars. After logging into WordPress admin, go to Settings > Discussion and for the Avatars.

2. Add Gravatars to WordPress Theme

Then you will have to set the php code in your comments.php in the appropriate area where you want the avatars to appear (usually after the individual comments li tags). Add this code there.

<?php if(function_exists('get_avatar')) { echo get_avatar($comment, '40'); } ?>

If gravatars are enabled from your WordPress Admin settings, then this code will show avatars or will disappear. The “40” signifies a avatar size of 40px by 40px square, you can edit this to suit the size of your theme template.

3. How to style the Gravatar

You basically need to style the .avatar class displayed by the php code. Try some css examples below and edit it to blend with your blog design.

#comments .avatar {
float: left;
margin: 0;
padding: 0 4px 0 0;

or the position can be fixed to the top-left of the individual comments.

#comments .avatar{
position: absolute;
top: 1px;
left :1px;

You can also use img .avatar to style the tags. Using different CSS styles, you can position or align avatars wherever you like.

4. Optimizing Blank Avatars

Not all your commenters would have signed up for Gravatars. So what do you do with the blank avatar spaces? Showing the default mystery man or gravatar logo is not a good idea.

Instead you can opt to display Identicons, Wavatars and MonsterID to get some automated visually appealing avatars. This will automatically generate some cool avatars for all your comments. I personally like the Wavatar.

5. Hide NSFW / Adult Avatars

Gravatars are rated and you can opt to show family safe gravatars on your site only from the Avatar settings

Well that’s it. Your blog theme is now gravatar enabled.

Get a Gravatar – If you don’t have a gravatar already, Sign up for it today. With so many blogs supporting gravatars, it will give your comment better visibility. Get the new version of QuickPress theme, now supporting Gravatars.


  1. Sean says:

    Thanks! These things are pretty cool!

  2. Peter says:

    Wow, that was easy. Thanks! I’d been putting off implementing gravatars onto my site until I saw this quick tutorial :D

  3. Peter says:

    One other comment though… why don’t you use gravatars on this site?!?

  4. Gravity says:

    thnx alot for the share. i never knew this feature for wordpress

  5. Mrs S | Blue Archipelago says:

    Thanks so much for this tut – my theme didn’t have gravatars enabled and I had no idea what code I needed to add them in – and it was so simple too!

  6. Jeremiah says:

    Thanks for the info. I wanted to update my site but wasn’t sure how to code the theme.

  7. Web Design Bangkok says:

    Thanks a lot. I’m not quite sure what sites I can add gravatars to because in the main I deal with commercial sites. But worth experimenting with.

  8. Michael says:

    Thank you so much man, you rock!

  9. Irish polyglot says:

    Wow! Didn’t think it was so easy :) I’ll just add that it looks nicer if you add it WITHIN the tag just after
    <li class=”” id=”comment-“>
    (although that may just be for the theme I’m using). Otherwise the image appeared after the comment, which didn’t look so great.
    Anyway, your post is nice and clear! You’ve earned the google page 1 rank for this search that brought me here :D

  10. Kyle Tunney says:

    Thanks for that, just coding my blog at the moment. Handy bit of code :)

  11. Aslam Multani says:

    This is very cool feature

  12. Mr. Alien says:

    Thanks for the advice, this was very helpful!

  13. ryan says:

    Had used this in my blog,works swiftly!thanks!

  14. michele says:

    Thanks! These things are pretty cool!

  15. Alex says:

    Thanks in advance;i haven’t yet implemented, but looks easy.

  16. Pressboard says:

    We need to use the CSS expression to set the width of the above mentioned div tag and the screen.width of javascript also.

  17. Grace L. says:

    Looks simple, I hope it works!

  18. Lord and Aksana says:

    Hi! This code worked perfectly with the theme that we were currently using on WordPress. Now the theme and gravatars are simply controlled through the dashboard! We have been looking for this code everywhere on the net but to no avail, thank you so much for posting!

    Instructions were clear and we had no problem replacing the original code even though we are not programmers.


    Lord and Aksana

  19. Lord and Aksana says:

    By the way do you know how to add the code so that gravatars are also on Recent Comments? Where would this code have to be entered also in the comments.php? Thanks.

  20. Arnold Ringley says:

    Amaze! I’ve been seeking bing all day because of this and i also lastly think it is right here!

  21. xenomorf says:

    thank you very much.. i’m in the middle of creating my own theme when i encounter the problem off adding the gravatar.

  22. Website Design BKK says:

    Was looking all over for an easier solution to adding these gravatars to our websites. Thanks a bunch!

Leave a Reply

Your email address will not be published. Required fields are marked *