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

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 )

    $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.)

  • I'm working with a multisite. Is there another file that I can place this into that will work for any theme? Still allowing for WordPress to upgrade without overwriting this? (I'm currently making all of my edits/updates using a plugin) – Daniel Oct 17 '13 at 14:14
  • You can either run the code from your plugin or you can separate the code you want all your sites to run into a Must Use Plugin. – Dero Oct 17 '13 at 14:32

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

<img alt='' 
    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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.