This post is about using wp_add_inline_style() function to hide the WordPress Toolbar or Admin Bar.
Ever wanted to hide the WordPress Toolbar?
If you are a new developer, you should know
that it's not allowed to hide it directly wit CSS.
But even if you are a junior or
senior WordPress user, you should consider this requirement for best practice, also
you'll maybe learn something new 😉
The WordPress Toolbar is the little black bar on top of the site that only the logged in user(s) can see, depending on their role(s) and how the Super Admin or the Administrator has configured the visibility of this bar for each one…
We can set the display status of this bar for the front side of our website by using the show_admin_bar() function.
Also, we can directly target it by it’s CSS id #wpadminbar and hide it
like so:
#wpadminbar {
display: none;
}
but this way is not allowed for themes/plugins developers!
You can say, “just use show_admin_bar!”, and I would ask the
following:
“what if I want to hide it with CSS without using a stylesheet so I can control it with
JS for later use?!”
😉
It’s not the main reason, you can have any other reason to hide it with CSS without
using a stylesheet, scenarios are limitless.
This is where
wp_add_inline_style()
function steps in 🙂
In your
functions.php file, add
the following:
/**
* Hide the Toolbar using inline style since we can't use #wpadminbar in CSS.
*/
function myfunction_hide_adminbar() {
$hide_adminbar = "
#wpadminbar{
display: none;
}";
wp_add_inline_style( 'my-stylesheet-handle', $hide_adminbar );
}
add_action( 'wp_enqueue_scripts', 'myfunction_hide_adminbar' );
Please, pay attention to the $handle
my-stylesheet-handle!
You should replace it with the
$handle of your stylesheet!
In your functions.php file,
you’ll find something like:
wp_enqueue_style( 'your-stylesheet-handle', get_stylesheet_uri() );
your-stylesheet-handle is the $handle of your stylesheet 😉
Hope this will be useful 🙂
Please don’t hesitate to share your opinion, suggestions or
other methods.
