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”.
<?php
/**
* Add Custom Avatar Field
* @author Bill Erickson
* @link http://www.billerickson.net/wordpress-custom-avatar/
*
* @param object $user
*/
function be_custom_avatar_field( $user ) { ?>
<h3>Custom Avatar</h3>
<table>
<tr>
<th><label for="be_custom_avatar">Custom Avatar URL:</label></th>
<td>
<input type="text" name="be_custom_avatar" id="be_custom_avatar" value="<?php echo esc_url_raw( get_the_author_meta( 'be_custom_avatar', $user->ID ) ); ?>" /><br />
<span>Type in the URL of the image you'd like to use as your avatar. This will override your default Gravatar, or show up if you don't have a Gravatar. <br /><strong>Image should be 70x70 pixels.</strong></span>
</td>
</tr>
</table>
<?php
}
add_action( 'show_user_profile', 'be_custom_avatar_field' );
add_action( 'edit_user_profile', 'be_custom_avatar_field' );
/**
* Save Custom Avatar Field
* @author Bill Erickson
* @link http://www.billerickson.net/wordpress-custom-avatar/
*
* @param int $user_id
*/
function be_save_custom_avatar_field( $user_id ) {
if ( current_user_can( 'edit_user', $user_id ) ) {
update_usermeta( $user_id, 'be_custom_avatar', esc_url_raw( $_POST['be_custom_avatar'] ) );
}
}
add_action( 'personal_options_update', 'be_save_custom_avatar_field' );
add_action( 'edit_user_profile_update', 'be_save_custom_avatar_field' );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.
<?php
/**
* Use Custom Avatar if Provided
* @author Bill Erickson
* @link http://www.billerickson.net/wordpress-custom-avatar/
*
*/
function be_gravatar_filter($avatar, $id_or_email, $size, $default, $alt) {
// If provided an email and it doesn't exist as WP user, return avatar since there can't be a custom avatar
$email = is_object( $id_or_email ) ? $id_or_email->comment_author_email : $id_or_email;
if( is_email( $email ) && ! email_exists( $email ) )
return $avatar;
$custom_avatar = get_the_author_meta('be_custom_avatar');
if ($custom_avatar)
$return = '<img src="'.$custom_avatar.'" width="'.$size.'" height="'.$size.'" alt="'.$alt.'" />';
elseif ($avatar)
$return = $avatar;
else
$return = '<img src="'.$default.'" width="'.$size.'" height="'.$size.'" alt="'.$alt.'" />';
return $return;
}
add_filter('get_avatar', 'be_gravatar_filter', 10, 5);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.
Mikkel says
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.
Joaco says
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?
Bill Erickson says
I’m not sure how to implement that, but you might dig into BuddyPress because I believe that’s a built-in feature there.
Jim Bob says
Use “WP User Frontend” plugin
vrajesh says
Please Check : https://vrajeshdave.wordpress.com/2015/06/05/set-avatar-of-user-front-side-wordpress/
Jim Bob says
thanks a lot for the code!
Jim Bob says
any idea why the avatars show up on all pages except like “home, catagory, tag” page
Bill Erickson says
I’d have to see the code you’re using
Jim Ramsbotham says
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 [email protected]. As long as you can log into the email, you can associate an image with it through Gravatar.
Nathaniel N says
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/
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
James says
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
Bill Erickson says
Usernames and gravatars should be clickable if the user provides a Website URL in the comment field.
Mark says
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!
Tom Busillo says
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?
Mark says
We too are experiencing this issue. Have been ignoring it but would be great to have a fix.
Bill Erickson says
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.
Mark says
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
Bill Erickson says
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.
Mark says
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!