Beginner's Guide for WordPress / Start your WordPress Blog in minutes

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.

How to display Gravatar from user 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.

An example of a Gravatar on a WordPress website

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 default Gravatar in the WordPress comment section

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.

Adding Gravatars to a WordPress website using a code snippet

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.

Adding Gravatars to your WordPress website using WPCode

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.’

Adding custom code to WordPress using WPCode

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.’

Adding a Gravatar code snippet to WordPress using WPCode

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.

Activating custom code on a WordPress blog or website

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.

How to show Gravatars in any location on your WordPress 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.

Creating a shortcode using PHP code

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.

Adding a Gravatar to WordPress using a code snippet plugin

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.

Pro Tip: If you don’t see the option for Customize under Appearance, you can follow our guide on how to access the missing theme customizer in WordPress.

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

Adding code using the WordPress Customizer

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

With that done, simply click on ‘Publish.’

Customizing Gravatars using the WordPress Customizer

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

9 CommentsLeave a Reply

  1. How to display a default avatar if the user hasn’t created account on gravatar or has’t choosen gravatar profile?

    Hoping for some help!

  2. wondering if i can replace the ‘gravatar.com/avatar/’ image with myown
    ‘…my domain…/images/avatar.jpg’

    i have a tried a simple replace, but it doesn’t seem to work. any suggestions?

  3. Hi! Is there a way to use instead of gravatar, to use facebook avatar for my members including a shortcode?!

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.