DiggingIntoWordPress

by Chris Coyier & Jeff Starr

Goodbye Admin Bar, Hello Toolbar

Posted by on

When the Admin Bar hit the streets in WordPress 3.1, people seemed to either love it or hate it. And rightly so, it was a significant change in the appearance of the WP Admin area, and if not disabled in your User Profile, the front-end of your site as well. Many tips, tricks and plugins for customizing the Admin Bar began appearing around the Web. And then just as the dust began to settle, BAM — the “Admin Bar” transforms into the “Toolbar” with the WordPress 3.3 update.

The WordPress 3.3 update focused heavily on streamlining and optimizing the Admin experience. The Admin Bar of WP 3.1 was intended as the “first step toward a front-end editor”. The original Admin Bar was debated for several good reasons:

  • It’s enabled on the front-end by default
  • Gobbles up too much vertical screen space
  • It’s redundant, all links available elsewhere
  • It’s not visually appealing in general

Using the many Admin Bar tricks that became available around the Web, WordPress users dealt with the thing in their own way and moved on with their lives. Some use plugins, some custom snippets & scripts, some just love it as-is. But now with the new 3.3 update, the big question is “what works and what doesn’t?” We’re glad you asked..

Admin Bar is dead, long live the Toolbar

If you’ve updated to WP 3.3, you’ve seen the smaller “Toolbar” tucked neat above the Admin area. The new Admin Bar Toolbar seems to address some of the main concerns about the old Admin Bar:

  • No longer enabled on front-end by default
  • Uses less vertical screen space
  • Integrates the Admin header area, so no longer redundant
  • It looks a little better (in my opinion)

For those who have not yet updated or have no idea what’s going on, here is a visual comparison of the old “Admin Bar” and the new “Toolbar”:

[ The 'old' WP Admin Bar ]
Admin Bar: bigger, clunkier, and redundant

[ The 'new' WP Toolbar ]
Toolbar: smaller, simpler, and required

The new Toolbar certainly looks better, but concerns remain. From what I’ve gathered, the main gripe is that the Toolbar is mandatory, and possibly still redundant, depending on site setup and configuration (plugins, networks, etc.). Is it really mandatory? That sounds silly to me, but seems to be the case:

[ The 'old' WP Admin Bar ]
User Profile settings for the old Admin Bar: full control

[ The 'new' WP Toolbar ]
User Profile settings for the Toolbar: bamboozled! No option to disable for back-end

So yeah, something changed, so the question for the Admin Toolbar is “what works and what doesn’t?” Let’s dig in and see what’s up..

Admin Bar changes, now WP Toolbar

As Ipstenu puts it: “You don’t have to like it, but it’s here to stay.” So it’s time to look at things practically and get on with it. First of all, if you have a plugin or functions script that hides, removes, or customizes the Admin Bar, definitely investigate to see if everything is still working according to plan.

What works..

After some testing, we’ve seen the following functions.php snippets continue to work in WordPress version 3.3:

// disable the admin bar (front end only) show_admin_bar(false); // disable the admin bar (front end only) add_filter('show_admin_bar', '__return_false');

In WP 3.1, these functions hid the Admin Bar on both sides of the fence — front end & back end. In WP 3.3+, these snippets will hide the Admin Toolbar only on the front-end of your site (the public side). Likewise, this snippet of CSS added to your theme’s style.css file hides the Toolbar on the front-end:

/* hide the admin bar (front end only) */ #wpadminbar { display:none; }

Keep in mind that, when using the CSS method, the Toolbar markup is still present in the source code, but will not be displayed in the browser.

Here is another useful snippet for disabling the Toolbar for lesser users:

// show admin bar only for admins if (!current_user_can('manage_options')) { add_filter('show_admin_bar', '__return_false'); } // show admin bar only for admins and editors if (!current_user_can('edit_posts')) { add_filter('show_admin_bar', '__return_false'); }

Note that this also only applies to Toolbar display on the front-end.

What doesn’t work..

Basically the show_admin_bar() function seems to work as it did before version 3.3, except that now the Toolbar is integral to the Admin area, so disabling it using the previous functions works only on the front-end of your site. So tricks like this stopped working:


If you’re running WP 3.1+ or 3.2+ (not 3.3+), then show_admin_bar() will continue to disable the Admin Bar on both front and back ends of WordPress.

Admin Bar plugins

In our book, we provide a list of plugins to help with customizing the 3.1 Admin Bar. Now working on the DiW 3.3 update, it’s time to check these plugins for compatibility with WordPress 3.3. Here are the results:

If you know of others, shout em out and I’ll update the post.

To be continued..

Without a doubt things will continue to change, and it’ll be fun watching as WordPress continues to evolve, Toolbar and all :)

17 Responses

  1. My problem with the “Toolbar” is that when you have debug setting on, the errors are shown at the top of the page UNDER the “Toolbar”. UGH. If it wasn’t for that, it would be ok.

    Personally, I think there should be an option to turn it off in the admin.

  2. I haven’t liked the toolbar yet, even in 3.3. Its features don’t show up (or contrast) well on the front-end.

  3. Though styled and functionally different, the Toolbar does still contain a search mechanism, you just have to click the icon to the right of the Howdy menu to get it to expand.

    When the Admin Bar debuted, I couldn’t wait to disable it. It reminded me too much of WP.com and BP. After 3.2/3.2.1 rolled out, I really started using it more. Now, morphed into the Toolbar, it’s an integral part of my workflow. Before, I had to have two windows open, one for backend, one for frontend. Now I can use the Toolbar to jump back and forth more easily from one tab.

  4. When switching to WP 3.3 a lost my admin / tool bar on the front side of the website. Swiching the “show toolbar when viewing sit” to ‘checked did not help. Whatever I did and after checking many forums and documentation I could not figure out how to dispaly the toolbar at the front side. UNTIL I logout from the dashboard and logged in again. Perhaps stúpid for a non – newby as me, but a little hint in de documentation to logout and in, would have saved me several hours and frustation.

  5. I’m not sure I understand why you say that hiding the admin bar from subscribers no longer makes any sense. It does seem to work still…? The idea here being that if I allow subscribers to my site – but I don’t want their view to include the admin bar – and I don’t want to manually turn it off for tons of site subscribers – (but I want to leave it available for admins, etc.)… that code snippet seems to make the most sense. Or am I missing something?

    • Jeff Starr

      Ah good point.. I must’ve been stuck thinking about hiding the Toolbar on the Admin-area side of things. Of course that snippet makes sense for hiding the Toolbar on the public side of your site.

      • Ok phew. :D Thought I was missing some critical piece of logic. :) Had me scratching my head for a few days…

        • Jeff Starr

          Thanks for pointing this out, I’ve updated the article with things making more sense now, hopefully ;)

  6. When WP 3.2.1 came out, I wasn’t a huge fan of the Admin bar…as you pointed it, everything that was in the admin bar was already in other menus, so it seemed like an un-needed redundancy.

    When 3.3 was coming out, I was experimenting with the beta and RC releases. It still seemed like a lot of redundancy, but I kind of liked the idea of having an extremely minimal admin, as in the “toolbar” only. I had the idea that if you were to take the standard left side menu and integrated it into the toolbar, you would have ~28px tall admin, and the rest of your screen would be filled with non-menu admin. Also, with the toolbar being “locked” in place at the top of the screen, no matter how far you scroll, you would be able to access the menus, which is not always the case with the left side menu.

    So I decided to see if I could manipulate the menu with CSS and see if I could “integrate” it with the toolbar. In a way this is what resulted:
    http://wordpress.org/extend/plugins/ultimate-admin-bar/

    There are a couple issues that could arise, depending on how many plugins you are using that have top level menu items, but it also depends on the width of your screen as to how much of an issue you may have. Most likely you will be fine. It also only affects the admin side, the visitor side is left alone.

    Check it out, let me know what you think!

    • Jeff Starr

      Looks sweet! I’ll add it to the post and give it a try here at DigWP.com :)

      • Cool, thanks! That would be awesome if you ended up using it, I learned a HUGE chunk of what I know about WP from your book. I got to meet Chris at WCSF 2011, so maybe I’ll see you around someday too!

        Let me know if you have any suggestions/improvements/feedback, of course IE will only work in IE 8 and above. I think it’s ok in IE 7, but not ideal. Chrome, Safari and Firefox should be good to go.

        Thanks again

        • Jeff Starr

          Just to report that I’ve been using the plugin here at DigWP for about a week now and think it’s awesome. It takes awhile to get used to at first, but overall I think it’s further streamlined admin workflow. Thanks for this plugin!

  7. Agnel Waghela January 21, 2012

    Ultimate Admin Bar is one awesome plugin…
    It works very well with 3.3.1, its best for those who love their menu to be on top this is the best plugin.. go for it!!

  8. If you wish to say Goodbye to the new toolbar, install this plugin:
    http://shibulijack.wordpress.com/cj-remove-wp-toolbar/

  9. CJ Remove WP Toolbar works perfect up to WordPress 3.3.1 Admin: Can you please include this plugin in the list?

  10. Rajib Kumar March 1, 2012

    I don’t know why, my blog’s toolbar on for all time. Nothing works to close this toolbar in my admin account. I use default option, codes, plugins. But, nothing works.

Comments are closed. Contact us with any critical information. Thank you!

Code is poetry