Manually Customizing the WordPress Admin Bar

FYI – In WordPress 3.3 the Admin Bar was renamed the Toolbar, replacing the header entirely, and now has more hooks to edit it. Please read http://wpdevel.wordpress.com/2011/12/07/admin-bar-api-changes-in-3-3/ for more information.

Since WordPress 3.1, the Admin Bar has been around and been somewhat controversial. Some people love it, some hate it, and some couldn’t care. A lot of the time in the WP Support Forums I had to remind people that you can turn this off for yourself in your profile.

My standard replies to people was pretty much this:

If it’s throwing your theme out of whack, make sure you have a call to wp_footer() in your theme’s footer. The next cause for that is your theme’s css having a conflict. If it’s your avatar size, again, that’s CSS. Wanna turn the admin menu ON for EVERYONE? Use the Always Show Admin Bar Function. Like the bar but not the search? Hide Admin Bar Search Plugin is there. Want to minimise it? Admin Bar Minimiser Plugin. Want to disable it selectively? Admin Bar Disabler Plugin can do that.

Finally if you MUST turn it off… you can add one of these to your functions.php

add_filter( 'show_admin_bar', '__return_false' );
show_admin_bar(false);
show_admin_bar(0);

OR use the Disable Admin Bar plugin.

FYI, if you put the plugin in a folder called mu-plugins (yes, you can do this on Single Site as well as MultiSite) then your users won’t be able to un-install it unless they go in via FTP. Just put the mu-plugins folder in the same level as themes and plugins (wp-content/mu-plugins) and copy the FILE (not the folder) for the plugin into there. Done.

Now me? I like having it on. I used to have it turned one for all users, all visitors, everyone all the time. Recently, when I re-designed some sites, I removed that functionality because it was showing too much info to people who were suffering from information overload. Once I pulled the admin bar off for non-logged in users, I realized I wanted to change the way it worked.

The normal admin bar is actually pretty straight forward. The pretty icon of your user ID with a drop down menu rocks. The problem I had was my site was built to keep people off the backend. I already use the rocking WP Hide Dashboard plugin, and BuddyPress is installed, so I wanted to redirect people from places like ‘My Profile’ on the unbranded WP backend to the pretty BuddyPress front end. And yes, I think all ‘user interface’ plugins should have a front-end version.

I could have used something like WP Custom Admin Bar, but I knew I was going to want some pretty weird, granular level, control over the layout and the submenus. In order to make this look how I wanted, I had to remove menus I didn’t want (or need) and add in new ones. I did it all in a file called adminbar.php, which I tossed in the mu-plugins folder (so on a multisite it can never be turned off):

function ipstenu_admin_bar_remove() {
        global $wp_admin_bar;

        /* Remove their stuff */
        $wp_admin_bar->remove_menu('my-blogs');
        $wp_admin_bar->remove_menu('my-account-with-avatar');
        $wp_admin_bar->remove_menu('appearance');
}

add_action('wp_before_admin_bar_render', 'ipstenu_admin_bar_remove', 0);

The values like my-blogs and so on are the IDs of the menus you want to yank:

  • my-account-with-avatar / my-account: Links to your account. The ID depends upon if you have avatars enabled or not.
  • my-blogs: My Sites menu. For networks (aka MultiSite) only
  • edit: Post/Page edit link
  • new-content: Add New Content menu
  • comments: Comments link
  • appearance: Appearance menu
  • updates: Updates link
  • get-shortlink: Shortlink to a page

While some of these menus only show up for the admins, I figured I may as well remove the ones I don’t need right there anyway. I’m also of the (unproven) opinion that the fewer calls I make in that admin menu, the faster my site will be. The only reason I yanked my-account-with-avatar was because I wanted to remove some of the submenus and add in my own. I found it was easier to recreate it on my own, so I did this:

function ipstenu_admin_bar_add() {
        global $wp_admin_bar, $user_identity;
        $user_id = get_current_user_id();

        /* Add my stuff */
        if ( 0 != $user_id ) {
                $avatar = get_avatar( get_current_user_id(), 16 );
                $id = ( ! empty( $avatar ) ) ? 'ipstenu-account-with-avatar' : 'ipstenu-account';
                $wp_admin_bar->add_menu( array( 'id' => $id, 'title' => $avatar . $user_identity,  'href' => 'http://ipstenu.org/members/'. $user_identity .'/profile/' ) );
                $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Edit My Profile' ), 'href' => 'http://ipstenu.org/members/'. $user_identity .'/profile/edit/' ) );
                if ( current_user_can('manage_options') ) {
                        $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Dashboard' ), 'href' => 'http://ipstenu.org/wp-admin/' ) );
                        $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( 'Network Admin' ), 'href' => 'http://ipstenu.org/wp-admin/network' ) );
                }
                $wp_admin_bar->add_menu( array( 'parent' => $id, 'title' => __( '<strong>Log Out</strong>' ), 'href' => wp_logout_url() ) );
        }
}

add_action( 'admin_bar_menu', 'ipstenu_admin_bar_add', 10 );

But wait! If you just tried that, you found out the CSS looks like a monkey puked on your site. The avatar icon’s goobered, that pretty sprite that shows the arrow is missing. Well, that’s easily fixed with some CSS.

In the same adminbar.php file, I put this:

function link_to_stylesheet() {
        if ( is_user_logged_in() ) {
        ?>
        <style type="text/css">
        #wpadminbar .quicklinks li#wp-admin-bar-ipstenu-account-with-avatar>a{border-left:none;background:url(http://ipstenu.org/wp-includes/images/admin-bar-sprite.png?d=11122010) top left no-repeat;}
        #wpadminbar .quicklinks li#wp-admin-bar-ipstenu-account-with-avatar>a img{width:16px;height:16px;display:inline;border:1px solid #999;vertical-align:middle;margin:-2px 23px 0 -5px;padding:0;background:#eee;float:none;}
        #wpadminbar .quicklinks li#wp-admin-bar-ipstenu-account-with-avatar ul{left:30px;}
        #wpadminbar .quicklinks li#wp-admin-bar-ipstenu-account-with-avatar ul ul{left:0;}
        #wpadminbar .quicklinks .menupop li a img.blavatar{vertical-align:middle;margin:0 8px 0 0;padding:0;}
        </style>
        <?php }
?>
<?php
}
add_action('wp_head', 'link_to_stylesheet');

The only trouble with that is that with a call to wp_head you still get the fugly on the admin side. That’s easilly fixed with a second action call: add_action('admin_head', 'link_to_stylesheet');

Now you can make your admin bar have the menus (or submenus) you want to your heart’s content too!

While you can take my work for your starting point, here are the links I found helpful when I was kicking all this around:

SumTips: Customize WordPress Admin Bar by Adding/Removing Links
WP Engineer: Add Menus to the Admin Bar of WordPress
Digging Into WordPress: Admin Bar Tricks

About these ads
StudioPress Theme of the Month
Half-Elf? Try Half OFF WordPress ebooks!