How to display a gravatar using user email in WordPress Posts and Pages.

Gravatars can be used anywhere on a WordPress site which requires you to display a user profile. This article shows you how to display Gravatar for a user using their email address.

Adding a gravatar hovercard on WordPress 

To add a gravatar hovercard using email, follow the steps below: 

1. Log in to your WordPress site with an administrator account.
2. On the Dashboard in the left sidebar, click Appearance, and then click Theme Editor:

   

   You will not be able to roll back to your earlier Theme configuration after any edits. It is recommended to save the Theme file before proceeding with the edits.

3. On the Theme Editor , select the Theme you want to edit from the dropdown:
   

   

4. The files for this selected theme is listed on the right column under Theme Files. Click on the file named “functions.php”:
   

   

5. Insert the following code to the end of functions.php file. The function below is a modified version of the wpbeginner_display_avatar function. The function below creates a shortcode. The shortcode can be used with an email to display the gravatar of the user according to the email address:
   

   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');

6. To display the gravatar on the page or post use the following shortcode:

   [wpb_gravatar] -- display a gravatar of a current user
   
   [wpb_gravatar wpb_user_email="[email protected]"] -- display a gravatar for the email address.
   

   

7. The gravatars are displayed as icons on the page or post. In this example, both user profiles do not have an image in the gravatar account. Therefore a default icon is displayed on the page. Hover over the icon to view the gravatar card: