How to Disable the Admin Bar in WordPress 3.3

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.

add_filter('show_admin_bar', '__return_false');

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.

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
  }

}

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.

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
  	remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 );
  
  }

}

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

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
  	remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 );
  
  }

}

add_filter('admin_head','remove_admin_bar_style_backend');

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

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.

body.admin-bar #wpcontent,
body.admin-bar #adminmenu{
padding-top:28px;
}

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.

function remove_admin_bar_style_backend() { 
  echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
}
      
add_filter('admin_head','remove_admin_bar_style_backend');

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

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
  	remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 );
  
    function remove_admin_bar_style_backend() { 
      echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
    }
          
    add_filter('admin_head','remove_admin_bar_style_backend');
  
  }

}

add_filter('admin_head','remove_admin_bar_style_backend');

Now that 28px padding should be gone.

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.

	remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 );

In our ‘disableAdminBar’ function. It looks like this.

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
    remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 ); // for the admin page
    remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 ); // for the front end
  
    function remove_admin_bar_style_backend() { 
      echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
    }
          
    add_filter('admin_head','remove_admin_bar_style_backend');
    
	}

}

add_filter('admin_head','remove_admin_bar_style_backend');

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

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.

function remove_admin_bar_style_frontend() { 
  echo '<style type="text/css" media="screen">
  html { margin-top: 0px !important; }
  * html body { margin-top: 0px !important; }
  </style>';
}

add_filter('wp_head','remove_admin_bar_style_frontend', 99);

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>

Here’s our completed function.

if (!function_exists('disableAdminBar')) {

	function disableAdminBar(){
  
  	remove_action( 'admin_footer', 'wp_admin_bar_render', 1000 ); // for the admin page
    remove_action( 'wp_footer', 'wp_admin_bar_render', 1000 ); // for the front end
  
    function remove_admin_bar_style_backend() {  // css override for the admin page
      echo '<style>body.admin-bar #wpcontent, body.admin-bar #adminmenu { padding-top: 0px !important; }</style>';
    }
          
    add_filter('admin_head','remove_admin_bar_style_backend');
    
    function remove_admin_bar_style_frontend() { // css override for the frontend
      echo '<style type="text/css" media="screen">
      html { margin-top: 0px !important; }
      * html body { margin-top: 0px !important; }
      </style>';
    }
    
    add_filter('wp_head','remove_admin_bar_style_frontend', 99);
  
  }

}

// add_filter('admin_head','remove_admin_bar_style_backend'); // Original version
add_action(‘init’,'disableAdminBar’); // New version

Conclusion

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.