How do I remove the admin bar (styling) from frontend only?

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.

Contents hide

Answers:

Method 1

Method 2

Method 3

Method 4

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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');

Method 2

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)

Method 3

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

Method 4

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' );

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating