Customizing WordPress Admin - How to Change the Avatar size

Question

I am in the process of customizing the back-end of WordPress for a new product that we will be releasing. I am trying to figure out what the best way is to update the avatar size that shows up in the adminbar, in the top right corner.

I'm trying to set the image size 30px x 30px instead of the default 16px. Does any one have a way that I can do this with out updating the core WordPress files? I'm trying to keep WordPress future proof.

Currently I am making all my updates to the admin panel design using a plugin and some js.

Any help would be greatly appreciated.

• Daniel

Answer 1

You need to hook into wp_admin_bar action and alter the corresponding object. Something along these lines will do the trick for you. Place the following code to your functions.php.

function _update_avatar_size( $wp_admin_bar ) {

    $user_id      = get_current_user_id();
    $current_user = wp_get_current_user();

    if ( ! $user_id )
        return;

    $avatar = get_avatar( $user_id, 30 );
    $howdy  = sprintf( __('Howdy, %1$s'), $current_user->display_name );

    $account_node = $wp_admin_bar->get_node( 'my-account' );

    $title = $howdy . $avatar;
    $wp_admin_bar->add_node( array(
        'id' => 'my-account',
        'title' => $title
    ) );

}
add_action( 'admin_bar_menu', '_update_avatar_size', 999 );

(Don't forget to override the admin stylesheet to display the larger avatar.)

Answer 2

You can use the filter get_avatar. The $avatar value is something like:

<img alt='' 
    src='http://0.gravatar.com/avatar/04ef?s=32&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516%3D32&amp;r=G' 
    class='avatar avatar-32 photo' height='32' width='32' />

The DOMDocument seems complicated, but gets the stuff done.

add_filter( 'get_avatar', 'avatar_wpse_119123', 15, 5 );

function avatar_wpse_119123( $avatar, $id_or_email, $size, $default, $alt )
{
    $doc = new DOMDocument;
    $doc->loadHTML( $avatar );
    $imgs = $doc->getElementsByTagName('img');
    if ( $imgs->length > 0 ) 
    {
        $url = urldecode( $imgs->item(0)->getAttribute('src') );
        $url2 = explode( '?', $url ); // roughly, the first part is the avatar, the second is the default avatar
        $avatar= "<img src='$url2[0]?s=30' alt='' class='avatar avatar-30 photo' height='30' width='30' />";
    }
    return $avatar;
}

The only thing is that this doesn't affect the Admin Bar user's menu.