How to Display User Avatars in WordPress Theme Templates

WordPress’s get_avatar() function is the standard way to display user profile photos. When WP User Avatar or Simple Local Avatars is active, get_avatar() automatically returns the locally uploaded photo instead of Gravatar. Here is how to use it in theme templates.

Basic get_avatar() Usage

<?php
// Display current post author's avatar at 64px
echo get_avatar( get_the_author_meta( 'ID' ), 64 );

// Display a specific user's avatar
echo get_avatar( $user_id, 48 );

// Display a commenter's avatar in comment loop
echo get_avatar( $comment, 40 );

// Display current logged-in user's avatar
$current_user = wp_get_current_user();
echo get_avatar( $current_user->ID, 32 );
?>

The first parameter accepts a user ID, user object, email address, or comment object. The second parameter is the size in pixels (square).

get_avatar() with All Parameters

<?php
echo get_avatar(
    $user_id,         // User ID, email, or comment object
    96,               // Size in pixels
    '',               // Default image URL (empty = WordPress default)
    'Author photo',   // Alt text
    array(
        'class'         => 'author-avatar rounded',
        'loading'       => 'lazy',
        'extra_attr'    => 'itemprop="image"',
    )
);
?>

Adding Custom CSS Classes to Avatars

Use the fifth parameter array to add CSS classes. You can also filter the output globally:

// Add a class to all avatars sitewide
add_filter( 'get_avatar', function( $avatar ) {
    return str_replace( 'class="avatar', 'class="avatar wpw-avatar', $avatar );
} );

// Or more reliably, add class via the $args parameter
echo get_avatar( $user_id, 60, '', '', array( 'class' => 'my-custom-class' ) );

Checking if a User Has a Local Avatar

To show different content based on whether a user has uploaded a local avatar:

<?php
$local_avatar = get_user_meta( $user_id, 'simple_local_avatar', true ); // Simple Local Avatars
$wp_avatar    = get_user_meta( $user_id, 'wp_user_avatar', true );      // WP User Avatar

if ( $local_avatar || $wp_avatar ) {
    // User has a local avatar
    echo get_avatar( $user_id, 80 );
} else {
    // Show a default placeholder instead of Gravatar
    echo '<img src="' . get_template_directory_uri() . '/images/default-avatar.svg" 
              width="80" height="80" alt="Profile photo" class="avatar">';
}
?>

Displaying Avatars in Custom Loops

In a custom WP_Query loop, you may need to reset post data to get the correct author context. Always call wp_reset_postdata() after custom queries. To display an avatar inside a custom loop:

<?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
    <article>
        <?php
        $author_id = get_the_author_meta( 'ID' );
        echo get_avatar( $author_id, 40, '', get_the_author(), array( 'class' => 'post-author-avatar' ) );
        ?>
        <h2><?php the_title(); ?></h2>
    </article>
<?php endwhile; wp_reset_postdata(); ?>

CSS for Round Avatars

/* Standard round avatar */
img.avatar {
    border-radius: 50%;
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: inline-block;
    vertical-align: middle;
}

/* Avatar with border */
.author-bio img.avatar {
    border: 3px solid #f0f0f0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

For custom user profile displays, avatar-based navigation, and membership site profile systems, a WordPress developer can build a polished user experience around WordPress’s avatar system.