Author: Chip Bennett

I recently (h/t: Nacin) came across this tutorial by Nenuno Creative that recommends bypassing WordPress core implementation of Gravatars in order to output custom Gravatars. Below, I present a brief tutorial for a much better way to implement custom Gravatars in a way that doesn’t require bypassing WordPress’ core functionality.

The Nenuno Creative tutorial presents the following “customizations” of Gravatars:

1. Comment Author email address
2. Custom default Gravatar image
3. Custom Gravatar image size

The problem with their tutorial is that, assuming your Theme is using wp_list_comments() to output the comments list (and your Theme is using wp_list_comments() to output the comments list, isn’t it?), you have no easy way to control where and how your custom-built Gravatar is displayed (at least, not without quite a bit of additional custom code) – as evinced by the author’s recommendation:

I would recommend using this in the “comments.php” page, somewhere around “< ? php wp_list_comments(); ? >” or whatever similar you may have in your theme!

Not a terribly helpful implementation suggestion, is it? (And in truth, since wp_list_comments() outputs a Gravatar by default, it’s actually a rather incorrect recommendation.) Fortunately, all of the above can be implemented in a much, much easier way.

First, wp_list_comments() by default outputs a 32x32px Gravatar based on the Comment Author email address. So, all we need to deal with are custom Gravatar size, and custom default Gravatar image.

Custom Gravatar size is as simple as passing the avatar_size argument to wp_list_comments(). The arguments passed to wp_list_comments() are an array, so to output an 80x80px Gravatar, replace the default call:

wp_list_comments();

With this:

wp_list_comments( ‘avatar_size=80’ );

Simple, right?

That just leaves us with defining a custom default Gravatar image. Admittedly, this part is a bit trickier, but still not terribly complicated. We will be using the built-in user-configuration setting for default Gravatar image. By default, the option list includes “Mystery Man”, “blank” (no image), the Gravatar logo, an Identicon, a Wavatar, and a Monster ID:

We will be hooking into this list, using the avatar_defaults filter, in order to add a custom image to this list (h/t: WPEngineer).

Simply add the following to your Theme’s functions.php file:

function mytheme_addgravatar( $avatar_defaults ) {
  $myavatar = get_bloginfo('template_directory') . '/images/avatar.gif';
  $avatar_defaults[$myavatar] = 'My Theme Custom Gravatar';

  return $avatar_defaults;
}
add_filter( 'avatar_defaults', 'mytheme_addgravatar' );

You will need to replace /images/avatar.gif with an appropriate image file, that you have uploaded to your Theme directory.

That’s it! Now, just go to Settings -> Discussion, and you will see your custom image listed in the options for Default Avatar:

Simply select your custom image, and save settings.

Voila! We’ve just implemented everything from the Nenuno Creative tutorial, in a way that uses, rather than bypasses, core WordPress functionality.