Skip to main content.

Gravatars in WordPress, or What the %$#@ is a Gravatar?!?

by James Brush on December 4th, 2008 | 10 Comments

The other day Mike from 10000 Birds left a comment here. What startled me was the fact that there was a picture of him next to his comment in my admin interface. How the devil did he do that? I thought.

I checked the image properties and found that it was served by gravatar.com, a site that allows you to upload a picture and associate it with an email address. Then whenever you use that address to log into a forum or blog that supports gravatars, your picture comes up by your name.

The latest WordPress versions support this, and so I studied the default theme and adjusted my comments.php file to show gravatars. A little CSS styling to tweak and there it was.

If you comment here, consider visiting gravatar.com and signing up for a gravatar, then leave a comment and your gravatar will appear alongside your comment.

If you don’t have one, WordPress will just generate a little pattern. I can also set it to display cartoon monsters for each commenter. Should I do that? Hopefully nobody would be offended.

Want to add gravatars to your WordPress theme? Here’s how:

Simply open your theme’s comments.php file and add the following code (the 40 gives the size of the image in pixels):

< ?php echo get_avatar( $comment, 40 ); ?>

Before this line (assuming your comments.php is based on the default theme):

< ?php comment_author_link() ?> says:

You’ll probably need to make a few adjustments to your CSS as well. I just lifted these lines from the default theme’s style.css and adjusted them to suit my theme:

.commentlist li .avatar {
	float: right;
	border: 1px solid #eee;
	padding: 2px;
	background: #fff;
	}

Easy as can be.

For more, visit the WordPress codex.

10 Comments | Filed under: blogging | Tagged:

10 Responses to “Gravatars in WordPress, or What the %$#@ is a Gravatar?!?”

  1. drivelocity says:

    Nice informative post… I noticed the same thing soon after I started drivelocity. A couple comments were posted with avatars and I dug all through the Admin section and my profile trying to find out how they uploaded an avatar. After a quick search about gravatars, I found that the theme I’m using was set up to work with them, so I registered and uploaded my own.

  2. Heather says:

    Ooh! Oooh! I want to be a cartoon monster!

  3. James says:

    Heather, Done!

    drivelocity, it’s really amazing how much one can do with WordPress that isn’t obvious. Sometimes I wish there was a manual, but then, the discovery is part of the fun.

  4. Mike says:

    My picture startles most people.

  5. George says:

    So does the Blogger avatar work over here, or do yo have to sign in at Avatar for it?

  6. George says:

    Hey, that’s not my avatar–so it assigns things randomly?

  7. James says:

    George, It assigns your monster based on your email address. The site you want is gravatar and it may take a little while once you’ve uploaded your gravatar for it to appear. Then, it should display that instead of your monster. Also, I have the blog set to only display G-rated ones.

    Mike, It was in a good way. :)

  8. George says:

    Well, might as well stay with a monster–I’ve been feeling sort of tentacly of late.

  9. Dennis Toll says:

    Let’s see if my collared lizard follows me to my comment.

    Nice blog!

  10. Dennis Toll says:

    Yes, there is my lizard. Looks just like me too.

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Comments will be sent to the moderation queue.