Tweaking Your Blog: Adding Avatars

Relevant WordPress ver­sions: 2.5+. These instruc­tions are invalid for WordPress ver­sions less than 2.5 as built-​​in avatar func­tion­al­ity did not yet exist.

Avatars are a very neat fea­ture of mes­sage boards; with­out even the slight­est bit of look­ing for (much less, read­ing) a user’s name next to a post, the avatar announces who made the post. It’s no secret that an image is more eas­ily rec­og­niz­able 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 sym­bols (which, in a way, are com­pa­nies’ avatars) are pow­er­ful recog­ni­tion tools. The Golden Arches wouldn’t be hurt too much by not hav­ing “McDonald’s” writ­ten beneath them, nor does the tri-​​circle sil­hou­ette of Mickey Mouse leave any doubt as to what com­pany is responsible.

But mes­sage boards aren’t the only places that users are leav­ing their marks online these days. We live in the era of the blog, and with mil­lions of places online to post com­ments, how can a per­son do so in a man­ner that makes them as eas­ily iden­ti­fi­able to as many peo­ple as pos­si­ble, just as avatars allowed on mes­sage boards?

Gravatars are an answer (among sev­eral) to that; using the Gravatar ser­vice, you can asso­ciate an avatar to an email address, just as you would asso­ciate an avatar with a user­name on a mes­sage board. From that point on, any time you com­ment on a gravatar-​​enabled blog using that email address, your gra­vatar will show up.

And what­ever your gra­vatar may be — whether it is a pic­ture of you, a pic­ture of your cat, or your favorite quote done up in glit­ter — it will start show­ing up all across the Web, as often you comment.

There are two inher­ent beau­ties to gra­vatars as well: If you have posted a lot of com­ments on a site that wasn’t gravatar-​​enabled but they turn it on some­time in the future, your gra­vatar will show up on all your past com­ments auto­mat­i­cally. Likewise, if you ever change which gra­vatar is asso­ci­ated with your email address, that change will auto­mat­i­cally take place across the Web.

You already run a WordPress blog, though, and you’re even savvy enough to be run­ning ver­sion 2.5 or newer. Kudos. And you say you want your com­ments 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 bot­tom to find the “Avatars” settings.
3. You’ll want to select “Enable Avatars” if it isn’t already selected.
4. Choose whichever rat­ing is most appro­pri­ate for your blog. Be aware that if your blog is ever man­u­ally reviewed for a Web fil­ter­ing ser­vice, your blog may be flagged mature on account of R or X rated avatars if they are spot­ted in your comments.
5. Click “Save Changes” at the bot­tom, and breathe a sigh of relief… You’re done!

… Wait… Gravatars still don’t show up in your com­ments? 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 com­ments 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 com­ment loop; it begins with a bit of code that most likely looks like this: [code]<?php fore­ach ($com­ments as $com­ment) { ?>[/​code]
4. Within the com­ment loop, notice two bits of code:
   • [code]<?php comment_​author_​link(); ?>[/code] — echoes the com­ment author’s name, link­ing it to his or her web­site, if one was provided.
   • [code]<?php comment_​text(); ?>[/code] — echoes the con­tent of the com­ment itself.

I point out those two bits of code because know­ing where they fall in the code gives you a gen­eral idea of how the com­ment is laid out. It helps to know the lay­out if we’re going to be insert­ing an image into each com­ment, right?

1. I pre­fer to place the avatars code on a new line just prior to [code]<?php comment_​text(); ?>[/​code], but you are free to exper­i­ment with dif­fer­ent 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 care­ful not to paste that code between any [code]<?php ?>[/​code] tags which may already be present in the code. If you notice errors or lay­out prob­lems (keep­ing in mind, though, we haven’t applied style to the avatars yet), take note of what the error indi­cates and see if relo­cat­ing the avatar code resolves the issue.

Okay, now, after all that, you should finally have a gravatars-​​enabled blog! Go ahead, browse around the var­i­ous com­ments you have received and see who does or doesn’t have a gra­vatar; any­one 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 look­ing at your avatars and they look just fine to you, excellent!

However, if the avatars could use a lit­tle jazz­ing 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 sup­ports it) from the file list.
2. At the bot­tom of that file (or else­where if you are main­tain­ing some level of orga­ni­za­tion within the file), insert the fol­low­ing code:
   • If you want avatars to float to the right of the com­ment: [code]img.avatar { float: right; mar­gin: 0 0 1em 1em; }[/​code]
   • If you want avatars to float to the left of the com­ment: [code]img.avatar { float: left; mar­gin: 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 gra­vatars enabled on your blog, and they should be styled just enough to fit into your theme.

But what if you don’t want gra­vatars as small as 80 pix­els square? Or what if 80 pix­els 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 nec­es­sary 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!