How to Display Author Avatars within Posts or Pages in WordPress

Home » Snippets » How to Display Author Avatars within Posts or Pages in WordPress
0

Created with:

Visibility: 

public

Creator: WPTurbo Team

Customize with WPTurbo AI
X

Add Snippet To Project

New Project
Add To Existing Project

Are you a blogger or website owner who wants to display the author’s avatar within posts or pages on your WordPress site? Adding the author’s avatar not only adds a personal touch to your content, but it also helps readers connect with the author on a more personal level. In this article, we will show you how to easily display the author’s avatar within posts or pages on your WordPress website, using both manual coding and plugins.

					function wpturbo_display_author_avatar($avatar, $id_or_email, $size, $default, $alt ) {
    // Check if the ID or email parameter is passed
    if ( ! $id_or_email ) {
        return $avatar;
    }
    
    // Get the user ID
    if ( is_numeric( $id_or_email ) ) {
        $user_id = $id_or_email;
    } elseif ( is_string( $id_or_email ) && is_email( $id_or_email ) ) {
        $user = get_user_by( 'email', $id_or_email );
        if ( $user ) {
            $user_id = $user->ID;
        } else {
            return $avatar;
        }
    } else {
        return $avatar;
    }
    
    // Get the author avatar
    $author_avatar = get_avatar_url( $user_id, array( 'size' => $size ) );
    
    // Check if the avatar is available
    if ( $author_avatar ) {
        $avatar = "<img src='" . esc_url( $author_avatar ) . "' class='author-avatar' width='" . esc_attr( $size ) . "' height='" . esc_attr( $size ) . "' alt='" . esc_attr( $alt ) . "' />";
    }
    
    return $avatar;
}
add_filter( 'get_avatar', 'wpturbo_display_author_avatar', 10, 5 );
				

The code snippet provided is a function called wpturbo_display_author_avatar() which is used to display the author avatar within posts or pages in WordPress.

To start, the function takes in several parameters: $avatar, $id_or_email, $size, $default, and $alt. These parameters allow us to customize the behavior and appearance of the avatar.

The first step within the function is to check if the $id_or_email parameter is passed. If it is not, the function returns the initial avatar image as is.

Next, the function determines the user ID based on the $id_or_email parameter. If the parameter is a numeric value, it is directly assigned as the user ID. If the parameter is an email address, the function uses the get_user_by() function to retrieve the user object based on the email. If a user object is found, the user ID is extracted. If no user is found, the initial avatar image is returned.

After obtaining the user ID, the function calls the get_avatar_url() function to retrieve the URL of the user’s avatar, passing in the desired size specified in the $size parameter. If the avatar URL is available, it is assigned to the $author_avatar variable.

The next step checks if the $author_avatar variable is not empty, meaning the avatar is available. If it is available, the function constructs an <img> HTML tag using the esc_url(), esc_attr(), and esc_url() functions to ensure proper sanitization of the URL and attributes. The constructed HTML tag is then assigned to the $avatar variable.

Finally, the function returns the modified $avatar variable, which can now contain the URL of the author’s avatar or the initial avatar image if no avatar is available.

To enable this custom avatar display, the function is hooked into the get_avatar filter using the add_filter() function. The 10 parameter specifies the priority of the filter, which determines when it is applied in relation to other filters. The 5 parameter specifies the number of arguments the filter function accepts, which matches the number of parameters the wpturbo_display_author_avatar() function accepts.

Register an account to save your snippets or go Pro to get more features.