• Skip to primary navigation
  • Skip to main content
OsomCode

OsomCode

Awesome code tutorials for WordPress and Genesis

  • Subscribe
  • My account
    • Edit profile
    • Favorites
    • Update credit card
  • Login

Show different menu items depending on whether the user is logged in or not in WordPress

Discover in this tutorial how to show different menu items depending on whether the user is logged in or not in WordPress, using CSS.

Being able to show or hide menu items depending on the user’s status is very handy, especially for membership websites.

In fact, if you access OsomCode without being logged in you will see a menu:

main-menu-users-no-logged-WordPress

And when you are logged in you will see another one:

main-menu-users-logged-in-WordPress

Although you can achieve this in different ways, in this tutorial I’m going to show you the simplest one without the need of plugins, with a bit of CSS.

Let’s get started:

Snippet to show or hide menu items if the user is logged in to WordPress

First of all, you need to know the IDs of the menu items you want to show or hide conditionally.

To do this you can use the web inspector of your browser (usually, right click “Inspect element”) and you will see something like this:

check-id-menu-item-WordPress

In this case, the id is menu-item-6229.

Now you will use different strategies if you want to show or hide the menu item, but in both cases you must place the code at the end of the style.css file.

If you want to hide a menu item once the user has logged in, use these lines of code:

To see this and another 847 code snippets of this website, login or subscribe here.

It’s as simple as that.

All you have to do to customize it is to inspect the menu items you want to conditionally show or hide and substitute #menu-item-6229.

Conclusions

Do you see how easy it is to show or hide menu items depending on whether the user is logged-in or not in WordPress?

If you have any question, please leave it in the comments. And if you want to give me a suggestion for future snippets, please send it through the contact form.

Benefits of being a subscriber. 🙂

CSS Header Menu WordPress

To leave read and make questions about this code, you can login or register.

  • About OsomCode
  • FAQ
  • Contact

Legal Notice · Privacy Policy · Cookie Policy · Terms and conditions
Copyright © 2023

Lost your password?