Check If A User Or Author Has Avatar In WordPress And Set User Image With First Letter As Default

Sometimes we do not want WordPress to display the default avatar. There isn’t a WP core function to check that. So we will create one. We will also learn how to add the first letters of the user’s first name and last name as a fallback avatar picture using JavaScript.

Steps to achieve the goal:

There are two things we need to check, If the user has uploaded the gravatar from:
1. WP Dashboard (using wp-user-avatar plugin), or
2. Gravatar site.

If any of the above conditions is true, the user has valid gravatar,
and the function will return true.

1. For Scenario 1: Upload from WP Dashboard:
We check if the query args are present or not.

2. For Scenario 2: Upload on Gravatar site:
When constructing the URL, use the parameter d=404.
This will cause Gravatar to return a 404 error rather than an image if the user hasn’t set a picture.

Create Custom has_avatar function

Let’s create a function and add it in functions.php

/**
 * Checks to see if the specified user id has a uploaded the image via wp_admin.
 *
 * @return bool  Whether or not the user has a gravatar
 */
function is_uploaded_via_wp_admin( $gravatar_url ) {

   $parsed_url   = wp_parse_url( $gravatar_url );

   $query_args = ! empty( $parsed_url['query'] ) ? $parsed_url['query'] : '';

   // If query args is empty means, user has uploaded gravatar.
   return empty( $query_args );

}

Let’s print_r($parsed_url) and see the difference in the URL, when an avatar is uploaded using plugin, and when it’s not.

Avatar uploaded from admin:

Avatar not uploaded:

Notice there is a query key available when an avatar is not uploaded.

Now let’s create another has_gravatar() function which in turn calls the is_uploaded_via_wp_admin() function.

function has_gravatar( $user_email ) {

   $gravatar_url = get_avatar_url( $user_email );
// 1. Check if uploaded from WP Dashboard.
   if ( is_uploaded_via_wp_admin( $gravatar_url ) ) {
      return true;
   }
   // 2. Check if uploaded from gravatar site by adding 404 in the url query param 
   $gravatar_url = sprintf( '%s&d=404', $gravatar_url );

   // Make a request to $gravatar_url and get the header
   $headers = @get_headers( $gravatar_url );

   // If request status is 200, which means user has uploaded the avatar on gravatar ste
   return preg_match( "|200|", $headers[0] );
}

Logic: When constructing the URL, we add the parameter d=404. This causes gravatar to return a 404 error status rather than an image with 200 status if the user hasn’t set a picture.

Notice when the user has uploaded the gravatar on the gravatar site, the status is 200 vs when it’s not it’s 404

Gravatar uploaded

Gravatar not uploaded

Using has_avatar()

Now you can use this function to conditionally render the gravatar. In author.php archive page.

$author_email = get_the_author_meta( 'user_email' );
$has_avatar = has_gravatar( $author_email );
$avatar = get_avatar( $author_email, 251, '', '', ['class' => 'w-251px h-251px object-cover rounded-full'] );
<?php
   if ( !empty( $has_avatar ) ) {
      echo wp_kses_post($avatar);
   } else {
      printf(
            '<span id="author-firstname" class="hidden">%1$s</span><span id="author-lastname" class="hidden">%2$s</span><div id="author-profile-img" class="w-251px h-251px object-cover rounded-full bg-brand-yellow relative"><span class="text-6xl font-lato-bold tracking-0.5px text-white inset-center"></span></div>',
         esc_html( get_the_author_meta( 'first_name', $author_id ) ),
         esc_html( get_the_author_meta( 'last_name', $author_id ) )
      );
   }
?>

You can also add JavaScript to show the initial two letters from JS if the author's gravatar is not present like so:

( function( $ ) {
   class Author {
      constructor() {
         this.authorProfileImgContainer = $( '#author-profile-img span' );
         this.authorFirstNameText = $( '#author-firstname' ).text();
         this.authorLastNameText = $( '#author-lastname' ).text();
         
         this.init();
      }
      
      init() {
         if ( ! this.authorProfileImgContainer.length ) {
            return null;
         }
         
         let initials = this.authorFirstNameText.charAt( 0 ) + this.authorLastNameText.charAt( 0 );
         initials = initials ? initials : 'A';
         
         // Set the text.
         this.authorProfileImgContainer.text( initials );
      }
      
   }
   
   new Author();
} )( jQuery );

Display the initials of the author Emma Watson i.e ES, when gravatar is not present.

That’s all folks!