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:
And when you are logged in you will see another one:
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:
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 997 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. 🙂
