Blog

Sharing WordPress tips and tricks as I find them

Custom Avatars in WordPress

WordPress has built-in support for Gravatars, globally recognized avatars. This means if you go to Gravatar.com 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.

36 Comments

  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 gravatar.com 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 gravatar.com 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.

    • Bill Erickson says:

      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!!

    -Adam

    • Bill Erickson says:

      There’s also a plugin that does the same thing: http://wordpress.org/extend/plugins/user-photo/

      But I like to code it myself, to prevent a client from accidentally disabling it or a new version of the plugin breaking something I’ve built.

      • 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.

        • Bill Erickson says:

          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” :D ~ 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 ????
    Thanks!!

  7. Cor van Noorloos says:

    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

    and
    ‘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;

    • Bill Erickson says:

      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. thanks a lot for the code!

  14. any idea why the avatars show up on all pages except like “home, catagory, tag” page

  15. 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?

    • Bill Erickson says:

      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 Gravatar.com 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.

      • Jim Ramsbotham says:

        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.

        • Bill Erickson says:

          Thanks!

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

  16. Hi your code pointed me in the right way to add Custom avatars to our site, however we had problems with the Comments getting the author avatar.

    Actually your code breaks most calls to get_avatar function in wordpress.
    So I modified it and made into a plugin freely available for wordpress users.

    take a look in my web page
    http://rockdio.org/ayudatech/wordpress-3-4-and-higher-custom-avatars-the-proper-way/

  17. Jenny Beaumont says:

    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!
    -jennyb

  18. 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

  19. 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!

Join the Conversation

If you'd like to include code in your post, please post it to http://gist.github.com and include a link.