Tweaking Your Blog: Adding Avatars

Relevant WordPress versions: 2.5+. These instructions are invalid for WordPress versions less than 2.5 as built-in avatar functionality did not yet exist.

a man wearing glasses

Avatars are a very neat feature of message boards; without even the slightest bit of looking for (much less, reading) a user’s name next to a post, the avatar announces who made the post. It’s no secret that an image is more easily recognizable than is text — even if the image is made up of text! If you’re not sure what I mean, think of the McDonald’s, Coca-Cola, Pepsi, Burger King, or Disney brands, and you’ll know that logos and symbols (which, in a way, are companies’ avatars) are powerful recognition tools. The Golden Arches wouldn’t be hurt too much by not having “McDonald’s” written beneath them, nor does the tri-circle silhouette of Mickey Mouse leave any doubt as to what company is responsible.

But message boards aren’t the only places that users are leaving their marks online these days. We live in the era of the blog, and with millions of places online to post comments, how can a person do so in a manner that makes them as easily identifiable to as many people as possible, just as avatars allowed on message boards?

Gravatars are an answer (among several) to that; using the Gravatar service, you can associate an avatar to an email address, just as you would associate an avatar with a username on a message board. From that point on, any time you comment on a gravatar-enabled blog using that email address, your gravatar will show up.

And whatever your gravatar may be — whether it is a picture of you, a picture of your cat, or your favorite quote done up in glitter — it will start showing up all across the Web, as often you comment.

There are two inherent beauties to gravatars as well: If you have posted a lot of comments on a site that wasn’t gravatar-enabled but they turn it on sometime in the future, your gravatar will show up on all your past comments automatically. Likewise, if you ever change which gravatar is associated with your email address, that change will automatically take place across the Web.

You already run a WordPress blog, though, and you’re even savvy enough to be running version 2.5 or newer. Kudos. And you say you want your comments to be gravatar-enabled? Well, let’s get you started!

Enabling Gravatars

  1. Enter your blog admin area, and browse to the Settings page.
  2. Browse to the Discussion sub-page, and scroll to the bottom to find the “Avatars” settings.
  3. You’ll want to select “Enable Avatars” if it isn’t already selected.
  4. Choose whichever rating is most appropriate for your blog. Be aware that if your blog is ever manually reviewed for a Web filtering service, your blog may be flagged mature on account of R or X rated avatars if they are spotted in your comments.
  5. Click “Save Changes” at the bottom, and breathe a sigh of relief… You’re done!

… Wait… Gravatars still don’t show up in your comments? Didn’t you enable them? You did save the changes, right? … Hmmm… Oh, that’s right: there’s a tiny bit of code that you need to add to your theme’s comments file! Well, no time like the present…

  1. Browse to the Design page of your admin area.
  2. Browse to the Theme Editor sub-page, and select “Comments (comments.php)” from the list of files on the right.
  3. Locate the comment loop; it begins with a bit of code that most likely looks like this: [code]<?php foreach ($comments as $comment) { ?>[/code]
  4. Within the comment loop, notice two bits of code:
    • [code]<?php comment_author_link(); ?>[/code] — echoes the comment author’s name, linking it to his or her website, if one was provided.
    • [code]<?php comment_text(); ?>[/code] — echoes the content of the comment itself.

I point out those two bits of code because knowing where they fall in the code gives you a general idea of how the comment is laid out. It helps to know the layout if we’re going to be inserting an image into each comment, right?

  1. I prefer to place the avatars code on a new line just prior to [code]<?php comment_text(); ?>[/code], but you are free to experiment with different placements.
  2. The most basic code to add to enable avatars looks like this: [code]<?php echo get_avatar($comment); ?>[/code]
  3. Save the file, and check your blog to see the results!

Be careful not to paste that code between any [code]<?php ?>[/code] tags which may already be present in the code. If you notice errors or layout problems (keeping in mind, though, we haven’t applied style to the avatars yet), take note of what the error indicates and see if relocating the avatar code resolves the issue.

Okay, now, after all that, you should finally have a gravatars-enabled blog! Go ahead, browse around the various comments you have received and see who does or doesn’t have a gravatar; anyone who doesn’t will be given a spiffy default image so that they won’t feel left out.

Basic Styling

If you’re lucky, your theme may already have styling in place for avatars. Basically, if you’re looking at your avatars and they look just fine to you, excellent!

However, if the avatars could use a little jazzing up, here is a bit of style you can add to your theme’s style sheet.

  1. Return to the Theme Editor and select either style.css or custom.css (if your theme supports it) from the file list.
  2. At the bottom of that file (or elsewhere if you are maintaining some level of organization within the file), insert the following code:
    • If you want avatars to float to the right of the comment: [code]img.avatar { float: right; margin: 0 0 1em 1em; }[/code]
    • If you want avatars to float to the left of the comment: [code]img.avatar { float: left; margin: 0 1em 1em 0; }[/code]
  3. Save the file, clear your browser’s cache, and visit (again) a post which has comments.
  4. Check how the avatars look, and feel free to adjust the styling as desired. The limit is your own imagination!

Wrap Up

And that’s it! You should now have gravatars enabled on your blog, and they should be styled just enough to fit into your theme.

But what if you don’t want gravatars as small as 80 pixels square? Or what if 80 pixels is far too huge? Maybe you feel the default image is, well, ugly. Stay tuned!

Update

I dropped the ball on the “most basic code” bit above; I left out a very necessary piece of code which caused the code I did post, if used, to only show the default avatar. My bad, and my apologies.

Rather than [code]<?php echo get_avatar(); ?>[/code] you will want to use this instead: [code]<?php echo get_avatar($comment); ?>[/code]

Again, sorry!

5 thoughts on “Tweaking Your Blog: Adding Avatars”

  1. Excellent post! Answered a few more question, like what if you want to change the picture.
    You don’t mention it above (unless I missed it, or got the instructions wrong), but are you supposed to follow that Gravatar link on the Discussion page to create the image?
    I did everything, but no Gravatar shows up on my site. So I’m trying on your site. Does it take time for them to propagate or anything like that?
    I pasted the get_avatar code where you showed me ; then I tried it right above the comment_text line, but still no picture.
    Can you tell where I messed up?

  2. TA DAAAA !!

    It works on your site!!!!

    OK, I’m almost there. I’m going to work on it.

    Are you self-taught or did you take a course to learn all this?

    I just noticed the CommentLuv thing. That must be a plugin. It’s quite cool. Another item for the list.

    Latest from christine: EMPOWERED MEANS OVER MYSELF

  3. christine: Looks like you have it just fine on your site according to my instructions… Problem was, my instructions were wrong; take a look at the “Update” portion at the end of the above post. Once you swap out that bit of code for the proper code, avatars should start working on your site.

    Also, yeah, I am pretty much self-taught. What I know about Web design and programming I know only because I’ve picked it up trying to solve problems for my own sites. I’d love to have the time & money for actual, formal training for various things, but that probably won’t happen — nor is it that big a deal.

  4. I have my avatar of sizes 80×80 and 125×125. When I upload either to gravatar.com, it shows an expanded image and then asks me to crop the same – it just does not work. Any idea what I am doing wrong?

  5. Satish Talim: You’re not doing anything wrong. When it lets you crop, if you select the whole image, your gravatar will look great at 80 (or 125) pixels square, whichever you use, but on sites which make use of larger gravatar images, your image will appear pixelated. It’s best to choose an image of at least 512 pixels square from which to crop, that way your gravatar looks great no matter what image size sites use.

Leave a Comment

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

Use your Gravatar-enabled email address while commenting to automatically enhance your comment with some of Gravatar's open profile data.

Comments must be made in accordance with the comment policy. This site uses Akismet to reduce spam; learn how your comment data is processed.

You may use Markdown to format your comments; additionally, these HTML tags and attributes may be used: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This site uses Akismet to reduce spam. Learn how your comment data is processed.

the Rick Beckman archive
Scroll to Top