WordPress User Role Menu Visiblity Control with CSS

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.

Custom-Menu-CSS-Classes

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

Add-CSS-Class-to-MenuPlace 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.

9
Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Camilo

buenas tardes, muchas gracias… muy buen post!!

me podrías ayudar con una duda que tengo?

la duda es la siguiente… si quiero poner un menú pero que solo sea visible para determinado “Rol” por ejemplo solo visible para el administrador. se podría con Css?

un saludo…

Onde exatamente tenho que colocar esse código?

Sherry

Can I add different css per role. For Example I have a custom roles. I want to hide certain widgets based on roles.

Arthur

The loggedin does not works for me =/
i put the code, but just loggedout works

Sindy

Me too. The loggedin does not works :(

Sindy

The loggedin does not works , but loggedout works. Please, Help me !!

C M DE BRUYNE

Guys. THANK YOU. This was such a sweet solution.

Free to your inbox

Join our mailing list to receive the latest news and updates from JournalXtra.

You have Successfully Subscribed!