user-icon

User Profile Picture

Get User Profile Picture Enhanced

Installation

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

Visit your profile or your user's profile and click to edit and save a new profile image.

Setting a New Profile Image

Add User Profile for WordPress

Simply head to your profile or your user's and find the section for Profile Image.

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

Here's a video below demonstrating how to set a profile image.

Subscribe to our YouTube Channel

Removing a Profile Image

Remove Profile Image

There are two ways:

  1. Click the Trash icon on the image to remove it.
  2. 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.

<?php
/**
 * mt_profile_img
 *
 * Adds a profile image
 *
 * @param $user_id INT - The user ID for the user to retrieve the image for
 * @param $args mixed
    size - string || array (see get_the_post_thumbnail)
    attr - string || array (see get_the_post_thumbnail)
    echo - bool (true or false) - whether to echo the image or return it
 */
 //Assuming $post is in scope
if ( function_exists ( 'mt_profile_img' ) ) {
    $author_id = $post->post_author;
    mt_profile_img( $author_id, 
        array(
            'size' => 'thumbnail',
            'attr' => array( 'alt' => 'Alternative Text' ),
            'echo' => true,
        )
    );
}

Using Gutenberg

User Profile Picture plays well with Gutenberg and you can customize almost every aspect of it including padding, borders, font size, and different themes.

Here's User Profile Picture as a Gutenberg Block.

User Profile Picture Gutenberg

Here's a video below showcasing the Gutenberg block.

Subscribe to our YouTube Channel

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

$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 example usage:

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

$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

$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 Profile Picture

$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.

2 thoughts on “User Profile Picture”

  1. iDeasUnlimited

    Please provide me witha short code on the front end to allow the registered user to upload their pictures instead of going to wp-admin

Leave a Reply

Your email address will not be published. Required fields are marked *