How to Display Gravatar from User Email in WordPress

Do you want to display website visitor’s Gravatar from their email in WordPress?

Gravatar is a web service that connects a user’s email address with their online avatar / picture. WordPress automatically displays Gravatars in the comments, but you may want to add them to other areas of your website as well.

In this article, we’ll show you how to display a Gravatar from your user’s email in WordPress.

What is Gravatar and Why Display it?

Gravatar stands for Globally Recognized Avatar, and it is a web service run by Automattic, the company behind WordPress.com.

It lets you create a simple user profile and automatically display verified avatar images with the user’s email address.

Every WordPress website comes with built in support for Gravatars and will automatically show the user’s Gravatar next to each comment and sometimes the author bio.

If the user doesn’t have a Gravatar account, then the default Gravatar image will display.

However, you may want more control over where your user Gravatars will display. For example, you can add it above your post content, to your about page, in your sidebar, and more.

With that said, let’s look at how you can display the Gravatar from a user email in WordPress.

Display Gravatar from User Email by Adding Code to WordPress

First, we’ll show you how to display user Gravatars in your WordPress templates by adding a simple function.

This requires adding code to your WordPress files. If you haven’t done this before, then we recommend that you backup your WordPress site and check out our beginner’s guide to pasting snippets from the web into WordPress.

You can add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    // Get User Email Address
    $getuseremail = $current_user->user_email;
    // Convert email into md5 hash and set image size to 32 px
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
} 

This code snippet creates a simple function that lets you add your Gravatar anywhere in your existing WordPress theme template files.

Next, you need to find the correct template file to add the code. To learn more, see our WordPress template hierarchy cheat sheet to help find the right theme template file for your needs.

Then, you can add the following code snippet:

<?php wpbeginner_display_gravatar(); ?>

This code snippet simply adds a display Gravatar function to your posts, pages, or wherever you’d like.

Here’s what it looks like with the code snippet added to the blog post meta section.

Display Gravatar from User Email by Creating a WordPress Shortcode

Another way to display the user’s Gravatar is by creating your own shortcode.

This is useful if you have the email address of a user and want to display their gravatar on your site, but they aren’t a registered user.

It can also be used to display select Gravatars in your post, page, and widget areas of your site.

You need to add the following code snippet to your functions.php file, in a site-specific plugin, or by using a code snippets plugin.

function wpb_display_gravatar($atts) { 
extract( shortcode_atts( array(
        'wpb_user_email' => '',
    ), $atts ) );
if ($wpb_user_email == '') { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
} else { 
        $getuseremail = $wpb_user_email;
}
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
 
    echo '<img src="' . $usergravatar . '">';
} 
 
add_shortcode('wpb_gravatar', 'wpb_display_gravatar');

This code snippet modifies the first code snippet and creates a shortcode you can easily add to any page, post, or widget area.

It also lets you specify a single user’s email address. This lets you add a user’s email to the shortcode and display the Gravatar for that email address, instead of the current user.

Simply add the following shortcode to display the Gravatar for the current user.

[wpb_gravatar]

If you want to display the Gravatar of a specific user, then use the following shortcode.

[wpb_gravatar wpb_user_email="john.smith@example.com"]

You need to replace the email address in the shortcode with the user’s email you want to display.

Next, you can add custom CSS to your WordPress blog to change how the Gravatar displays.

You can add the following CSS code snippet to your WordPress theme stylesheet.

.wpb_gravatar {
padding: 3px;
margin: 3px;
background:#FFFFFF;
border:2px solid #eee;
}

For more details on adding CSS to WordPress, see our guide on how to easily add custom CSS to your WordPress site.

To add the shortcode to your site, simply open up the page, post, or widget area you want it to display and then click the ‘Plus’ add block icon.

Then, search for ‘Shortcode’ and click on the shortcode block.

After that, paste the shortcode into the block and click the ‘Update’ or ‘Publish’ button to save your changes.

Here’s how it looks when added to the top of a blog post beneath the featured image.

For even more tips on customizing Gravatars on your site, see our guide on how to change the Gravatar image size in WordPress.

We hope this article helped you learn how to display Gravatar from user emails on your WordPress site. You may also want to see our picks on the best business phone services for small businesses and our guide on how to get a free SSL certificate for your WordPress website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.