Support » Plugin: WP User Avatar » Position of Avatar

Viewing 1 replies (of 1 total)
  • jnorell

    (@jnorell)

    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 8 months ago by jnorell.
Viewing 1 replies (of 1 total)
  • The topic ‘Position of Avatar’ is closed to new replies.