How to Make a Custom Default Avatar for Comments with No Gravatar

Applies to Version(s): Thesis 1

Why Add a Custom Avatar?

Let’s look at why a custom default avatar can be a good idea. First, the default “if no Gravatar is associated with the email address of the commenting party” options are better than nothing (ignoring that “nothing” is, in fact, an option) but they’re also not branded to you — and for professionals, most are either too busy or too cartoonish.

Default List of WP Comment Avatars

“Blank” and “Mystery Man” default avatars are the traditional fall-backs for a professional presence. The “Gravatar Logo” is great for branding — but not for your brand. The “Identicon” avatar is geometrically busy.

“Wavatar” and “MonsterID” are great if you run a site with an audience such as children, and “Retro” is there if your content is intended to promote vintage video games.

Also, the final four of these default avatars are “generated” — meaning there’s a pack of them, not only the one icon you see in your WordPress dashboard. Those who read your comments list may wish to skim or skip comments made by “unknown” parties, and with generated avatars, this represents a small but real “slow-down” for some of your readers.

Finally, the default WordPress avatars are not hosted on your server. Remote calls to another server can be slow, or may not respond at all. This is not common with Gravatars, but it’s possible — and either way, local image calls can be made and returned more quickly than remote image calls.

In other words, a single “your choice” custom default avatar you create is a visual and performance boost, as can be seen in this interpreting and translation site’s comments.

How to Add a Custom Default Avatar for Comments

Step one is to create your image. We’re showing the top end for size, 96×96 pixels, but yours can be smaller if you prefer.

Sample Avatar 96 x 96 Pixels

Once created and optimized with a graphics program, the next step is to upload your custom default avatar to your host server. The recommendation, and assumption of the code below, is to use an FTP client to place your image in the /custom/images folder with a name that is lowercase and contains no spaces.

For the example, our custom avatar default image will be named “new-avatar.png” — if you choose a different file name or image type such as a GIF or JPG, be sure to reflect those modifications to your avatar file path in the custom PHP function.

Here’s the function that will make your new custom default avatar available. It doesn’t take much code to create a new avatar for selection in your WordPress administration panels — basically we’re checking to make sure the function is not already declared (doubtful in this case, but a good practice), then we filter-out default values to set our own image.

Add this to custom_functions.php

if(!function_exists('custom_avatar')){
function custom_avatar($avatar_defaults){
$new_default_icon = get_bloginfo('template_directory') . '/custom/images/new-avatar.png';
$avatar_defaults[$new_default_icon] = 'My Custom Avatar';
return $avatar_defaults;
	}
add_filter('avatar_defaults','custom_avatar');
}

List of WordPress Avatars Including Custom New Avatar

Provided all went well to this point, your new custom default comment avatar will be visible as a name and image in your WordPress interface under “Settings” and then “Discussion” — to enable it, select the radio button and Save Changes.

Even if you used a 96 x 96 pixel avatar, as in this example, viewed in the WordPress Admin interface, your image will be sized to 32 x 32 pixels for reasons of screen real estate.

When a comment is left by a visitor — a comment that does not have a Gravatar image associated with the email address — your new default avatar image will appear at the size established in the Thesis Design Options.

Once you select your new default avatar, comments without an associated Gravatar will get your new avatar as shown below:

New Custom Default WordPress Comments Avatar in Context

Notes on Choosing a Size for Your Custom Avatar

Within the interface, your Thesis Design Options allow comment Avatars to be displayed anywhere from 1px to 96px. Due to that flexibility, you could create a default custom avatar at 96×96 pixels — but if you’ve already established an avatar size in your comments, and have no intention of changing this value, it’s recommended you work with that avatar size.

The main reason is one of bandwidth conservation — of file size. All else equal, the smaller the physical dimensions of an image, the less bandwidth that image consumes.

If you’re not sure what your current comment avatar size is, go to your WordPress Admin panel, then Thesis Design Options, then to Comment Options, look under Comments, and find Comment Meta. This field should contain a number, and that number — avatars are square — represents both height and width of your current avatar or Gravatar images displayed in your comments area on the live site.

For purposes of this default Gravatar tutorial, we’re working with a 96×96 image — in part because it’s easier to see. Your own custom “Gravatar” default, however, might be 40×40 or 66×66 — or any other number between 1 and 96.

Different Sizes of Possible Custom Default Avatars

As an obvious aside, a 10×10 “avatar” is not recommended — 40 pixels square is about as small an avatar as can be seen properly.

Remember, while you’re replacing the “no Gravatar associated” default, many of your comments will have a Gravatar associated with the email address. If you pick an avatar size like 20×20, there’s little chance of figuring out whose face (or pet kitten) is in a non-default Gravatar.