How to Use Gravatars in WordPress and Beyond

We all like to see pictures of ourselves. It’s part of how we’re wired. We’re visual creatures. Somehow just seeing an image of someone else makes it easier for us to communicate with them and have a stronger connection.

Not only that, but using a consistent image to represent yourself around the web can help improve your branding. Using a Gravatar is an easy way to do that. Easy and free (I like free!)

gravatar logoThe name Gravatar came from Globally Recognized Avatar. An avatar is simply an icon or an image that represents a computer user. Using Gravatars is really very simple. Since version 2.5, Gravatar support has been built into the core WordPress functionality.

And even though the service is owned by Automattic (the same company that develops WordPress) it is fairly easy to implement in all sorts of other platforms too! Check out the Gravatar Implementation page to see how to use Gravatars with platforms like Blogger, MovableType, Drupal, Joomla, LiveJournal, Ruby on Rails, Cold Fusion, Pearl, Python, ASP… And the list goes on.

Gravatar as a Commenter

The easiest way to use Gravatars is as you are commenting on Gravatar enabled blogs. Simply go to the Gravatar website and click the link at the top to Sign Up.

The site will ask for your email address which you will have to validate. Once you do you can add your image from either your computer’s hard drive, web cam, or a web URL where your image is already online.

One thing to keep in mind is that you will want to crop your image to be square, which you can do after uploading the image, to keep it from distorting when it is displayed as a square image around the web.

Your Gravatar will then be married to your email address so that whenever you use that address on any Gravatar enabled web site your image will be shown automatically. That’s all you have to do. Piece of cake.

If you have multiple email addresses, you can even set up a different image for each one. Then choosing which image to use is as easy as entering a different email address.

Displaying Gravatars in Your Blog’s Comments

Displaying Gravatars in your blog’s comments is easy too with WordPress versions 2.5 and later. The first thing you will want to do is make sure they are turned on.

To do this click on the “Settings” menu and then choose the “Discussion” option.
Click image for larger view

Then scroll down the page to the “Avatars” section to adjust your settings.

Click image for larger view.

Here you can turn your Avatars on or off, set what rating to show and choose the default Gravatar to display on your blog. The three “Generated” default Gravatars will generate a random image based on the email address the user inputs.

Don’t forget to click the “Save Changes” button at the bottom after you have the settings the way you want them.

If your WordPress theme is Gravatar enabled then that’s all you need to do and you are good to go.

Getting Technical

(The rest of the post gets into coding and php. If you are not familiar with all that, feel free to stop reading and don’t feel bad. Most users won’t need to mess with any of this stuff anyway.)

WordPress will automatically call up the Gravatar as part of the wp_list_comments function. For example, if you wanted to just list comments (without trackbacks or pingbacks) with a Gravatar size that’s 48px square your comments.php file should have the following code in it:

<?php wp_list_comments('type=comment&avatar_size=48'); ?>

You can adjust the size to fit your theme or omit the type if you like.

Displaying Gravatars for Multiple Authors

If you have a blog with more than one author you can display the author’s gravatar as an easy way to let your audience know which one wrote any given post.

There are a couple of different ways you can do this but they both use the get_avatar WordPress function.

Since Gravatars are tied to email addresses you can use the author’s email to display the Gravatar with this bit of php code in your loop:

<?php echo get_avatar( get_the_author_email(), '80'); ?>

Where the number ’80’ is the size of the Gravatar. Simply change that out with whatever size fits your theme.

You can also use the author’s ID number that is assigned by WordPress in the get_avatar function instead of the author’s email if you’d rather. Here’s how that code looks:

<?php echo get_avatar( get_the_author_ID(), '80'); ?>

Either way should give you the same results.

Styling with CSS

The other piece needed to display Gravatars correctly, whether in the post area or in the comments is some styling. WordPress automatically adds a couple of classes to the html output to make things easier for you.

These classes are .avatar and .avatar-$size where “$size” is whatever avatar size you have set to display. So in the examples above the second class would be .avatar-48 and .avatar-80 respectively.

Using different size avatars for the author images in the posts and for the comment Gravatars can be one easy way to style them differently because of the different classes that WordPress assigns to the different classes.

Bottom Line

The bottom line is Gravatars are a very simple way to add a bit of personalization to your blog that can help foster conversation and build relationships.

With WordPress it’s nearly automatic these days and because the Gravatar system is so simple it is even easy to impliment in other applications beyond WordPress. Since it Gravatars are so easy to use, using them seems like a no-brainer to me.

SuccessCREEations.com runs on the Genesis Framework

affiliate program logo

The Genesis Framework empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Check out these incredible features and wide selection of designs. There are so many to choose from they created this handy theme chooser to help you find the perfect theme for your needs. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Or you can even Become a StudioPress Affiliate yourself to start earning today!

Comments

  1. We have a blog with 34 writers so having a face on them is important. We are just now implementing the use of Gravatars throughout the site and are very pleased with the service.

  2. Personally, I like the Gravatar concept, and have implemented it on a few of the blogs my customers have recently had tweaked.

    Perhaps I’m not the sharpest knife in the drawer, but I found setting up a Gravatar (on their site, not on the blogs) was a bit of a pain, as was finding my Feedburner ID when setting up there. I guess like most things it gets easier with practice…

    Thanks for sharing these types of tips, very handy stuff :)

  3. Gravatars are an awesome addition to any wordpress comment system. I find it encourages way more comments and creates way more professional interaction.

  4. I recently installed Gravatar here on the Laughing Squid blog. Gravatars are those cool avatars you see next to people’s comments. They help you maintain a consistent identity across blogs by providing a global avatar. They are really simple to setup and use.

  5. thanks for the gravatar tip!

    testing out our new gravatar with this comment (fingers-crossed).

  6. i totally agree with you by using a gravatar its a better way to communicate with someone with a more personal level as when you see their picture its like your showing more trust while the people that don’t reveal their identity are more of the shady individuals

  7. Great tutorial. Using a gravatar is a great way to brand yourself and your business. I will definitely be adding an image in my wordpress admin.

  8. Got mine up :D It makes our comments look so much less like spam, even if they are. I’m going to be looking at getting a picture of myself in my comments soon just to make them look even better. Thanks for the tutorial!

  9. This is very nice post on, “how to use gravatars on wp blog”.

    ==> Peter

  10. I’d been wondering how people got those cute little pics by their comments. I followed the link and signed up. You are officially the first sight I’ve commented on with my new gravatar.

  11. I recently installed Gravatar here on the Laughing Squid blog. Gravatars are those cool avatars you see next to people’s comments. They help you maintain a consistent identity across blogs by providing a global avatar. They are really simple to setup and use.

    yes…

  12. Thanks, looks easy when you know how! I think I’ll be adding them to my work blog, although there’s probably not that many users who actuially have one!

  13. I accidently stumbled across your blog but I liked it a lot. Keep up the good work.

  14. It was great to go through the stuff posted on your blog. Look forward to more useful posts in future.

  15. Man, you have great tips for internet marketing. I especially liked your Twitter post a couple of days back.

  16. Very cool idea. I find that depending upon the blog i post to, i may want to use a different image – based on whether it’s for business or personal. I assume we can setup more than 1 gravatar?

  17. Gravatars are funny but I think that they’re only useless gimmicks. It’s about the content (also in the comment for a blog) and for that reason it should be more important to do something in that case!

  18. I especially like using Gravatars because they don’t rely on a cookie installed on your PC, but simply on your registered email address.
    If you registered on Gravatar with an email for fun and another email for business, just comment using that email and the Gravatar will be there. No cookies, ips and other methods of tracking…

  19. This is something I need to implement for all our blogs.

  20. This is something I haven’t had a chance to implement in my blogs yet either. It definitely makes sense as far as branding goes and they do make everything instantly more personal and us bloggers more personable.

  21. Maybe the question is stupid, but are the those Gravatars are available in MU Wordpres blogs

  22. Finally got my Gravatar set up thanks to some pushing from Chris. Glad to see me!

  23. Gravatar is a cool adition for blogs

  24. I’ve been wanting to see my Gravatar but I haven’t figured out how to get one. I’m glad I found this blog. Thank you for the very useful tips and complete guide. Hopefully I have Gravatar the next time I visit here :)

  25. Good information. I was going crazy not being able to figure out how to change my gravatar!

    Thanks!

  26. gravatars are indeed great and i love mine. They connect words with images. My avatar is as you can see a car :)

  27. Sorry i misspelled my email now it should appear

  28. Good and nice explanation. I tried once to change gravatars to my wordpress, but now with these explanations is much easier. Thanks

  29. I too have never heard of gravatars before this post. I can see how it provides a more personal commenting system.

  30. i love gravatars, it give more colors to blogs :)

  31. I’m using wp-gravatar plugin
    good enough

  32. good post, but I tend to just stick to the default avatar!

  33. Gravatars, as very clearly mentioned, are giving to content a more personalized touch. A 48px × 48px jpeg graphic file is enough to offer the sense that we are interacting with another human. I think that Gravatars are one of those little, simple inventions that enhance the communication and interaction between Internet users.

  34. I’m glad I don’t need to use wp-gravatar anymore! The cartoons also look good (although some people might not like them on their site if it doesn’t fit with the theme).

  35. Excellent Post. Thanks

  36. Just wanted to say thanks for the useful information.

  37. WordPress’te kendi avatarlar?m?z? kullanabilir miyiz? WordPress’in böyle bir özelli?i olsa çok daha güzel olur bence.

  38. Gravtars are great for blogs. I noticed that vivvo (publishing CMS) uses gravtars too so I guess the word is spreading fast.

  39. Thanks for the tutorial. This solved a issue for me in my blog :)

  40. Great tutorial. Using a gravatar is a great way to brand yourself and your business. I will definitely be adding an image in my wordpress adminc yes

  41. I use gravatar too. It’s so easy and practical. I can change my gravatar any time I want, and it turns out automatically each time we leave comment. Support narcism, lol…. !

  42. gravatars is worth much more than I paid. gravatars did exactly what you said it does. It fits our needs perfectly.

  43. Thank you for your tutorial. I was trying to implement Gravatar on my old wp blog, but failed. Recently I have updated to wordpress 2.7.1 and was surprised to find Gravatar as a built in function.

  44. Well, this is certainly a reason for me to upgrade our WordPress. Even if the public doesn’t do it, it at least makes it more fun for employees who post. Or for the public to see what the employees look like. I love the idea.

  45. Don’t forget to first make JPG, GIF, or PNG image that your gravatar will be, before you setup a new gravatar. Keep the size under 10k

  46. Never heard about gravatar before this post. But it sound like something very fun and give more colours to a blog. Thanks for the knowledge.

  47. Yeah i am already used my gravatar…

    Gravatars are indeed gr8 nd i love mine… They connect words with images…

  48. You’d think more people that posted comments would have gotten Gravatars given the nature of your post.

  49. Can we use the favicon as the Gravatar. Will it work?

  50. The default gravatars look pretty bad. I’d prefer users have their own custom gravatars.

  51. Gravatars are a great way for commentors feel like they have more customization and uniqueness.

  52. I recently setup my Gravatar for my work e-mail and have enjoyed the ease of functionality across the various Gravatar enabled sites. It’s a wonderful centralization/implementation of a universal electronic necessity — to have a picture of one’s self on hand at any time!

  53. Useful information. Previously I had problems with this issue.

  54. Oh, that was a really nice service that gavatar provides. I’m really going to use that on my main blog that for sure and going to use your 100% guide to get it to work!

    Thanks for nice guides!

  55. I activated the plug-in on my blog, but unfortunately, it doesn’t look all that great…. :o( I use a blog theme that has a comic type comment that the Gravatar picture overlaps and doesn’t have great appeal…. But, my picture is going to spice up my comments on others blogs that us Gravatar!!!!

    Thanks again for the great informative post….

  56. I really like the idea of Gravatars. I’m glad that Automattic is providing such a great service that it can be incorporated into projects outside of WordPress as well.

  57. that was a really nice service that gavatar provides. I’m really going to use that on my main blog that for sure and going to use your 100% guide to get it to work!

    Thanks for nice guides!

  58. Just to make sure, they do not work in joomla right?

  59. Thx for your guide, sometimes gravatar ruined my layout, after read this article, maybe i can fix the problem after read this article..

  60. I have found that I use facebook for email now, just because there is a littel picture fo the person I am emailing. The simple act of posting a photo really makes a difference in terms of accesiobility. Guess I need to get a gravatar! Thx for the post!

  61. I love Gravatar and keep on wondering why don’t more people sign up. I mean, it’s so easy and convenient… especially considering plenty of others website where you have to go through a weird registration process.

    I encourage people to sign up on my blog and I’m surprised to see a lot of people don’t.

    A personalized Gravatar does make a difference.

  62. I totally agree with you by using a gravatar its a better way to communicate with someone. Thank you for your tutorial!

  63. Thank you! I long ago wanted to know how to use Gravatars on my site! Comments with Gravatars Pictures look very beautiful!

  64. Pekka S says:

    Thanks!

  65. Is there a way to link Gravatar to more than one WordPress site (verified services on Gravatar)? I’m a contributor on my work blog but also have a personal blog. I don’t seem to be able to verify a second WordPress site. Any ideas?

    • Mike, In the “Verified Services” section of your Gravatar profile you can only link to one WordPress.com account at a time. However if you go to the “My Links” section you can link to several different URL’s so you can add your other sites there.

      If one of the sites doesn’t show Gravatars in the comment section they either have them turned off (check under Settings –> Discussion –> Avatars to make sure they are on) or possibly the theme being used doesn’t support Gravatars. Fixing the theme is a little more complicated.

      Hope that helps.

  66. rkrasiha reo says:

    Check out Increasr.com, you can get credits there much faster, you can also get twitter followers, facebook fans, youtube subscribers and video views. Check it at http://www.increasr.com

  67. Using Gravatar everywhere… not hard, just tricky and it can be done!! full tutorial: http://tumblr.com/xwb3j0aewk

  68. Thank you for your great post… now i have a gravatar and show my selected avatars on my wordpress site… thanks once again.

  69. I am having a problem figuring out how to get my name associated with my gravatar to link to my website.

    What am I missin?

  70. wow,it’s a nice idea to implement ..thanks author

Comment Policy: Your words are your own, so be nice and helpful if you can. Please, only use your real name and limit the number of links submitted in your comment. If in doubt, please take a moment to review our full Comment Policy before you click "Post Comment" so we don't mark your comment as spam.

Speak Your Mind

*

css.php