How to Add User Profile Image tab to the Account page?

If you're looking to have a user profile image tab on the Account page where user can easily add their profile image and use it through your website, then look no further than the WP User Avatar plugin.

To add a user profile image tab, please follow the steps below:

  1. Navigate to your WordPress Dashboard > Plugins > Add New, and search for "WP User Avatar". It is the one developed by ProfilePress.
  2. Install and activate this plugin
  3. Optionally change the default avatar size in Avatars > Settings page:

  4. Create a special Profile Image tab on the Account page. There are two ways to do this that are listed below.

1. Use Account Navigation Tabs Add-on

  1. Purchase and install Account Navigation Tabs Add-on: https://meprtoolbox.com/product/account-navigation-tabs/
  2. Open MeprToolbox page and add Tab Title and the shortcode: [avatar_upload] inside content editor. Leave Tab Type option set to "Custom Content". Remember to click the "Save Tabs" button.

When you open the Account page you should see the Profile Image tab that looks like this in the default TwentyTwenty theme

Now your user will be able to add or replace their profile picture directly in the Account section.

2. Use Custom Functions

If you are familiar with PHP you can add the code below at the bottom of your active theme's function or use My Custom Functions plugin.

    <?php
    function mepr_add_image_tab($user) {
        ?>
        <span class="mepr-nav-item custom-image">
          <a href="/index.php/account/?action=profile-image">Profile Image</a>
        </span>
        <?php
    }
    add_action('mepr_account_nav', 'mepr_add_image_tab');

    function mepr_add_image_tab_content($action) {
        if($action == 'profile-image') {
	   echo do_shortcode('[avatar_upload]');
        }
    }
    add_action('mepr_account_nav_content', 'mepr_add_image_tab_content');
    ?>

Displaying profile image

Adding a user profile image like this will change the user picture called avatar in all places where the user picture is displayed. It will also replace the user image from Gravatar site assigned to the user's email. The most popular place where the user picture is displayed is the post comments but you can display it anywhere using the [avatar] shortcode.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.