7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
  1. Code
  2. Creative Coding

How to Disable the Admin Bar in WordPress 3.3

Scroll to top
Read Time: 5 mins

WordPress (Sonny) version 3.3 was just released last night. Half asleep, I downloaded the new version, set up my database, and installed it. Fancy new welcome, I like it. Then, I went and configured my settings just the way I like it. Fix the tagline, set the permalinks (Look, %postname%, awesome, awesome to the max), set the date and time format, etc. etc. Then I disabled the admin-bar. Clicked "Update Profile". Great! Hey, wait a minute. The admin-bar is still there!? What the [Insert Expletive]!

Why Can't I Get Rid of The Admin Bar?

With the new WordPress version, the WordPress core developers decided that the admin bar is an essential part of the Admin section (from what I understand). Personal, I don't find much use for it. To me it's just a ugly bar at the top of the page with only some of the options found on the side-menu. Not, that I have an intolerable hate of the admin-bar. I just don't like it.

With the previous versions of WordPress you could just go to the user profile to disable the admin-bar, or you could use this popular code in the functions.php file.

With the release of version 3.3 we no longer are given the option to disable the admin-bar in the Admin section. I applaud the Core WordPress Development Team for trying to make WordPress easier to use and more accessible, but they seem to be missing something in their thinking. People like to have options, and they don't like it when those options are taken away. Especially when they've utilized those options.

So, I quickly came up with this solution to disable the admin-bar.

Disabling the admin-bar in the Admin Section

This code is going to be placed in the functions.php file, so go ahead and open it up in your favorite text editor.

First let's set up the function with a check.

This is going to make sure that the function 'disableAdminBar' doesn't already exists. If it doesn't the our function will run.

Next, let's remove the action that will enables the admin-bar.

Now, for the action hook that initializes the disableAdminBar function.

OK, that disabled the admin-bar, but there's still a 28px padding at the top of the page.

28 px Padding28 px Padding28 px Padding

You can go into the admin-bar.css file and edit the css there to remove the padding. The css property you want to edit is this.

You could dig through the wp-admin.css file and change the css there, but I think it's better to preserve the core files. So, I'm going to override the css in the function we just made. This is the function we're going to use to override the css.

Here is the whole function to disable the admin-bar and overriding the css all together.

Now that 28px padding should be gone.

No PaddingNo PaddingNo Padding

It's not pretty but it works, also by overwriting the css this way. If you ever want to re-enable the admin-bar. You won't have to change the core css back.

Disabling the admin-bar in the Admin Section

If you want to disable the admin bar of the frontend of your site, you can go into your user profile and uncheck "Show Toolbar when viewing site". Easy enough, but if you want to disable the admin-bar all together, we're going to have to add some more to the 'disableAdminBar' function.

Here's the action to disable the admin-bar on the frontend.

In our 'disableAdminBar' function. It looks like this.

The admin-bar is gone, but one problem. Now, there's a 28px margin on the top of your site.

28px Margin28px Margin28px Margin

This one is tricky. This css is hard coded in the <head> when the "Show Toolbar when viewing site" is checked. I haven't been able to figure out how to remove the css, so we're going to have to override it like with the admin section using this function.

The 99 at the end of the add_filter hook, is to ensure that the css is in the <head> comes after the original hard coded css in the <head>

No MarginNo MarginNo Margin

Here's our completed function.


This may not be the most eloquent solution, but it works as a quick fix for now. I can't wait to see what other solutions and WordPress hacks that are to come.

Well, WordPress version 3.3( a.k.a. Sonny) is finally here. If you haven't upgraded yet, get to it.

Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.