Custom Avatars in WordPress

WordPress has built-in support for Gravatars, globally recognized avatars. This means if you go to and associate a picture with your email, any WordPress website you post on can use it.

But some people might not want to use Gravatar. I’m working on a magazine site where some of the authors have created gravatars, but many just want to email their photo to the editor and have her take care of it.

I’ve created a Custom Avatar feature that extends the built-in avatar functions of WordPress. It adds a “Custom Avatar URL” field to the user’s Profile page. If an avatar is provided, it is displayed by the function get_avatar() rather than the gravatar.

The Genesis theme has a great feature called the Author Box. Instead of me having to rebuild it to show my custom avatar, it just works with this solution since I’m extending the built-in avatar functions, not creating new ones.

Adding Custom Avatar Field

We’re going to create two functions: one that displays the field on the profile, and one that updates the field when you click “Update”.

I’ve added a description on the first function to help the users add the correct size photo. Make sure your users upload a square photo (or else it will be squished) and that is at least as large as the largest use in the site. On this project, the Author Box displays the avatar as a 70px square, and on the homepage it’s a 30px square, so I recommend they upload at least 70×70 photo.

Making it Work

We’ll be able to access the custom avatar using get_the_author_meta( 'be_custom_avatar' ). Now let’s set up a filter on get_avatar() that uses the custom avatar, if provided.

This modifies get_avatar() function to perform in the following way:

  • If there’s a custom avatar, use that.
  • If there isn’t a custom avatar, check to see if there’s a gravatar. If there’s a gravatar, use that.
  • If there’s neither, display the default.

Bill Erickson

Bill Erickson is a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk

Reader Interactions


  1. Creating a custom avatar for registered users cuts down some of the HTTP requests but would only really be useful if WordPress was set up so everyone had to register in order to comment, or if there were a lot of regular, registered contributors. If there’s only a few then its arguable that the benefit of using a custom avatar is outweighed by the disadvantage in page loading speeds.

    Using gravatars generates a LOT of HTTP requests for every comment on a post. If I understand your code correctly then on pageload for every post with comments the server loads the page, then sends another request to check for the custom avatar for every comment on that page. If one isn’t found then another HTTP request gets sent to and then if those two conditions are not satisfied there is yet another HTTP request to get the default avatar. If the default avatar hasn’t been set to use the blank avatar within WordPress another HTTP request will be sent out to to grab the mystery man, identicon or whatever has been set as the default. That is a whole heap of HTTP requests and could have significant implications for slowing down pages that contain a lot of comments.

    • Correct, this technique is designed for websites which have many contributors. It is not designed for commenting systems.

      I built this for a magazine site with 20 or so contributors. We’re only displaying gravatars for article authors (comments are done with Disqus).

  2. Dude this is gnarly… I didn’t think this type of thing was possible but it looks like a huge help for me. I run a site driven by user submissions, and it was annoying to tell people they have to register for gravatar if they want their picture to show up along with their article.

    Thanks for sharing!!


      • Ah very cool, I didn’t know about that. I really like how that lets you upload an image, though I’m totally with you on avoiding plugins when possible.

        I’ve noticed one “bug” with the code (or at least an issue with how I’m trying to use it). I show an author box at the very top of my sidebar, then a few widgets down I have an “Authors of the Month” jawn which also includes get_avatar() functions.

        I use get_avatar() functions a total of 4 times within the sidebar… the first avatar is filtered by be_gravatar_filter() and shows the right avatar, but then the other 3 avatars shown are the same as avatar #1.

        So what I’ve done as a temp fix is use a remove_filter() to prevent those last 3 get_avatar() from being filtered, but I’m trying to figure out if there’s a way to reset the filter so it goes through each get_avatar() individually and doesn’t store the first image it finds.

        Do you have any idea what to do about that? If it was a query, I know you could reset_query, but this seems more complicated.

        • The problem is the code I posted looks for the author of the current post/page you’re on – it’s designed with that assumption. You might check to see if $id_or_email is defined (the second variable in the filter) and if so, get THAT author’s avatar. If it isn’t defined, get the avatar for the author of the current page.

          • Ahh that makes sense. Here’s what I ended up doing, just incase anyone else has the same problem:

            I was having issues getting things to work by adding extra “ifs” to your original function, so I just duplicated it and added $id_or_email to the get_the_author_meta() like so:

            function be_gravatar_filter_two($avatar, $id_or_email, $size, $default, $alt) {
            $custom_avatar = get_the_author_meta(‘be_custom_avatar’,$id_or_email);
            if ($custom_avatar) $return = ”;
            elseif ($avatar) $return = $avatar;
            else $return = ”;
            return $return;

            Then I just removed the original filter and applied the second one where I needed it in my template:

            Thanks for the help man!

  3. I guess I am stupid and don’t know a great lot about this. Just where do you put the codes? I believe it might be function.php. I have fresh-ink-magazine. Thanks

  4. Hi, this is exactly what I’m looking for!!! a custom url avatar for subscribers…..
    Does it only work under Genesis theme????
    cuz it doesn’t work on mine 🙁

    or should it be placed in the general functions.php file???
    I tried both the theme functions.php and the general one in wp-includes folder…..
    but either of them worked > in the end but it showed “Fatal error: Call to undefined function add_action() in /home/vul3yji3/public_html/wp-includes/functions.php on line 4486” ……

    Could you please indicate the right place to insert the code for me??? I really need this!!!

    Thank you very much!!

  5. !!!! I succeeded!!! I found the right place~
    It works well now~~~
    Thank you so much!!!!

    I’ll give you a “like” 😀 ~ thumbs up!!!

  6. Hi Bill,
    It works well in one of my wordpress but it doesn’t work in my other 2 sites…. (in ipage & hostmonster…….)

    I successfully added the custom field in profile.php and I can also save the url but the gravatar just stayed as wordpress’s default image …..

    Do you have any idea ????

  7. Hello Bill,

    Would it be possible to disable the gravatar lookup completely and just use your plugin if else the mystery man avatar?

  8. thanks Bill, most useful. exactly what i needed for my current client project.

    a note for others… you may want add a $position to the action. i had WPML installed that also hooked into user page and Bills code was positioned in between fields of WPML. handy to know if user existing plugins that hook into the user profile admin screen.

    i specified 15, but its whatever works in your particular situation
    add_action( ‘show_user_profile’, ‘be_custom_avatar_field’, 15 );

  9. oh, also added some existing wordpress classes to form markup should help it sit better.
    add the ‘form-table’ class to table

    ‘regular-text’ to the input field
    <input type="text" class="regular-text" name="be_custom_avatar" id="be_custom_avatar" value="ID ) ); ?>” />

    again, thanks for this Bill

  10. The be_gravatar_filter function code doesn’t return its return value. And it works for all the commenters above me? Or did the example code change?

    Anyway, the function be_gravatar_filter should end with: return $return;

    • Thanks for catching this. I recently moved all the code from in the blog post to Github and must have not copied it all over. I just updated the code.

  11. Thanks for sharing this one Bill, I’ll be using it as a starting point for a multisite where I need to have non-square avatars for the blog authors.

  12. Bill, there any way to enable users to upload their profile pictures in the author page?…i mean, in the front-end and not in the dashboard?

  13. Let me start out by saying that I am old and slow. But I vaguely recall once upon a time that if I wanted to upload an avatar, I had to go to the extraordinary lengths of generating a 70 x 70 pixel image, and actually uploading the file through a web form. I can recall one time that it took me almost three minutes.

    I am clearly missing something since it now appears that it takes three men and a boy, two plug-ins, many lines of code (to be put where, never specified. . . I have a suggestion but it’s not G-rated) and an imprimatur from the Pope to generate one.

    I can tell WordPress to recognize something call Gravitars (which apparently have an imprimatur from His Holiness) for those poor souls that might want to comment on my blog who do not have their own custom avatar. But it appears that if I have one I’d like to use (which I do) there is no way to simply upload it.

    What am I missing here?

    • In order to prevent people the hassle of uploading avatars to every site they use, WordPress developed Gravatar, or Globally Recognized Avatars.

      You go to and upload an image to be associated with your email address. Then, anywhere you use that email address (in a comment, or if you’re a registered user on a WordPress site, your user’s email address), WordPress will automatically use the avatar related to that email address.

      As a theme developer, we get a handy function called get_avatar(). You give it an email address and the size avatar you want, and it will return that user’s avatar at the appropriate size.

      Now if you really want to allow people to upload an avatar on your site, there’s plenty of plugins that can do it, or you can code it yourself like I’ve done in this post. But I highly recommend taking a second look at Gravatar, since it “just works”. You upload an avatar (as large as you can) once, and every WordPress site you visit will always use that.

      • Thanks.

        I try not to put my e-mail address “out there” unless I absolutely have to–or, as was the case with your Blog, I encounter something of exceptional quality with a look and feel that grabs me. I will, however, take another look at Gravitars.

        You have a great blog going. The quality of your writing is exceptionally good–something I meant to say in my initial post.

        • Thanks!

          You could always use throwaway email addresses for gravatar and other online postings where you don’t want a real email address, like [email protected]. As long as you can log into the email, you can associate an image with it through Gravatar.

  14. Hi!
    Thanks for sharing this, I’ve been interested in a solution for custom avatars for quite some time.

    Question: is this code still valid with the latest version of WordPress? Was noticing that the article dates back a few versions and that a recent comment says something about breakage. Prefer to check in with you before I go mucking about!

    many thanks in advance!

  15. It seems that only my gravatar and user name is clickable. Is this because I am the admin (user role) of my own site? How can I allow other people who comment to also get their user names and gravatars to be clickable? Thanks

  16. Wow, this is awesome! I didn’t know this was possible without a plugin. I prefer not to have to use one to accomplish things if possible and came across your page during my research. Thanks so much for sharing this code. I haven’t found any problems with it on my blog so far, going to be nice to not have to ask contributors to sign up on gravatar.

    Thanks Bill!

  17. Bill, thanks for this. We’re using it on our site, but we’re running into the following problem:

    If a commenter is not a registered user and merely provides their name and email address on the comment form then submits and is approved, we are running into a situation where the author’s custom avatar is showing as the commenter’s avatar.

    Is there a tweak to the ” Use Custom Avatar if Provided” section you can recommend that gets WordPress to use whatever is selected as the default avatar int he dashboard > settings > discussion?

    • I’ve updated the second snippet to fix this.

      You can provide either a user ID or email address to get_avatar(). If it’s an ID, we know that’s a user in WP. If it’s an email, we’re now checking to see if that email exists in the WP users table. If it doesn’t, we return the gravatar without modification.

      • Thank you. Unfortunately after updating the code with the new snippet, I’m now seeing the following error on the page:

        Warning: strlen() expects parameter 1 to be string, object given in /home/public_html/wp-includes/formatting.php on line 2120

        Any ideas?

        Kind Regards

        • Sorry about that. I posted that without testing it. I assumed a variable named $id_or_email would be either an ID or an email address. It looks like it can be those two OR a comment object as well.

          I just updated the snippet one more time. Now it checks to see if it’s an object, and if it does it pulls the comment author’s email from that object. It then does the check to see if this is an email address and an email already in the DB.

          • No worries Bill, appreciate you taking the time to help me out. Just utilized the updated code provided and so far everything looks to be working. Thanks again!

  18. Hey Bill

    Thanks for adding and adjusting the code! It works fine on my end.

    One thing I am missing is having a browse button, so the user can browse to the media library and use a profile image located there.
    Could you add the needed code perhaps below the other snippets so we can add it in?

    Have a great day!

  19. Thank you a lot! That is absolutely stunning and should be part of WordPress anyways. More and more People just don’t want another Accoun (like Gravatar), displaying more Information. This bit of code solved so many problems working with more and more authors.
    Thank you, Jordana

Leave A Reply