Four ways to hide the WordPress admin bar

If you are logged in, WordPress usually displays the admin bar on the top of your page. But there are situations, where you don’t want to display the bar. Sometimes, it is ruining your site layout or you want to hide the bar for certain groups of users.

There are different ways to hide the admin bar. The first way is of course, to uncheck the corresponding checkbox in the admin itself.

You can disable the adminbar.
You can disable the admin bar for certain users.

If it’s just about one or two users this is probably the quickest way to solve this issue. It will be less comfortable, when you are handling dozens of users or when you have to repeat this procedure for each new user by hand.

So it is interesting to know, where the information is saved. It is a meta information for users, saved in the wp_usermeta table of the database. The corresponding key, which is used to save this setting is 'show_admin_bar_front'. The value 'true' displays the admin bar, while the value 'false' will hide it. So you could set this value to 'false' during the registration:

But maybe you want to hide the toolbar only in specific sections of your site. Responsible for the rendering of the bar are the functions _wp_admin_bar_init() and wp_admin_bar_render() which reside in wp-includes/admin-bar.php. Before these functions start to render the bar, they check by using is_admin_bar_showing(), if the bar is supposed to show up. This function can be found in admin-bar.php too. is_admin_bar_showing() just returns a boolean, whether the bar is supposed to show up or not. By using the filter hook 'show_admin_bar' you can intervene in the process. So you could tell WordPress to suppress the rendering of the bar on blog posts:

Of course, there remains the possibility to hide the bar by using CSS. The admin bar has the ID '#adminbar', which you can simply hide:

#adminbar{ display: none; }

But by doing this, the native layout is not restored yet. By using margin WordPress creates some space for the admin bar on the top of the page by moving the whole HTML-element 32 pixels down. Since all this takes place in the 'wp_head' action, you have to load your definitions later. One option is, to use the 'wp_footer'-action and move the HTML-element back on the top again. You have to consider, WordPress is using !important, so we have to do so too:

As you can see, there are a lot of ways to hide the admin bar. It depends on your needs, which of these ways is the best for you.

The following two tabs change content below.
Seine erste Webseite hat David Remer 1998 in HTML verfasst. Wenig später war er fasziniert von DHTML und JavaScript. Heute konzentriert sich vor allem auf das Entwickeln von WordPress Themes und Plugins für Inpsyde. Außerdem hat er das Buch "WordPress für Entwickler" verfasst.

Latest posts by David Remer (see all)

This post is also available in: German