Tweaking Your Blog: Customizing 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.

Okay, now that you’ve got your blog hooked up with avatars, making use of WordPress’ built in gravatars feature… Now what?

So your avatars are 96 pixels square… but what if that’s way too big (or small)?

And what about users who don’t have a Gravatar account yet… Do they have to be content receiving a bland default image? Isn’t the point of avatars to make users visually uniquely identifiable?

Size Doesn’t Matter

Unless you have already tweaked it on your own, the avatars code in your comments.php file should still look like this: [code]<?php echo get_avatar($comment); ?>[/code]

And that code outputs avatars which are 96 pixels square. But let’s be honest, you want more choice than that. Luckily for you, that choice exists, and it’s as easy as dropping a number into our [code]get_avatar()[/code] call.

  • Want 16 pixel avatars (the same size as favicon / bookmark icons)?
    [code]<?php echo get_avatar($comment, 16); ?>[/code]
  • Want 32 pixel avatars?
    [code]<?php echo get_avatar($comment, 32); ?>[/code]
  • Want 64 pixel avatars?
    [code]<?php echo get_avatar($comment, 64); ?>[/code]
  • Want 80 pixel avatars?
    [code]<?php echo get_avatar($comment, 80); ?>[/code]
  • Want 512 pixel avatars (this is the max size)?
    [code]<?php echo get_avatar($comment, 512); ?>[/code]

Easy, no? I’m not sure why you would ever want to use avatars that are 512 pixels square, but the option is there. I prefer anything from 80 to 100 myself, but the layout and feel of your site may require something much smaller or even a bit bigger. Don’t be afraid to experiment or get feedback from your readers regarding what they like best. Remember, you have the luxury of reading all of your content and comments via the admin panel; your readers are the ones who will be on the site reading, and they will be face to face with the avatars much more than you are.

Daring Defaults…

…because in all honesty, this image gets just a tiny bit old:

default gravatar

The good folks at Gravatar & WordPress, however, have provided us a super easy way to switch that image out for something else entirely.

Again, we’ll be tweaking the same bit of avatar code, and we’ll be assuming a default size of 96 pixels; however, this time, we’ll be adding something: [code]<?php echo get_avatar($comment, 96, $default); ?>[/code]. It is that third added parameter, [code]$default[/code], that we’ll be playing with.

First, I’ll show you how to add any image you want as the default avatar (best results will be achieved with a square image). Like the gray silhouette image above, your chosen default image will be shown for anyone who does not have a gravatar linked to the email address they are using while commenting.

[code]<?php echo get_avatar($comment, 96, 'http://address_to_image/'); ?>[/code]

Yes, it really is that simple. Say, for instance, you want all of your default-avatar commentators to be reminded that, even though they do not have a gravatar, they can still live long and prosper, use this code:

[code]<?php echo get_avatar($comment, 96, ''); ?>[/code]

Suppose, though, that you don’t want the majority of your commentators to have the same avatar; you want avatars — even though they are default — to be uniquely theirs. Well, have it your way with one of the following three options (again, assuming a 96 pixel size, which you are free to adjust as needed):

  • Wavatars:
    [code]<?php echo get_avatar($comment, 96, ‘wavatar’); ?>[/code]
  • MonsterIDs:
    [code]<?php echo get_avatar($comment, 96, ‘monsterid’); ?>[/code]
  • Identicons:
    [code]<?php echo get_avatar($comment, 96, ‘identicon’); ?>[/code]

The beauty of this method is that the wavatar, monsterID, or identicon which is generated for a user is generated from the unique hash of their email address. In other words, no matter how many sites they comment on which are using, for example, identicon avatars, their avatar will look the same!

And because collisions (or duplicates) of hashes are so rare, no two users should ever have the same default avatar show up if you choose to use one of those three methods.

Wrap Up

I have heard talk that in the next major version of WordPress (2.6), the option to select wavatars, monsterIDs, or identicons may be built in to the Settings -> Discussion panel of the admin area; if that is the case, perhaps we may also some day see an option for selecting the size as well. If those things come to pass, you’re welcome to ignore this post as it will no longer be relevant.

Still, until then, I hope this has given you some ideas of how easily you can spice up the avatars of your site, setting them apart from other sites which may be using strictly vanilla avatars.

I didn’t even touch style sheets, either, which can be used to add borders and all sorts of other effects to your avatars. Once you get into styling, though, the possibilities are quite limitless, and I simply invite you to dive into the wealth of information about styling images available via Google!

2 thoughts on “Tweaking Your Blog: Customizing Avatars”

  1. Brilliant post, Rick. You are good at making sense of this so it just seems easy.

    So if I were to use a picture from my hard drive.. I create the picture, upload it into the theme Images folder, and use the code right above Spock,
    calling it as

    Would I put wp-content or publichtml or anything in there too?
    Is that what you’re doing in your Spock example, calling it from the site’s images folder?

  2. christine: Whichever file address lets you view it in your browser, that’s the one you’ll use. Your site’s theme’s image folder is located here, so yes, it includes the wp-content/ folder.

    The Spock image, actually, was being called from another site entirely, a message board I run called The Fellowship Hall; Spock is one of the several dozen avatars users can choose to use there.

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