Custom menu items can be hidden from logged in users or hidden from logged out users with CSS. It is simple.
WordPress adds a logged-in class to the body element of every page shown to a logged in user. Items added to a custom menu can be given a CSS class. Here is how we combine custom menu CSS classes and the logged-in body CSS class to set when menu items display to logged in users but not logged out users and to set when menu items display to logged out users but not logged in users.
This method works to hide page tabs from logged in and/or logged out users. Please note that this will not stop the actual page from being accessed.
How to hide menu tabs with CSS
First we create two CSS classes for our menu items:
- class one: loggedin
- class two: loggedout
Go to Appearance > Menus and make sure CSS Classes are visible.
Now add a custom CSS class to your custom menu items:
- add loggedin to the page tabs you want to display to logged in users only
- add loggedout to the page tabs you want to display to logged out users only
- do not add CSS classes to page tabs you want to display to both logged in and logged out users
Place the following CSS into your theme’s custom CSS section:
/* Do not display to logged in users */
.logged-in .loggedout {
display:none;
}
.loggedin {
display:none;
}
/* Display to logged in users */
.logged-in .loggedin {
display:block;
}
The above CSS
- hides any element with the CSS class loggedin from users who are not logged in to the WordPress site, and
- hides any element with the CSS classes logged-in loggedout from everyone (loggedout displays to anyone not logged in to the site)
There you have it. A nice lightweight way to control who sees your menu tabs.
Why not use a plugin?
There are two plugins written specifically for managing menu tab visibility by user role. These plugins provide far more advanced control than the above CSS but these plugins do not always work when menu display is controlled by other plugins. Also, the plugins might be a little heavy for simple use cases. Those plugins are:
Nav Menu Roles is the easiest of the two plugins to use but Menu Visibility Control offers greater role scoping flexibility.
Over to you
What are your menu visibility control tips? If you have any, let us know in the comments below.
wpDiscuz