Add a custom gravatar

A Gravatar is a super-useful tool that lets you create an avatar (picture) and associate it with your email address. With a gravatar, every time you comment on a blog — yours or someone else’s — that avatar will appear next to your comment, like this:

gravatar-example

This is also a great way to carry your brand across the web. Don’t have one? Go get one. I’ll wait.

But what if you have visitors leaving comments on your blog who don’t have a Gravatar set up? WordPress gives you a few default options that you can use, but I find them a little cheesy for my tastes. Instead, let’s add a default image that matches your site’s design or your brand.

Step One: Your Gravatar Image

Let’s create your image. For the most part, Gravatars are usually 90px x 90px, so that’s a good guideline to start with, although you can go a smidge bigger if you want. Just make sure you keep your image square so that it resizes without getting distorted.

Open your photo editor of choice. I use Photoshop, but there are other more affordable options on the market. If you can find it at a discount, Photoshop Elements would be a great investment, otherwise, try one of the free services like Pixlr that lets you create your own images. Make sure that, if you have the option, you’re saving this file for the web, and that you save it as gravatar.png. Aim for an image that matches your logo or header as well as one that will shrink well but still keep your design visible.

For this blog, I created an image that was part of my logo:

gravatar

Step Two: Put your Gravatar on the web

Upload your image to the web. The preferred method would be to put it in your active theme folder (I keep a folder called images or img for all my images, you may need to take a look at your theme folder to see how images are handled in your theme.) If that’s a little more in-depth than you’d like, you can upload the image to your media library. In this case, copy the URL that is generated for where this image now lives on the web.

Step Three: Open functions.php

Open functions.php in your theme folder. There are a few ways to do this. If you’re making any changes to your theme files, I strongly recommend creating a child theme. This keeps all of your customizations in a separate theme folder, so that if your theme ever gets updated, you won’t lose your changes. You can access your theme files either from Appearance > Editor or by accessing your site via FTP. I strongly recommend going with FTP, because you can back up the file you’re changing and re-upload it in case anything goes wrong.

A few caveats about using your dashboard:

  1. Be sure to back up any files you plan to change so you can easily revert back if something goes wrong.
  2. Some themes break if there’s an error in your PHP in the functions.php file. This will give you the white screen of death and you won’t be able to access your site. If this happens, you will need to FTP in and replace the file you changed with the old version of the file.
  3. It’s not as scary as it sounds, but better safe than sorry. <g>.

Step Four: Add your code

Before the last PHP close tag ?> (or, if there isn’t one, at the very bottom of your functions.php file), add this code:

add_filter( 'avatar_defaults', 'cd_custom_gravatar' );

function cd_custom_gravatar ($avatar_defaults) {
    $myavatar = get_template_directory_uri() . '/img/gravatar.png';
    $avatar_defaults[$myavatar] = __( 'Custom Gravatar', 'YOUR TEXT DOMAIN' );
    return $avatar_defaults;
}

A few notes about this line:

$myavatar = get_template_directory_uri() . '/img/gravatar.png';

get_template_directory_uri() refers to the URL of the active theme on your site. If you are using a child theme, this code will point to the parent theme, not your child theme images folder. To point to the correct theme, replace it with this code:

$myavatar = get_stylesheet_directory_uri() . '/img/gravatar.png';

Also note that this depends on your gravatar.png file living in a folder called img. If your images folder is called something else, replace img with your folder name.

If you uploaded gravatar.png to your media library, replace that line with this code:

$myavatar = 'URL OF YOUR IMAGE';

Also, be sure to replace YOUR TEXT DOMAIN with your theme’s text domain (if you have one) to allow for your text to be translatable.

Step Five: Turn it on

If the code worked, we can now go to Settings > Discussion from our WordPress dashboard. Scroll all the way to the bottom and you should see your new Gravatar at the bottom of the list of default Avatars:

Discussion Settings Default Avatar options

Choose your Custom Gravatar and Save your changes.

Step Six: See it in action

Go to a post with comments on your site, and refresh the page. You should now see your new Gravatar for all your Gravatar-less commenters.

Save

Save

Laurie M. Rauch

Heya! I'm Laurie M. Rauch and I play with code. I run Code Diva, where I specialize in valid, semantic HTML5 and CSS3 and WordPress Development and Coaching. Whether you're a design agency who needs a developer or a blogger or small business who needs help getting their site up and running, I can help. I'm available for freelance work, and I'd love to hear from you.

Get in on the good stuff

Sign up for my newslettter and get access to extra tutorials and resources.

Leave your thoughts

We love to hear your thoughts. All comments must follow our comment policy, so please practice considerate commenting etiquette and play nice.