How to Retrieve Your Gravatar Image URL

Having a profile picture also known as “avatar image” is pretty essential online. We upload our best profile picture on websites and social sites for legitimacy, credibility and for people to better recognize our online presence.

WordPress has its own service to deliver user profile pictures, and it is called Gravatar. We can also incorporate this into our own customized themes. This post will walk you through a couple of approaches on how you can retrieve the profile image from Gravatar.

Using Gravatar

Let’s start from the basics. WordPress has a special integrated function, get_avatar, which allows us to retrieve the gravatar image. This function requires two parameters: the user ID or email, and the size of the image to display. Here is an example.

$user_id = get_the_author_meta('ID');
echo get_avatar($user_id, 80);

If you prefer using a user email, fill the get_the_author_meta() function with user_email:

$user_id = get_the_author_meta('user_email');
echo get_avatar($user_id, 80);

Both examples will output the same result: a user avatar image with the size of 80px. In my case, I will see my picture.

Yet, the problem that I once encounter with this function is that the function generates the whole image; a full <img> tag. Inspect the code source, and you should find it as follows:

This makes things a little bit tricky for us, for example, to insert additional classes or an ID into the <img>.

Alternatively, we can retrieve only the image URL, instead of the <img> element in full. Once we got the URL, we can add it to the <img> with the custom classes or ID added.

How To Retrieve The Image URL

First, we will need to create a new PHP function in functions.php of the WordPress theme you are using. Let’s name the function as follows:

function get_avatar_img_url {
	
}

Retrieving the Gravatar image requires the user email; make sure that the email has been registered in Gravatar in order to see the output. Call the author user email, like so.

function get_avatar_img_url {
	$user_email = get_the_author_meta( 'user_email' );	
}

The Gravatar image URL is specified with http://gravatar.com/avatar/ and followed by md5 hash (encoded value) of the email address. To return the email addrress into an “md5 hash” value, we can use the PHP built-in function, md5(). Hence we set out the Gravatar image URL this way:

function get_avatar_img_url {
	$user_email = get_the_author_meta( 'user_email' );	
	$url = 'http://gravatar.com/avatar/' . md5( $user_email );
}

Next we need to include a couple of required parameters into the URL which are the image size and the default fallback image if the image is not registered in Gravatar. To do so, we will use a WordPress function called add_query_arg.

function get_avatar_img_url() {
	$user_email = get_the_author_meta( 'user_email' );

	$url = 'http://gravatar.com/avatar/' . md5( $user_email );
	$url = add_query_arg( array(
		's' => 80,
		'd' => 'mm',
	), $url );
	return esc_url_raw( $url );
}

This add_query_arg function will add parameters at the end of the URL. In our case, it will output ?s=80&d=mm which sets the image size to 80pixels and sets the default avatar to mm (Mystery Man).

Now just use the PHP echo to output the URL within the <img> element, like so:

$avatar_url = get_avatar_img_url();
echo '<img src=" ' . $avatar_url . ' ">';