How to Display Gravatar from User Email in WordPress

Do you want to display Gravatar from the user email in WordPress?

Gravatar is a web service that connects a user’s email address to an online avatar. WordPress automatically shows visitors’ Gravatars in the comment section, but you may want to add them to other areas of your website too.

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

What is Gravatar and Why Display it?

Gravatar stands for Globally Recognized Avatar, and it allows people to link a picture to their email address.

If a website supports Gravatar, then it can fetch the person’s picture and show it next to their name. For example, when a user leaves a comment with their email on a WordPress website, WordPress will display that person’s Gravatar next to the comment.

Depending on how your site is set up, WordPress may show Gravatars in other locations, such as the author bio.

If the user doesn’t have a Gravatar account, then WordPress will show one of the default Gravatar images instead.

A comment section that has lots of different Gravatars is much more engaging than the same default image displayed over and over again.

In this way, Gravatars can encourage users to join in the conversion, build a sense of community, and make your pages look more interesting. All of this together can help you get more comments on your WordPress posts.

You may want to change where user Gravatars appear on your WordPress blog or website. For example, you might show the user’s Gravatar in your website’s toolbar or user profile, to provide a more personalized and engaging experience.

With that said, let’s look at how you can display the Gravatar from a user email in WordPress. Simply use the quick links below to jump to the method you prefer.

Method 1. Display Gravatar by Adding Code to Your WordPress Theme

First, you can add a Gravatar to your WordPress theme using code. This is a good choice if you want to show a Gravatar in the same location across your entire site, such as the sidebar or just above the header.

This method shows the Gravatar of the person who is currently logged into your website. This is useful for membership sites, online stores, or any other website where the user has to log into an account.

To add a Gravatar to your theme, you’ll need to paste some code into your theme files. If you haven’t done this before, then check out our beginner’s guide to pasting snippets from the web into WordPress.

The easiest way to add code snippets to your WordPress website is by using WPCode. It is the best code snippet plugin for WordPress that allows you to add PHP, CSS, JavaScript, and more to your website.

First, you’ll need to install and activate the free WPCode plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, go to Code Snippets » Add Snippet in the WordPress dashboard. Now click on the ‘Add New’ button.

This will take you to the ‘Add Snippet’ page.

Here, hover your mouse over ‘Add Your Custom Code (New Snippet)’ and click on the ‘Use Snippet’ button when it appears.

To start, type in a title for the code snippet. This is just for your reference so you can use anything you want.

After that, open the ‘Code Type’ dropdown and select ‘PHP Snippet.’

You can now go ahead and paste the following into the code editor:

function wpbeginner_display_gravatar() { 
    global $current_user;
    get_currentuserinfo();
    $getuseremail = $current_user->user_email;
    $usergravatar = 'http://www.gravatar.com/avatar/' . md5($getuseremail) . '?s=32';
    echo '<img src="' . $usergravatar . '" class="wpb_gravatar">';
	echo $getuseremail;
	
} 

This code creates a simple function that allows you to add a Gravatar anywhere in your WordPress template files.

After pasting the code, scroll to the ‘Insertion’ section and select ‘Auto Insert.’ You’ll also need to open the ‘Location’ dropdown and choose ‘Run Everywhere.’

With that done, scroll to the top of the page and click on the ‘Inactive’ switch so that it shows ‘Active’ instead.

Then, simply click on the ‘Save Snippet’ button.

Now, you can show the user’s Gravatar anywhere on your WordPress website using the following function:

<?php wpbeginner_display_gravatar(); ?>

Simply add this function to the correct template file. For example, if you want to show the user’s Gravatar in your website’s header then you’ll typically need to edit header.php.

However, this can vary depending on your WordPress theme. To help you find the right template file for your needs, take a look at our WordPress template hierarchy cheat sheet.

Pro Tip: If you run a multi-author WordPress blog, then you may want to show the author’s Gravatar instead of the visitor’s. To do this, you’ll need to add the code snippet to the blog post meta section instead.

Method 2. Display Gravatar Using a Custom WordPress Shortcode

You can also add a Gravatar to any page, post, or widget-ready area by creating a custom shortcode. This is a good choice if you want to control exactly where the Gravatars appear on each page, or if you want to show these pictures in different locations across your website.

Just like method 1, this approach will show the current user’s Gravatar. If you prefer, then you can show the Gravatar that’s assigned to a specific email address by making a simple change to the code.

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

The easiest way to create custom shortcodes is by using WPCode. Even better, you don’t have to edit your theme files so this is a much more beginner-friendly method.

If you haven’t already, then you’ll need to install WPCode. You’ll also need to create a new custom code snippet by following the same process described above.

With that done, give the code snippet a name and choose ‘PHP Snippet’ as the code type.

Next, paste the following PHP into the code editor:

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 creates a [wpb_gravatar]shortcode that you can add to any page, post, or widget-ready area.

When you’re ready, scroll to the ‘Insertion’ section and make sure that ‘Auto Insert’ is selected. You’ll also need to open the ‘Location’ dropdown and choose ‘Run Everywhere’ if it isn’t already selected.

Finally, scroll to the top of the screen and click on the ‘Inactive’ toggle so that it shows ‘Active’ instead. You can then click on ‘Save Snippet’ to make your code live.

You can now show the user’s Gravatar on any page, post, or widget-ready area using the following shortcode:

[wpb_gravatar]

For more information on how to place the shortcode, please see our guide on how to add a shortcode in WordPress.

If you want to show the Gravatar of a specific user, then you can simply add their email address to the shortcode:

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

If you’re not happy with how the Gravatar looks then you can style it using custom CSS. For example, you can add the following CSS code snippet to your WordPress theme stylesheet:

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

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

If you prefer, then you can add custom CSS using the WordPress Customizer. In the dashboard, simply go to Appearance » Customize.

In the left-hand menu, click on ‘Additional CSS.’

You can then paste the custom CSS into the small code editor.

With that done, simply click on ‘Publish.’

Now if you visit your website, you’ll see your Gravatar with the new style.

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 social media plugins and our guide on how to create a contact form in WordPress.

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.