User Profile Picture

User Profile Picture plugin banner

User Profile Picture is a free and easy to use WordPress plugin, which allows you to set a custom profile image for a user using the standard WordPress media upload tool. It also comes with a Gutenberg block for displaying the user information and profile picture in the front-end.

Download User Profile Picture for FREE

Installing the User Profile Picture plugin

Just head to your WordPress dashboard, click on Plugins -> Add New and search for User Profile Picture. Click install, and then activate.

User Profile Picture plugin installation

Then visit your profile or any of your user’s profile and click to edit, upload and save a new profile image.

Setting a New Profile Image

To set a new profile image simply head to your profile or any of your user’s profile and find the section for Profile Image.

Upload a User Profile Image

Click the image and it’ll launch a modal where you can select a profile image for inclusion.

Note: Users must have the ability to upload images (typically author role or greater) in order to set their profile picture. You can use the Profile Builder plugin and its Roles Editor module to allow other roles (e.g. subscribers) the ability to upload images.

Here’s a video below demonstrating how to set a profile image:

Removing a Profile Image

Removing the Profile Image

There are two ways to remove a profile image:

  • Click the Trash icon on the image to remove it.
  • Click on the image and select Remove Profile Image.

Displaying the Profile Image

Use the Template Function

There’s a built-in template function that will retrieve and display the profile image. It accepts the same arguments as get_the_post_thumbnail. Here’s an example of it in use.

Here’s a video below showcasing the Gutenberg block.

Using an Author Box Template Function

This is for advanced users, but you can mimic the Gutenberg author box using a template function called mt_author_box. Details and an example are below.

Author Box Defaults

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

$defaults = array(
    'theme'                           => 'regular', /* can be 'regular', 'compact', 'profile', or 'tabbed' */
    'profileAvatarShape'              => 'square', /* Can be 'square' or 'rounded' */
    'padding'                         => 10,
    'border'                          => 1,
    'borderRounded'                   => 5,
    'borderColor'                     => '#000000',
    'profileBackgroundColor'          => '#FFFFFF',
    'profileTextColor'                => '#000000',
    'showName'                        => true,
    'showTitle'                       => false,
    'fontSize'                        => 18,
    'profileName'                     => $user->data->display_name,
    'profileTitle'                    => '',
    'avatarSize'                      => 150,
    'profileImgURL'                   => get_avatar_url( $user_id, isset( $attributes['avatarSize'] ) ? $attributes['avatarSize'] : 150 ),
    'headerFontSize'                  => 24,
    'showDescription'                 => true,
    'showSocialMedia'                 => true,
    'profileContent'                  => get_user_meta( $user_id, 'description', true ),
    'profileFontSize'                 => 18,
    'showViewPosts'                   => true,
    'profileURL'                      => get_author_posts_url( $user_id ),
    'website'                         => '', /* Needs to be a URl */
    'showWebsite'                     => false,
    'showPostsWidth'                  => '100%', /* ignored if website is not empty and true */
    'profileViewPostsBackgroundColor' => '#cf6d38',
    'profileViewPostsTextColor'       => '#FFFFFF',
    'buttonFontSize'                  => 16,
    'profileWebsiteBackgroundColor'   => '#333333',
    'profileWebsiteTextColor'         => '#FFFFFF',
    'profileLinkColor'                => '#000000',
    'showSocialMedia'                 => false,
    'socialWordPress'                 => '',
    'socialFacebook'                  => '',
    'socialTwitter'                   => '',
    'socialInstagram'                 => '',
    'socialPinterest'                 => '',
    'socialLinkedIn'                  => '',
    'socialYouTube'                   => '',
    'socialGitHub'                    => '',
    'socialMediaOptions'              => 'brand', /* can be brand or custom */
    'socialMediaColors'               => '#000000', /* Only applicable if socialMediaOptions is custom */
    'profileCompactAlignment'         => 'center', /* Can be left, center, or right */
    /* Tabbed Attributes */
    'tabbedAuthorProfileTitle'        => '',
    'tabbedAuthorSubHeading'          => '',
    'tabbedAuthorProfile'             => __( 'Author', 'metronet-profile-picture' ),
    'tabbedAuthorLatestPosts'         => __( 'Latest Posts', 'metronet-profile-picture' ),
    'tabbedAuthorProfileHeading'      => __( 'Author Information', 'metronet-profile-picture' ),
    'profileLatestPostsOptionsValue'  => 'white', /* can be none, white, light, black, magenta, blue, green */
    'profileTabColor'                 => '#333333',
    'profileTabPostsColor'            => '#333333',
    'profileTabHeadlineColor'         => '#333333',
    'profileTabHeadlineTextColor'     => '#FFFFFF',
    'profileTabTextColor'             => '#FFFFFF',
    'profileTabPostsTextColor'        => '#FFFFFF',
 
);

Here’s an example usage:

1
2
3
4
5
6
7
8
9
10

mt_author_box( $post->post_author, array(
    'theme'              => 'tabbed',
    'profileAvatarShape' => 'round',
    'showWebsite'        => true,
    'website'            => 'https://www.ronalfy.com',
    'showSocialMedia'    => true,
    'socialMediaOptions' => 'brand',
    'socialWordPress'    => 'https://profiles.wordpress.org/ronalfy',
    'socialFacebook'     => 'https://facebook.com/mindefusement',
) );

REST API Endpoints

There are three REST API endpoints for you to use.

Setting a Profile Picture For Yourself

1
2
3
4
5
6

$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/me' );
$request->set_param( 'media_id', 3754 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
 
// Will return JSON of profile image sizes

Setting a Profile Picture For Others

1
2
3
4
5

$request = new WP_REST_Request( 'POST', '/mpp/v2/profile-image/change' );
$request->set_param( 'media_id', 1290 ); 
$request->set_param( 'user_id', 5 ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );

Getting a User Profile Image

1
2
3
4
5

$request = new WP_REST_Request( 'GET', '/wp/v2/users/15' );
$response = rest_do_request( $request );
$avatars = $response->data[ 'mpp_avatar' ];
 
// Will return JSON of profile image sizes

Questions or Comments?

Leave a comment below or open up an issue on our GitHub.

Recommended Plugins

Profile Builder

Profile Builder is an all in one user registration and management plugin. You can create beautiful front-end registration and profile forms with custom fields for your users. The roles editor module lets you edit existing user roles and capabilities, as well as create custom roles. You can download the free version here.

Social Networks for User Profile Picture

The Social Networks for User Profile Picture plugin allows users to add, edit and display their social networks. It’s an add-on for User Profile Picture.

Paid Member Subscriptions

Paid Member Subscriptions makes it really easy to build a membership site. You can create subscription plans, restrict content and accept payments from your users.