Position of Avatar

This will move WP User Avatar up the profile page (add to functions.php):

/**
 * WP User Avatar: move Avatar section higher in Edit Profile page.
 */
add_action( 'admin_init', function() {
    remove_action( 'show_user_profile', array('wp_user_avatar', 'wpua_action_show_user_profile') );
    remove_action( 'edit_user_profile', array('wp_user_avatar', 'wpua_action_show_user_profile') );

    add_action( 'show_user_profile', array('wp_user_avatar', 'wpua_action_show_user_profile'), -1 );
    add_action( 'edit_user_profile', array('wp_user_avatar', 'wpua_action_show_user_profile'), -1 );
});

At that point you still have the default Profile Picture section displaying the current avatar, as well as the WP User Avatar section which is functional to remove/change the avatar, and that is a bit confusing. This javascript will move the WP User Avatar section to replace the Profile Picture section:

/* jshint ignore:start */
/**
 * Element.closest() polyfill from https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
 */
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector ||
                              Element.prototype.webkitMatchesSelector;
}

if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;

    do {
      if (el.matches(s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
/* jshint ignore:end */

/**
 * Moves WP User Avatar to default Profile Picture section of the edit profile page.
 */
window.addEventListener( 'DOMContentLoaded', function() {

    // Get the td element for the Profile Picture.
    var profilePictureTd = document.querySelector( "#your-profile .user-profile-picture > td" );

    // Get the td element for the WP User Avatar section.
    //
    // WP User Avatar lacks a wrapper div and top level id's,
    // so we select a child element with an id and work backwords.
    var wpUserAvatarTd = document.getElementById( 'wp-user-avatar-existing' ).parentNode;

    if ( ! profilePictureTd || ! wpUserAvatarTd ) {
        return;
    }

    // Get reference to the WP User Avatar parent table to remove.
    var wpUserAvatarTable = wpUserAvatarTd.closest( 'table' );

    // Replace Profile Picture td with WP User Avatar td.
    profilePictureTd.parentNode.replaceChild( wpUserAvatarTd, profilePictureTd );

    // Remove remnants of WP User Avatar section.
    if ( wpUserAvatarTable ) {

        var wpUserAvatarHeading = wpUserAvatarTable.previousElementSibling;

        if ( wpUserAvatarHeading ) {
            wpUserAvatarHeading.parentNode.removeChild( wpUserAvatarHeading );
        }

        wpUserAvatarTable.parentNode.removeChild( wpUserAvatarTable );
    }

});

And you’ll need to enqueue that script via admin_enqueue_scripts, eg. if called edit-profile.js, add to functions.php:

function enqueue_edit_profile_js( $hook ) {
    if ( 'profile.php' != $hook ) {
        return;
    }

    wp_enqueue_script( 'my_custom_script', get_template_directory_uri() . '/edit-profile.js' );
}
add_action( 'admin_enqueue_scripts', 'enqueue_edit_profile_js' );

• This reply was modified 5 years, 10 months ago by jnorell.