14

When logged in, the admin bar adds the following to my page <head> section:

<style media="screen" type="text/css">
    html { margin-top: 28px !important; }
    * html body { margin-top: 28px !important; }
</style>

Now, I can remove this by disabling the admin bar

/* Disable the Admin Bar. */
add_filter( 'show_admin_bar', '__return_false' );

or removing it completely

/* Remove admin bar */
remove_action('init', 'wp_admin_bar_init');

I would like to keep the admin bar in the admin interface and only remove the CSS from front end.

I already use CSS reset where I set margin: 0px, but the admin-bar styling overrides this.

So how can I remove the styling from front end?

PS. I know I can disable the admin bar per user, but that's not what I want.

1

4 Answers 4

29
function hide_admin_bar_from_front_end(){
  if (is_blog_admin()) {
    return true;
  }
  return false;
}
add_filter( 'show_admin_bar', 'hide_admin_bar_from_front_end' );

Edit:

As @Walf suggested in the comments, this could be writen as:

add_filter('show_admin_bar', 'is_blog_admin');
8
  • 1
    Ah :) I was testing for admin when I tried something similar. Forgot about the is_blog_admin. Thanks :)
    – Steven
    Oct 5, 2011 at 9:08
  • which file does this go in...I'm pretty new to WP...
    – user14432
    Oct 3, 2012 at 13:46
  • @HiroProtagonist it can be defined in any plugin or in functions.php of your theme. Oct 3, 2012 at 14:17
  • 2
    You can shorten it a bit: add_filter( 'show_admin_bar', function (){ return is_blog_admin() }); Apr 26, 2016 at 12:19
  • 3
    You can shorten it a lot: add_filter('show_admin_bar', 'is_blog_admin'); I suggested the edit but it was rejected. I guess the two high-powered reviewers saw it as too much change without realising it is exactly the same.
    – Walf
    Nov 14, 2019 at 5:19
6

f you want to remove the admin bar (toolbar) AND the bump CSS from your page, use this:

function wpse_99333_hide_admin_bar_from_front_end(){
  if ( is_blog_admin() ) {
    return true;
  }
  remove_action( 'wp_head', '_admin_bar_bump_cb' );
  return false;
}
add_filter( 'show_admin_bar', 'wpse_99333_hide_admin_bar_from_front_end' );

The _admin_bar_bump_cb function is the one that inserts the CSS (located in wp-includes/admin-bar.php)

1

I would do something like this :

Remove admin bar / CSS in head / body class

show_admin_bar(false);

or if you just want to : Remove html margin-top CSS in <head>

function remove_admin_bar_bump() {
   remove_action('wp_head', '_admin_bar_bump_cb');
}
add_action('get_header', 'remove_admin_bar_bump');

Tested : Version 4.7.3

0

I recently had to do this, I just wanted wordpress's default inline css styles (for the admin bar) removed, but I did want the admin bar to remain. I was displaying the admin bar at the bottom of the page, not the top.

Here is what got rid of injecting the styles from the _admin_bar_bump_cb function for me. I added the following to my functions.php

// remove wordpress trying to style the admin bar with inline css
function hide_admin_bar_from_front_end(){
  remove_action( 'wp_head', '_admin_bar_bump_cb' );
  return true;
}
add_filter( 'show_admin_bar', 'hide_admin_bar_from_front_end' );

Not the answer you're looking for? Browse other questions tagged or ask your own question.