Jason Coleman

Paid Memberships Pro

Jared Atchison

<h4>Add an avatar upload field on frontend pages and Edit Profile screen so users can add a custom profile picture.</h4>
<p>Community and Membership sites on WordPress use this plugin as a lightweight solution for custom user avatars. The plugin is compatible with bbPress, as well as many popular plugins with frontend user registration and profile management features.</p>
<p>Admins can upload a user’s avatar on the Edit User admin screen.</p>
<p>Basic User Avatars also supports front-end avatar management for sites that want to keep users out of the dashboard. To use this feature, add the shortcode <code>[basic-user-avatars]</code> to any page in your WordPress site. We recommended placing this shortcode on another logged-in account type page, such as the WooCommerce My Account page, the Membership Account page, or any other front-end profile edit form.</p>
<p>The Avatar Upload form is automatically added to the bbPress User Profile > Edit frontend page.</p>
<p>If you do not want your users to be able to update their avatar, navigate to Settings > Discussion and locate the “Local Avatar Permissions” setting. Check this box to only allow users with file upload capabilities to upload local avatars (Author role and above).</p>
<h4>Seamlessly Migrate from WP User Avatar Plugin</h4>
<p>Version 1.0.5 includes a feature to automatically convert avatars formerly loaded through the WP User Avatar plugin. This means that you can disable WP User Avatar, activate Basic User Avatars, and have a seamless transition for existing avatars in your site. Be sure to update any avatar upload form that used the <code>[avatar_upload]</code> shortcode to use the shortcode: <code>[basic-user-avatars]</code>.</p>


Basic User Avatars

it may have been around for a while but this plugin still works well

still works with WP4.9.1

Add an avatar upload field on frontend pages and Edit Profile screen so users can add a custom profile picture.

Saad Iqbal

<p>WordPress currently only allows you to use custom avatars that are uploaded through Gravatar. WP User Avatar enables you to use any photo uploaded into your Media Library as an avatar. This means you use the same uploader and library as your posts. No extra folders or image editing functions are necessary.</p>
<p><strong>WP User Avatar</strong> also lets you:</p>
<ul>
<li>Upload your own Default Avatar in your WP User Avatar settings.</li>
<li>Show the user’s <a href="http://gravatar.com/" rel="nofollow ugc">Gravatar</a> avatar or Default Avatar if the user doesn’t have a WP User Avatar image.</li>
<li>Disable <a href="http://gravatar.com/" rel="nofollow ugc">Gravatar</a> avatars and use only local avatars.</li>
<li>Use the <code>[avatar_upload]</code> shortcode to add a standalone uploader to a front page or widget. This uploader is only visible to logged-in users.</li>
<li>Use the <code>[avatar]</code> shortcode in your posts. These shortcodes will work with any theme, whether it has avatar support or not.</li>
<li>Allow Contributors and Subscribers to upload their own avatars.</li>
<li>Limit upload file size and image dimensions for Contributors and Subscribers.</li>
</ul>
<h3>ADD WP USER AVATAR TO YOUR OWN PROFILE EDIT PAGE</h3>
<p>You can use the [avatar_upload] shortcode to add a standalone uploader to any page. It’s best to use this uploader by itself and without other profile fields.<br />
If you’re building your own profile edit page with other fields, WP User Avatar is automatically added to the show_user_profile and edit_user_profile hooks. If you’d rather have WP User Avatar in its own section, you could add another hook:</p>
<pre><code>do_action('edit_user_avatar', $current_user);
</code></pre>
<p>Then, to add WP User Avatar to that hook and remove it from the other hooks outside of the administration panel, you would add this code to the functions.php file of your theme:
    </p>
<h3>HTML WRAPPER</h3>
<p>You can change the HTML wrapper of the WP User Avatar section by using the functions wpua_before_avatar and wpua_after_avatar. By default, the avatar code is structured like this:</p>
<pre><code><div class="wpua-edit-container">
  <h3>Avatar</h3>
  <input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" />
  <p id="wpua-add-button">
    <button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button>
  </p>
  <p id="wpua-preview">
    <img src="{imageURL}" alt="" />
    Original Size
  </p>
  <p id="wpua-thumbnail">
    <img src="{imageURL}" alt="" />
    Thumbnail
  </p>
  <p id="wpua-remove-button">
    <button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button>
  </p>
  <p id="wpua-undo-button">
    <button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button>
  </p>
</div>
</code></pre>
<p>To strip out the div container and h3 heading, you would add the following filters to the functions.php file in your theme:</p>
<pre><code><?php
remove_action('wpua_before_avatar', 'wpua_do_before_avatar');
remove_action('wpua_after_avatar', 'wpua_do_after_avatar');
?>
</code></pre>
<p>To add your own wrapper, you could create something like this:</p>
<pre><code><?php
function my_before_avatar() {
  echo '<div id="my-avatar">';
}
add_action('wpua_before_avatar', 'my_before_avatar');

function my_after_avatar() {
  echo '</div>';
}
add_action('wpua_after_avatar', 'my_after_avatar');
?>
</code></pre>
<p>This would output:</p>
<pre><code><div id="my-avatar">
  <input type="hidden" name="wp-user-avatar" id="wp-user-avatar" value="{attachmentID}" />
  <p id="wpua-add-button">
    <button type="button" class="button" id="wpua-add" name="wpua-add">Edit Image</button>
  </p>
  <p id="wpua-preview">
    <img src="{imageURL}" alt="" />
    <span class="description">Original Size</span>
  </p>
  <p id="wpua-thumbnail">
    <img src="{imageURL}" alt="" />
    <span class="description">Thumbnail</span>
  </p>
  <p id="wpua-remove-button">
    <button type="button" class="button" id="wpua-remove" name="wpua-remove">Default Avatar</button>
  </p>
  <p id="wpua-undo-button">
    <button type="button" class="button" id="wpua-undo" name="wpua-undo">Undo</button>
  </p>
</div>
</code></pre>


User Avatar – Reloaded

Use any image from your WordPress Media Library as a custom user avatar or user profile picture. Add your own Default Avatar.

Basic User Avatars vs User Avatar – Reloaded