Create a Custom Avatar for User with Meta Box Plugin

In WordPress, each user account on the website has his/her own avatar, but to set this avatar, users must use a tool called Gravatar. This work sometimes costs time and effort. However, you can completely change it by creating a field that allows users to upload photos right on the website, then set that image as an avatar. Thus, user’s manipulation becomes somewhat simpler. In this case, the avatar that the user has set himself/herself (not by Gravatar) is temporarily called a custom avatar.

Table of Contents hide

1. Preparation before Creating a Custom Avatar with Meta Box Plugin
2. Step 1: Create a Field to Upload Avatar Picture
3. Step 2: Get Data from the Custom Avatar Field to Set as Profile Picture
4. Final words

Meta Box plugin can help you do that in a pretty simple way. Let's read this tutorial to see how to do it in detail.

Preparation before Creating a Custom Avatar with Meta Box Plugin

To create a custom avatar, you need to use Meta Box plugin and some extensions of it like:

MB User Meta or MB User Profile: they allow you to create fields for user profile. It’s okay to use one of them.
Meta Box Builder: it helps you to create fields on an easy-to-use UI without code. If you don't want to spend money, try this free Online Generator tool. But if you can code yourself, you can skip these tools.

Step 1: Create a Field to Upload Avatar Picture

First, create a Single Image field by going to Meta Box > Custom Fields > Add New. Then, click Add Field button, find and select a field type named Single Image to create your needed field.

Create a Field to Upload Avatar Picture

The ID of the Single Image field will be used in the next steps so I change it to ‘custom_avatar’ for ease of remembering.

Next, move to the Settings tab and don’t forget to choose Users in the Show for section.

choose Users in the Show for section.

Here, if you haven’t installed MB User Meta or MB User Profile, you can’t see the Users option to select. Therefore, make sure that you already installed and activated one of the two plugins.

Finally, click Save Changes to save the created custom field.

As a result, when you go to the Users section to edit any account, you will see a Custom Avatar field appear for you to post your photos.

a Custom Avatar field appear

Step 2: Get Data from the Custom Avatar Field to Set as Profile Picture

Now, you can try uploading an image to the Custom Avatar field created above. But your Profile Picture can’t still automatically receive the image from the Custom Avatar field yet.

Get Data from the Custom Avatar Field to Set as Profile Picture

You need to put this code to the functions.php file:

add_filter( 'get_avatar_url', 'mbua_get_avatar_url', 10, 3 );

function mbua_get_avatar_url( $url, $id_or_email, $args ) {
    if ( is_numeric( $id_or_email ) ) {
        $user_id = $id_or_email;
    } elseif ( is_string( $id_or_email ) && ( $user = get_user_by( 'email', $id_or_email ) ) ) {
        $user_id = $user->ID;
    } elseif ( is_object( $id_or_email ) && ! empty( $id_or_email->user_id ) ) {
        $user_id = (int) $id_or_email->user_id;
    }

    if ( empty( $user_id ) ) {
        return $url;
    }

    $custom_avatar = rwmb_meta( 'custom_avatar', [ 'object_type' => 'user' ], $user_id );

    if ( ! $custom_avatar ) {
        return $url;
    }

    $url = $custom_avatar['full_url'];
    
    return $url;
}

Here, I use the function rwmb_meta to get the avatar from the field with the ID ‘custom_avatar’.

After adding the code, you will see that the Profile Picture was changed to the similar image that you upload in the Custom Avatar field.

upload in the Custom Avatar field.

Final words

So you have finished creating custom avatars for the user. From now on, your users will no longer need to create or change avatars from Gravatar, but can do it directly on your website, which is quite convenient, right? If you find this article useful to you, leave a comment and don’t forget to follow my instructions in the upcoming articles.