By default WordPress uses their own 3rd party website named “Gravatar” for user photos (avatars). However, there are many drawbacks to using a 3rd party service for user avatars. In this article, I will show you how to set a media library image as the user avatar in WordPress.
For the purpose of this tutorial, I will focus primarily on user avatars (not commenters) and explain why you may want to move away from Gravatar and how to locally host your own user avatars.
Feel free to skip to the code snippet.
Where are User Avatars Displayed?
There are a few places that display your user avatar, either by default in WordPress or commonly in themes & plugins. Below are some of the locations user avatars are shown:
- The WordPress Admin Toolbar (core)
- The users dashboard (core)
- The avatar Gutenberg block (core)
- The post author bio (theme dependent)
- The post meta byline (theme dependent)
- Membership plugins
- Account pages (such as the WooCommerce account page)
- A grid displaying your site authors (such as the Users Grid element in the Total Theme)
Why You Shouldn’t use Gravatar for User Avatars
The main reason to not use Gravatar is because it adds an extra hit to a 3rd party website to get and display the icon. This can slow down page loading and decrease Google page speed scores. This is primarily a concern on the frontend when displaying user avatars on your live site. Of course, speeding up your backend is always a plus!
But, there are other reasons you may want to use locally hosted avatars from your WordPress media library instead of Gravatar.
These are the reasons to NOT use Gravatar for your user avatars:
- Slower site loading times.
- Lower page speed scores.
- Potentially render blocking if the Gravatar service is down.
- Less control over your avatar format and resolution.
- Harder to set and/or update your avatar.
How to Use a Media Library Image as a User Avatar
It’s very easy to use your own images for user avatars in WordPress because of the handy filters available. There are few ways you can go about modifying your avatar output, but I personally recommend using the pre_get_avatar_data hook so you can return your custom URL before WordPress makes any requests to Gravatar.com.
Here is an example snippet showing how to modify a user’s avatar with one from the media library:
/**
* Return a media library image for a user's avatar.
*
* @see https://www.wpexplorer.com/how-to-set-media-image-for-user-avatar-wordpress/
*/
add_filter( 'pre_get_avatar_data', static function( $args, $id_or_email ) {
// Process the user identifier.
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user = get_user_by( 'id', absint( $id_or_email ) );
} elseif ( $id_or_email instanceof WP_User ) {
$user = $id_or_email;
} elseif ( $id_or_email instanceof WP_Post ) {
$user = get_user_by( 'id', (int) $id_or_email->post_author );
} elseif ( $id_or_email instanceof WP_Comment && is_avatar_comment_type( get_comment_type( $id_or_email ) ) ) {
if ( is_numeric( $id_or_email->user_id ) ) {
$user = get_user_by( 'id', (int) $id_or_email->user_id );
} elseif( is_email( $id_or_email->user_id ) ) {
$user = get_user_by( 'email', $id_or_email->user_id );
}
}
// Change the avatar for the user with an ID of 1 (generally the main site admin).
if ( $user && 1 === (int) $user->ID ) {
// IMPORTANT - Make sure to change 'YOUR_ATTACHMENT_ID' with the image ID
// You want to use for this user's avatar.
$args['url'] = wp_get_attachment_url( 'YOUR_ATTACHMENT_ID' );
}
// Return avatar args.
return $args;
}, 10, 2 );The only thing a bit lengthy about this code (as you may have noticed) is we need to parse the value of the $id_or_email variable to get the user. This is because WordPress allows pulling avatar data either by ID or email and there isn’t any global function that can be used to parse the data.
In this specific snippet we have only modified the avatar URL for the user with the id of 1. Also notice how I’ve used ‘YOUR_ATTACHMENT_ID’ for the value of the image we want to grab from the media library. Make sure you modify this value to the actual image Id.
How to find a User ID?
To find the user ID to use in your code snippet, simply log into your WordPress site and go to the Users dashboard. Click on the user you want to change the avatar for to go to the user’s edit screen. Now you can find the ID in the URL which will be formatted like this: your-site.com/wp-admin/user-edit.php?user_id={ID}
How to find an image ID?
To find the ID of any image stored on your WordPress site, go to the Media library and edit the image you want to use. You will find the ID in the URL as the URL will be formatted like this: your-site.com/wp-admin/post.php?post={ID}
How to Add a Setting to the User Edit Screen to Set Custom Avatar Images
The snippet I shared above is great for making single edits for specific users. This is fine for a small site where you are only changing one or a few user avatars. On a site with more users you may want to add a field in the WP admin so you can define your user’s avatars without having to mess with the code.
The following snippet adds a new field named “Custom Avatar” to the user edit screen in WordPress and will modify the avatar when the field is set. This field will allow you to enter the ID of an image in your media library or the full URL to any image you wish to use as the user’s avatar.
/**
* Custom User Avatars.
*
* @see https://www.wpexplorer.com/how-to-set-media-image-for-user-avatar-wordpress/
*/
class WPExplorer_Custom_User_Avatars {
/**
* Constructor.
*/
public function __construct() {
add_filter( 'user_contactmethods', [ $this, 'filter_user_contactmethods' ] );
add_filter( 'pre_get_avatar_data', [ $this, 'filter_pre_get_avatar_data' ], 10, 2 );
}
/**
* Hooks into the "user_contactmethods" filter.
*/
public function filter_user_contactmethods( $methods ) {
$methods['custom_avatar'] = esc_html__( 'Custom Avatar', 'text_domain' );
return $methods;
}
/**
* Hooks into the "pre_get_avatar_data" filter.
*/
public function filter_pre_get_avatar_data( $args, $id_or_email ) {
// Process the user identifier.
$user = false;
if ( is_numeric( $id_or_email ) ) {
$user = get_user_by( 'id', absint( $id_or_email ) );
} elseif ( $id_or_email instanceof WP_User ) {
$user = $id_or_email;
} elseif ( $id_or_email instanceof WP_Post ) {
$user = get_user_by( 'id', (int) $id_or_email->post_author );
} elseif ( $id_or_email instanceof WP_Comment && is_avatar_comment_type( get_comment_type( $id_or_email ) ) ) {
if ( is_numeric( $id_or_email->user_id ) ) {
$user = get_user_by( 'id', (int) $id_or_email->user_id );
} elseif( is_email( $id_or_email->user_id ) ) {
$user = get_user_by( 'email', $id_or_email->user_id );
}
}
// Check for and assign custom user avatars.
if ( $user && $custom
- Advertisement -
