CODEWITHSUNDEEP
phpwordpressauthentication
nowiko
nowiko

Reputation: 2557

Hide menu items from authenticated users Wordpress

I have Login menu item, and I want to hide it from uathenticated users, I try to find solutions and fount this:

Wordpress Stackexchange

But for my opinion creating two separate menus is not very good idea. Maybe exists another way? Thanks!

Upvotes: 1

Views: 1944

Answers (3)

henghun
henghun

Reputation: 1

I was trying Mere Development's way and theoretically it should work however I was using Chrome. Make sure you disable Chrome's cache under DevTools

Upvotes: 0

Mere Development
Mere Development

Reputation: 2519

This can be done with CSS alone. When a user is logged in, WordPress adds the class 'logged-in' to the page's body tag.

In the menu builder, you can specify a class for an individual menu item in the same place that you set the label and title. For example you could set the class to 'logout-hide'. screenshot:

enter image description here

If the 'class' options is not visible, which it is not by default, turn it on in the 'Screen Options' area. See the bottom row of options in this screenshot:

enter image description here

Now, in your CSS you could use the following CSS rule to hide this item when users are logged in:

body.logged-in li.logout-hide {
    display:none;
}

This same approach could be used if you wanted to hide a logout item when logged in, and hide a login item when logged out.

A note about css specificity: You might find that even after you set the rule above, the item is not hidden. This is likely because another rule is overriding your new rule and setting the 'display' property to something visible. For example, if your menu has an ID applied to it (say, 'menu-header-menu' maybe) you will probably have to add that to your rule. i.e:

body.logged-in ul#menu-header-menu li.logout-hide {
    display:none;
}

Let us know if you have any problems.

Upvotes: 1

vdwijngaert
vdwijngaert

Reputation: 1555

If you don't want to create two seperate menus, you will have to create a custom menu walker. But honestly, creating two seperate menus is the correct way to do it, and it's probably the easiest way too.

Alternatively, you could add a class to the menu items you want to hide, and hide them using either JavaScript and CSS for users that are not logged in, of course, that's not a very good solution.

Upvotes: 0

Related Questions