Technology

Do’s and don’ts of disabling the WordPress Admin Toolbar

Posted by Pixafy Team

Do's and Don'ts of Disabling the WordPress Admin Toolbar | Pixafy

If you’ve been working with WordPress installations for a while, then you know that in versions previous to 3.3, what is now the “toolbar” was once the “admin bar”. The admin bar was only visible to users on the site when logged in, but once the admin bar became toolbar, on some themes, this bar is present regardless of whether you’re logged in or not.

Now what’s the big deal with this bar anyway? Well, for developers or designers, the bar isn’t just a matter of an element being slapped over the top of your site — WordPress also has core styles that push down your site to make room for the bar even if you try and use hacky CSS to hide the bar. This can throw off the site’s design and the empty space can convince clients that something is broken when it’s just WordPress accommodating the toolbar.

Now, before I get started on how to properly remove the toolbar, I’d like to share how you should NOT remove it. After some Google searches, trial and error, and learning the hard way, here are some ways I don’t recommend removing the toolbar:

  1. Commenting out or removing wp_footer or wp_head. Ok, so I’ll admit that I’m guilty of this one. In a pinch, it was a fast solution. And even though WordPress warns that removing these will unleash chaos, I was a rebel, and did it anyway. I’ve learned my lesson though – and to give a good example of something that broke due to this solution, WordPress 3.6 now has audio/video players in its core (yay). This player went completely bonkers and changed it’s entire structure due to a missing stylesheet being called in the wp-includes folder, which was being dropped in with wp_footer. Countless hours were spent staring at my screen trying to resolve this issue, only to find it was due to commenting out wp_footer. Save yourself time and learn from my mistakes – leave the wp_head/footer where they belong.
  2. Using “hacky” CSS generously peppered with !importants and mile-long selectors in an attempt to get rid of the toolbar. This one is pretty obvious once you attempt it. The time and effort it will take to hide the toolbar by trying to overwrite WordPress’ core CSS and then fixing an assembly line of styling issues that may occur later due to all the !importants is a puzzle better spent solving in Professor Layton – at least it’ll be fun that way. Using CSS this way can resolve the problem in a pinch and if only temporary, but it can make things messy and our goal is to write clean, efficient CSS.
  3. Going straight into the core files and removing stuff. This includes wp-includes, wp-admin or any files in the root folder of a WordPress site without knowing what these files are actually responsible for. This doesn’t need much explanation! WordPress has these files for a good reason and tinkering with them would be nothing short of disastrous. Not to mention once WordPress updates to a new version, these changes will be overwritten.

Now that we’ve gone over the list of “don’ts” and have hopefully saved you time, here is how you should remove the toolbar:

  1. Snippets. Use add_filter(‘show_admin_bar’, ‘__return_false’); — if using show_admin_bar( false ); doesn’t work, perhaps you’re using a newer version of WordPress, so try giving this snippet a whirl instead. This removes the toolbar from the front-end of the site and only keeps it visible on the dashboard when logged it. Just drop this snippet into your theme’s functions.php file. I tend to put my customizations towards the end of the file to keep my functionality easy to find.
  2. On the WordPress dashboard, if you’re okay with the toolbar and just want to hide it for yourself or for other users, you can set this in the User settings. Just go to Users on the left side of your dashboard, and select the user you want to edit. Once within the user profile, there is a checkbox that says, “Show toolbar when viewing site.” Unchecking this will hide the toolbar on the front-end for that specific user. Check out the screenshots:
Screen Shot 2013-10-08 at 10.00.45 AM Screen Shot 2013-10-08 at 10.00.59 AM Screen Shot 2013-10-08 at 10.01.08 AM

And that’s it! Turns out getting rid of the toolbar the correct way is a lot simpler than following through with one of the “fixes” from the “don’t” list. It will keep your files clean, keep things from breaking, and most of all, satisfy your need to hide the toolbar on the front-end to keep things visually pleasing. Enjoy!

Did you find these tips on disabling the WordPress Admin Toolbar helpful? Share your comments and questions below, or tweet us @Pixafy!