The black bar at the top of WordPress blogs and websites when logged into the site is annoying and distracting. Hide it for your site members, subscribers or even yourself the easy way.
There are two problems here and one affects people that are members, subscribers and followers of WordPress sites. They arrive on your site to read your articles and there is an annoying black bar at the top of the page above everything else.
It has menu options that may even let them access the admin interface and fiddle with settings or see things you don’t want them to see or fiddle with. It is bad for you and a distraction for site visitors.
As the administrator of your site, you see that black menu bar all the time, in the front end and admin side. That is fine and it is often useful, but it is mostly only useful when in the admin interface performing admin tasks and it is not often needed when simply viewing your site, such as checking everything is OK. You want to see it as visitors see it, not with the admin menu bar.
We have had WordPress update after update, but never had any option to control this feature, or irritation as some people regard it. Why not? Actually, there is an option, but it requires the user to first access their account in the site’s back end and change an option. They may not know how to do this or want to. You might not want them to.
Fortunately, there are a variety of ways to show, hide and customize the WordPress admin bar and first I will get geeky and show you how to do it without using a plugin by adding a little bit of code, then I will look at some plugins for people that don’t like coding and need a simple solution.
Code to turn off WordPress admin bar
The ability to show or hide the admin bar is actually built into WordPress and the problem is simply that there is no menu option to do it. You have to use code. Here is the code you need to hide it for everyone on the front end of a website, it still appears in the admin interface, which is fine.
/* Hide WordPress Admin Bar */
show_admin_bar(false);
The first line is a comment or note to remind ourselves what the next line of code does. It is actually fairly obvious what it does, so feel free to leave out the comment.
We can go further and get even more geeky with code that tests to see if the user is an administrator and if not, it hides the admin bar. You see the admin bar, but it is not visible for anyone else.
if ( ! current_user_can( ‘manage_options’ ) ) {
show_admin_bar( false );
}
The first line uses if ( ! which means if not. In other words, if the current user cannot manage WordPress options, they are not an administrator, so hide the admin bar.
There is an alternative to using show_admin_bar(false); and some say it is better, although it works exactly the same:
add_filter( ‘show_admin_bar’, ‘__return_false’ );
Now you know the code to hide the admin bar, how on earth is it used? Where do we put it? It must be added to the current theme’s function.php file. All themes have one and it can easily be edited. Here is a step by step guide.
1 Edit the theme
The theme’s files can be edited from within WordPress and it is straightforward. Go to Appearance in the sidebar and then click Theme Editor.
2 Open functions.php
The theme editor is displayed and you might see a lot of code in a window. Ignore it and look on the right where there is a list of theme files. Click Theme Functions to open that file in the editor.
3 Add your code
The best place to insert the admin bar code is at the end. If the last line is simply blank, enter it there. If there is a ?> then enter it just before. Click the Update File button to save the changes.
Access WordPress admin without the admin bar
One of the useful functions of the admin bar is to provide easy access to the site’s admin interface. With no toolbar, how do you get into admin mode? Just go to www.yoursite.com/wp-admin and it is there, including the admin bad, which can’t be hidden on the back end.
If you are not logged in, then you are prompted to login before the admin interface is shown. Once you have typed this a couple of times, your browser will autocomplete the URL as soon as you start typing it, so it is quick and easy to do.
Take care with code
The functions.php file is an important one that powers your website and if you make any mistakes, your site may not work properly. If you look at the screenshots above, you will see that I’m not using my real site when adding the code, it is a test site running on my computer, see my article Build WordPress sites on Mac or PC for testing. Those code hacks worked perfectly, but it’s good to test them before using them on a real site.
The functions.php file can be found in the wp-content/themes/theme-name folder. Every theme has its own functions.php and be aware that it can be overwritten with a new version if the theme is updated and your additions are lost. A child theme gets around this, but that’s another article.
If you are not confident editing theme files then don’t, use one of the plugins below. At the very least, you should use an FTP program or some other method like cPanel file browser, and make a copy of functions.php before editing it. If something goes wrong, it won’t if you do it right, but if it does, you can copy the original functions.php file back.
It is possible to lock files on the web server so they cannot be changed and this prevents the Update File button from saving the changes you made. The button may be missing or you get a spinning wheel and eventually an error message. Use an FTP program to access the files on your site. They contain an option to view and change file permissions and the Write permission can be added.
Plugins to hide the WordPress admin bar
Hide Admin Bar is just about as simple a plugin as you can get. Just install it and activate it. There are no settings and nothing to see. When it is activated, no admin bar is shown to anyone when browsing the site whether they are logged in or not, admin or subscriber. It just works. To show the admin bar again, just deactivate the plugin.
Auto Hide Admin Bar is an interesting idea and if you use Windows you may be familiar with auto-hiding the taskbar and on the Mac you can auto-hide the Dock. It is normally invisible, but move the mouse to the bottom of the screen and it appears.
This plugin does that with the admin bar at the top of the web page. When activated, the admin bar is hidden, but when the mouse hovers over the very top edge of the web page, it slides into view. It is out of the way, except when it is needed and other members of your site, like subscribers for example, probably won’t even realize it is there.
There are a number of useful options, such as setting the animation speed, adding an arrow icon to indicate to users that they can click it to pull down the admin bar. It can be disabled for selected roles, like admin, editor, author, but enabled for other roles like contributor and subscriber.
Hide Admin Bar Based on User Roles is exactly what it says. Go to the plugin settings and it lists user roles like admin, editor, author and so on, with checkboxes. You simple choose which roles should show the admin bar and which should hide it.
Membership plugins: This is a familiar problem with website membership and so it is common to see membership plugins providing the option to disable the admin bar for everyone except site admins.
