User Profile Picture Enhanced Documentation

Welcome to the User Profile Picture Enhanced Documentation

Welcome to the User Profile Picture Enhanced documentation. If you have any questions, feel free to comment below or head to our support form.

Minimum Requirements

Here are the minimum requirements for User Profile Picture Enhanced:

Frequently Asked Questions

See below for some frequently asked questions. If your answer is not found here, please contact support.

Installation
What Does User Profile Enhanced Offer?
Do You Offer a Refund If Things Don't Work Out?
Do Animated GIFs Work?
Can I Change the Font?

Functionality

Social Networks

Adding social networks is a breeze. Just select from the dropdown and click Add. You can sort them, save the URL (edit), and remove them at whim.

Social Networks Profile Page for Social Networks
Social Networks Profile Page for Social Networks

A social media function below retrieves the social media image data in whatever way you see fit.

 

<?php
global $post;
$social_networks = uppe_get_social_networks( $post->post_author, 'raw' );

if ( $social_networks && ! empty( $social_networks ) ) {
	echo '<div class="icons" style="text-align: center;">';
	echo '<style>';
	echo '.fab:before, .fas:before { color: #FF0000; }';
	echo '</style>';
	foreach( $social_networks as $social_network ) {
		echo sprintf(
			'<span style="display: inline-block; margin-right: 10px; font-size: 48px;"><a href="%s" title="%s"><i class="%s"></i></a></span>',
			esc_url( $social_network->url ),
			esc_html( $social_network->label ), 
			esc_html( $social_network->icon )
		);
	}
	echo '</div>';
	
}
Social Networks Template Function Output

Social Networks Template Function Output

You Can Change the User Title

Change User Title

Change User Title

Here's an example of getting the title.

echo '<h2 class="title" style="text-align: center;">';
echo esc_html( get_user_meta( $post->post_author, 'uppe_title', true ) );
echo '</h2>';

Customizable Settings Page

User Profile Picture Enhanced Options

Customizable Settings Page

  • Enable a public post type.

    Behind the scenes, every user profile has a post type. When enabled, this shows the post type in the back-end and you can begin entering profile data for that user.

    When editing a profile, there are four helper blocks, which will assist you with building out the profile. But you can really put anything you want there using the power of Gutenberg.

    User Profile Blocks
    User Profile Blocks
  • Enable Profile Picture Pages.

    With the blocks shown above, you can insert an Avatar, a Biography, a Recent Post List, and even Social Media Icons.

    User Profile Page Blocks Preview
    User Profile Page Blocks Avatar and Biography
    User Profile Page Blocks Author Posts and Social Networks
    User Profile Page Blocks Author Posts and Social Networks
  • Author Boxes.

    Enable Author Boxes to have an author box show up on the bottom of your post type. Simply add a profile box, modify the Gutenberg block it adds, and you're done creating an author box.

    Author Block List Screen
    Author Block List Screen

    Once inside the author box, you can customize the block to your contentment and save/publish it when ready.

    Author Box Block Preview Using the Bold Theme
    Author Box Block Preview Using the Bold Theme
  • Place Your Author Boxes at the Bottom of a Post.

    Once you have created an author box, you should be able to select one from each available public post type.

    Author Box Select
    Author Box Select

    Once you save an author box for a post type, an author box will show up under that post type.

    Selected Author Box for Post Type
    Selected Author Box for Post Type

    And here's what it looks like on the front-end.

    Frontend Preview Using the Light Theme
    Frontend Preview Using the Light Theme
  • Built-In Author Box Themes.

    There are several themes to choose from:

    Block Theme Options
    Block Theme Options

    And here are the themes:

    Author Box Block Preview Using the Bold Theme
    Bold Theme
    Frontend Preview Using the Light Theme
    Centered Theme
    Dark Theme
    Dark Theme
    Light Theme
    Light Theme
    Professional Theme
    Professional Theme

    Need more themes? Enter a comment below or with your idea!

Options

There are numerous options and here's what they do.

User Profile Picture Enhanced Options

User Profile Picture Enhanced Options

  • Enable a public post type.

    Behind the scenes, every user profile has a post type. When enabled, this shows the post type in the back-end and you can begin entering profile data for that user.

    When editing a profile, there are four helper blocks, which will assist you with building out the profile. But you can really put anything you want there using the power of Gutenberg.

  • Enable a Viewable Author Page.

    Each one of your users can have their own profile page! There are 4 helper blocks to assist you in grabbing their avatar, their biography, their recent posts, and their social networks.

    Use the power of Gutenberg to its fullest.

  • Load Font Awesome.

    For social networks to work, Font Awesome 5 must be installed. Check both of these boxes if you are unsure if you have Font Awesome 5 installed.

    Disable if there's any kind of conflict on the front or admin side.

  • Selecting an Author Box.

    You must first enable this option to allow a public post type for an author box.

    Once enabled, you can select for each public post type an author box that you have created. This author box will show up below the content of the post type you choose.

    Author Box Output
    Author Box Output

Block Overview

See below for a collection of helper blocks that will help you build out your profile page.

See the video below for an overview of blocks.

Mediaron Logo

Pricing

We are priced very competitively. You'll find plans as low as $10 a year.

Pricing Options

Lite

$10 / Year

  • 1 Year of Support
  • 1 Supported Site
  • 1 Year of Updates
  • 7 Day Free Trial

Developer

$20 / Year

  • 1 Year of Support
  • 10 Supported Sites
  • 1 Year of Updates
  • 7 Day Free Trial

Unlimited

$49 / Year

  • 1 Year of Support
  • Unlimited Sites
  • 1 Year of Updates
  • 7 Day Free Trial

Lifetime

$99 / Once

  • Unlimited Support
  • Unlimited Sites
  • Lifetime Updates
  • Developer Access

REST API

There are several new REST API endpoints for you to use!

See below for some example uses:

/mpp/v3/get_avatar

$request = new WP_REST_Request( 'POST', '/mpp/v3/get_avatar' );
$request->set_param( 'user_id', $post->post_author ); 
$request->set_param( 'size', 'large' );
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
$data     = $response->data;
?>
<img src="<?php echo esc_url( $data['src'] ); ?>" width="<?php echo esc_attr( $data['width'] ); ?>" height="<?php echo esc_attr( $data['height'] ); ?>" alt="<?php echo esc_attr( $data['alt'] ); ?>" />
<?php

/mpp/v3/get_recent_posts

$request = new WP_REST_Request( 'POST', '/mpp/v3/get_recent_posts' );
$request->set_param( 'user_id', $post->post_author ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
$data     = $response->data;
echo '<ul>';
foreach( $data['posts'] as $post ) {
    printf( '<li><a href="%s">%s</a></li>', esc_url( $post->permalink ), esc_html( $post->post_title ) );
}
echo '</ul>';
echo sprintf( '<p><a href="%s" class="button">View All the Posts of the Author</a></p>', esc_url( $data['profile' ] ) );

/mpp/v3/get_social_networks

$request = new WP_REST_Request( 'POST', '/mpp/v3/get_social_networks' );
$request->set_param( 'user_id', $post->post_author ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
$data     = $response->data;
if ( isset( $data['items'] ) && ! empty( $data['items'] ) ) {
    echo '<div class="icons" style="text-align: center;">';
    echo '<style>';
    echo '.fab:before, .fas:before { color: #FF0000; }';
    echo '</style>';
    foreach( $data['items'] as $social_network ) {
        echo sprintf(
            '<span style="display: inline-block; margin-right: 10px; font-size: 48px;"><a href="%s" title="%s"><i class="%s"></i></a></span>',
            esc_url( $social_network['url'] ),
            esc_html( $social_network['label'] ), 
            esc_html( $social_network['icon'] )
        );
    }
    echo '</div>';
}

/mpp/v3/get_user_biography

$request = new WP_REST_Request( 'POST', '/mpp/v3/get_user_biography' );
$request->set_param( 'user_id', $post->post_author ); 
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
$data     = $response->data;
echo '<blockquote>';
echo  wp_kses_post( $data['biography'] );
echo '</blockquote>';

/mpp/v3/change_profile_image

$request = new WP_REST_Request( 'POST', '/mpp/v3/change_profile_image' );
$request->set_param( 'user_id', $post->post_author );
$request->set_param( 'media_id', 1234 );  
$request->set_header( 'X-WP-Nonce', wp_create_nonce( 'wp_rest' ) );
$response = rest_do_request( $request );
// Expect items in $request->data
/* Items expected
return array(
    '24'        => wp_get_attachment_image_url( $media_id, 'profile_24', false, '' ),
    '48'        => wp_get_attachment_image_url( $media_id, 'profile_48', false, '' ),
    '96'        => wp_get_attachment_image_url( $media_id, 'profile_96', false, '' ),
    '150'       => wp_get_attachment_image_url( $media_id, 'profile_150', false, '' ),
    '300'       => wp_get_attachment_image_url( $media_id, 'profile_300', false, '' ),
    'thumbnail' => wp_get_attachment_image_url( $media_id, 'thumbnail', false, '' ),
    'full'      => $attachment_url,
);
*/

Template Functions

There is one template function currently available, and that is for getting social networks.

See below for how you can retrieve raw social data or html for list items.

uppe_get_social_networks

<?php
global $post;
$social_networks = uppe_get_social_networks( $post->post_author, 'raw' );

if ( $social_networks && ! empty( $social_networks ) ) {
	echo '<div class="icons" style="text-align: center;">';
	echo '<style>';
	echo '.fab:before, .fas:before { color: #FF0000; }';
	echo '</style>';
	foreach( $social_networks as $social_network ) {
		echo sprintf(
			'<span style="display: inline-block; margin-right: 10px; font-size: 48px;"><a href="%s" title="%s"><i class="%s"></i></a></span>',
			esc_url( $social_network->url ),
			esc_html( $social_network->label ), 
			esc_html( $social_network->icon )
		);
	}
	echo '</div>';
	
}

Questions or Comments?

Leave a comment below and we'll be sure to get back to you.

Leave a Reply

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