Bolster Your WordPress Blog’s Branding – Replace the Default Avatar

Happy Face on Mystery Man GravatarToday I’m going to help you reinforce your blog’s visual identity by showing how to swap out WordPress’s default comment avatar with your own custom avatar.

Why is this important?

By the time readers have scrolled down to the comments section, the most important part of your blog’s visual identity—the header—is no longer visible.

Any chance you can get to etch your blog’s identity into your readers’ minds is a good one.

Assuming you already have a square image ready to go, you can add your own default avatar in just a few minutes. First, though, here’s a little background.

Default WordPress avatar

When readers comment on your blog, WordPress uses the Gravatar platform to display a picture of the commenter next to his or her comment. If a commenter doesn’t have a Gravatar, or their email address isn’t associated with one, then WordPress displays the Mystery Man Gravatar as the default avatar.

Mystery Man Avatar

Not very exciting, is it?

Go to Settings -> Discussion and at the bottom of the page you’ll see some other options for default avatars, but they don’t have a lot of wow factor either.

WordPress Default Avatar Choices

Hopefully you have something you can use to create your own avatar. You can use your blog’s logo, or part of its banner shrunken down. Even some simple geometric shapes that use your blog’s color scheme will work.

What you’re going to do once you’ve created your new avatar is:

  1. Figure out the right size for your avatar.
  2. Upload it to your theme’s images folder.
  3. Add a custom function to your theme’s functions.php file.

1. Avatar dimensions

First, you want to make sure that your custom avatar has the same height and width that your blog’s theme expects. The simplest way to do this is go to the comments section in one of your posts, right-click (control-click for Mac users) on any of the avatars, and save the image.

OS X Chrome Web Image Context Menu

Determine its length and width (it should be square) by selecting the resize or similar function in your favorite image editing application. Alternatively, find the image you just saved in Explorer (Windows) or Finder (Mac), and right-click or control-click the file and select Properties (Windows) or Get Info (Mac).

Create and save your avatar using these same dimensions, and save it as a GIF, JPEG, or PNG file.

2. Upload avatar

Using an FTP program or your host’s web-based file manager, upload the avatar into your WordPress theme’s images folder. Need help finding that folder?

Go to the folder where WordPress is installed. Then go to the wp-content/themes/ folder and look for a folder named after your theme. That’s your theme folder. Inside it there should be an images folder, where you should put your avatar image.

For example, I use Genesis’s Prose theme, so I put my avatar in wp-content/themes/prose/images/

WordPress Theme Images Folder

3. Add custom function

Next, we’ll add a function to your theme’s functions.php file that will add the custom avatar to list of default avatars in the Discussion Settings page. Go to Appearance -> Editor and click on the link that says “Theme Functions (functions.php)” at the right. Paste this code at the end of your theme’s functions.php file.

// Add custom avatar
add_filter( 'avatar_defaults', 'custom_avatar' );

function custom_avatar ($avatar_defaults) {
$myavatar = get_stylesheet_directory_uri() . '/images/custom-avatar.png';
$avatar_defaults[$myavatar] = "Branded Avatar";
return $avatar_defaults;
} 

Note: If you’re using a StudioPress theme that has a Custom Code option in the Genesis menu, like Prose 1.5, you’re not supposed to edit the functions.php file. Instead, click on the Custom Code link, and paste the code in the Custom Functions section.

Genesis Menu -> Custom Code

This function expects the avatar you uploaded is named custom-avatar.png. If your file has a different name, either change the file’s name to custom-avatar.png, or edit the name of the file in the code on line 5 where it says '/images/custom-avatar.png';.

Line 6 controls the label you see next to your avatar in the Discussion settings. Feel free to edit the text between the double quotes as you like. Spaces between words are okay here.

Thanks to Bourne Creative Blog for the code snippet.

Why this code is better

If you’ve read other blogs that cover this topic, some of them have a slightly different function. Instead of using get_stylesheet_directory_uri() in line 5, they use get_bloginfo('template_directory').

The problem with get_bloginfo('template_directory') is that if you using a child theme for a WordPress theme framework like Thesis or Genesis, the get_bloginfo statement will look for your avatar file in the parent theme’s folder (e.g. the Genesis folder), not the child theme’s folder. In that case, a broken image icon will appear instead of your avatar.

Using get_stylesheet_directory_uri() will cover you in either case.

Custom Avatar as an Option in WordPress Discussion Settings

Now you can go back to the Discussion Settings and select your new avatar from the bottom of the list.

Take advantage of every opportunity

Granted, few if any of your legitimate (non-spam) comments will use the default avatar. You will get some, though, so why not take advantage of those opportunities to spice up your blog’s visual appeal and increase its brand awareness?

Oh, and if you want to use the happy face avatar at the top for your custom avatar, feel free.

Thanks for reading.

References
WordPress Codex – Function Reference/get stylesheet directory uri
WordPress Code – Function Reference/get bloginfo

Article by Bryan Kerr

I love breaking down the techie side of blogging into easy-to-understand tutorials. That's mostly what you'll find here on The Hobby Blogger.

Comments

  1. Avatars are a source of trust and reader confidence in a real person (except in my case, oh well). It’s really worth installing a good one. Yours could be nicer, Bryan. I’m thinking a pretty girl. I kid, you have a great one!

  2. You can also use a service called Gravatar that does this same thing without the need for code.

    • But you can’t use it for your blog’s default avatar, which is used in cases when the commenter doesn’t have their own gravatar.

  3. Bryan – great post! I’ll have to tweak my site and add it! Right now I’m using the basic robot one.

    • Bryan Kerr says:

      Thanks Jason. I just happened to see your comment in my Gmail box, and it prompted me to login here for the first time in over a month (busy times at work). Glad to see my blog is still being read. In fact, I was surprised to see that my traffic has actually increased during my time away.

  4. Hi Bryan,
    sorry to interrupt the flow of good comments but I am not able to add my default avatar. I have followed your suggestion but as result I have this url for the src of my img tag> http://1.gravatar.com/avatar/36598694fda9b579e887781bc48b73c2?s=32&d=%24mioavatar&r=G&forcedefault=1

    Can you help me with that?

    • Hi Andrea. To where did you upload the graphics file for your default avatar? Can you see the graphic if you browse directly to that file?

      • Hi Bryan,

        I have followed your instructions and I have uploaded the avatar in the image folder of my active theme. I am trying to load my image but I think is going to bit a little hard since I have a permalink structure and I can’t access directly from the browser but, with the help of FireBug I’ve been able to see my image as a background.

        But the problem is that WP or Gravatar will change the URL with the one I’ve posted above and I am unable to change this behavior…

        I’ve tried to look over the internet and in the WordPress.org forum but it seems that no one have found a solution yet…

        Thanks for your help Bryan!

        • Bryan Kerr says:

          Are you using WordPress’s default comments, or are you using a plugin for your comments?

          • I am having the same issue as Andrea Barghigiani.

            The custom image option is available in Settings > Discussion, but the image is not being found. When I inspect the new custom image, I see that the return is this.

            I am not using a comments plugin.

            Any ideas? Thanks.

          • img alt=”" src=”http://1.gravatar.com/avatar/bf6e8ef427e1413f6f05b000491d082d?s=32&d=http%3A%2F%2Flocalhost%3A8888%2Fwp-content%2Fthemes%2Fstandard-child-theme-kit%2Fimages%2Fife-gravatar.jpg%3Fs%3D32&r=G&forcedefault=1″ class=”avatar avatar-32 photo” height=”32″ width=”32″

          • Bryan Kerr says:

            Seth, it looks like your theme is looking for your custom avatar on localhost. See where it says,

            http%3A%2F%2Flocalhost%3A8888%2Fwp-

            in the code you posted above? Might just have to make sure your theme is pointing to the image on middle8media.com instead of localhost.

        • Bryan Kerr says:

          Andrea, it appears that you’re using JetPack as your comments engine. Is that correct? If so, that might be the issue here.

          • Yes I am using JetPack but the test site where I start to edit the Gravatar info was local and without this plugin…

            I have read others have the same problem and the strange thing is that, even on a live website without JetPack, the URL generated by Gravatar is completely wrong and do not let me set a default one…

            I heard something has changed in Gravatar on October 2012 but I didn’t have the time to follow their instruction.

            BTW thanks for the answer man!

          • Bryan Kerr says:

            Sorry, Andrea. I’m stumped. I tried the Catch Box theme on my local development and my live server, and couldn’t get it to work either. Bummer.

  5. Hey Bryan, thanks man, this tweak is awesome!
    In 2 minutes I was able to add my branded default avatar and now I see my logo all over the place! woohoo :)

    Just a quick note: some themes don’t have an images folder (to my surprise “Twenty Twelve”, which comes default with the new wp doesn’t), all you have to do is create one. Don’t forget to name it images, with an “s”, and not image as I’ve seen it referred to in the comments.

    Thanks again

  6. This plugin is very useful for me since most people who comment in my blog don’t have gravatar and the mistery man don’t look good. Thanks for the tutorial.

  7. Debora Humphries says:

    Bryan,

    Thank you so much! I have been tackling the same problem with the image not showing up and after using your code in my Studiopress child theme and making sure the image was 80px x 80px, it works like a charm.

    I sincerely appreciate you for taking the time to make the code snippet available. I hope you have an awesome and blessed day. :)

  8. Hi Bryan, I am not sure if I uploaded my image into the correct folder. I am using Prose, and I put it into that folder but first I went to: Web Root (public_html/www). When I tried to access FTP I was asked to set up a password and directed to a third party program. Should I select a third party program to open FTP, and is this the only way to upload the image? Thank you.

    • Bryan Kerr says:

      Sorry for replying so late Angel. Put the image in the

      wp-content/themes/prose/images

      folder. Who’s your hosting provider? If you’re with HostGator, you should be able to upload using the cPanel web interface.

      BTW, nice site!

      • Thanks for your response, Bryan. I am using Bluehost, and I’m still not sure where to put the image. Does the folder have the same name as the HostGator folder?

        • This is the folder that I put the image in: public_html/wp-content/themes/prose/images

          Also, I am currently using an avatar plugin, but I would like to get rid of the plugin.

          • Bryan Kerr says:

            That’s the correct folder Angel. Sorry that I had the wrong folder name in my initial reply to you. It’s a pretty good bet that your avatar plugin is indeed getting in the way of your custom avatar. It might be enough to just deactivate it. Otherwise, uninstall the plugin altogether.

  9. Thanks so much for your post. This code is the only one that would pull up the correct file in my WP directory for a new blog I am working on. Thanks again!!

  10. oops i didnt know this..thanks alot :D :D

  11. Revisiting this post as I needed to replace the default gr avatar to something a bit more useful! Thanks for the very helpful (and simple to do!) article.

    • Bryan Kerr says:

      Sure thing, Jason. Wow, you’re site looks great with the new theme! Stellar job.

      • Brian, I have a strange thing happening with the default avatar. It displays using the default thumbnail size instead of the actual size of the image in the comment section. It doesn’t occur when I’m using just the default ones though. Any thoughts?

        And thanks! I still have a lot to get cleaned up – and I completely totally messed up the whole responsive part of the theme unfortunately. I might have to hire someone to help me with the layout to get it fixed :(

  12. Thanks a bunch for this amazingly written tutorial Bryan!
    I’m new to coding WordPress themes and I initially thought that if I just added the picture into the images folder, WordPress would love me enough to do all the dirty work itself, guess it hasn’t gotten to the point where it loves me that much yet, hahaa.

    • Bryan Kerr says:

      You’re welcome, Anthony. WordPress can be a bit overwhelming at first, but it’s getting better. Thanks for reading.

      • Would it be too much for me to ask for a tutorial to be written?
        I’m having trouble using oEmbed on my custom theme. I have done all the necessary steps to get it working (not using tags, putting link on a separate line, etc.) but to no avail, I cannot get the video/audio player to pop up, just the link that I pasted into the post editor.

        I have no idea if I’m missing an on/off switch, or what I’m doing wrong.

        I know you’re busy, and I don’t want to be a burden, but if you do find some time to explain it to me, I would be very grateful.

        Thanks in advance.

        • Bryan Kerr says:

          Hi Anthony. I’ll try, but I haven’t used oEmbed yet, and I am really busy with work and family. I’ll see what I can do.

  13. Hi Bryan,

    I was able to implement this in an online test environment but cannot seem to get it to work via xampp and localhost. Are there any variables for that? The local install is 3.6 with no plugins and a child theme of twenty-eleven. My child functions.php file looks like this:

    I’ve tried changing the “get_stylesheet_directory_uri()” to”get_stylesheet_directory()”, but that didn’t seem to do anything. I am getting a 404 not found error on the image even though its in the proper image directory.

    Thanks,
    Dave

    • Bryan Kerr says:

      I have the same issue, DC. Seems to have something to do with the way WordPress tries to access the Gravatar server. I’m stumped.

  14. Thank you so much! I have been tackling the same problem with the image not showing up and after using your code in my Studiopress child theme and making sure the image was 80px x 80px, it works like a charm..

Speak Your Mind

*