Showing menu items to logged in users only

UPDATE: I have now determined how to extend this to show menu items to ONLY guests. Something I’ve been looking at for a while. 

I have been searching for a simple way to show particular menu items to only logged in users. I know there are ways of achieving this in php by hardcoding your menu structure within the template for your site, but this involves delving into the source code (which I don’t like doing), and then makes the menu less dynamic to changes. That is, if you later add a page, you have to re-edit the code to have the menu updated…

Until now!

I found this the other day (credit reference below) and with a little CSS injection and associating a class with the menu item, we can have the same end-user effect.

Firstly you need to determine the name of the ID associated with your menu. What you are looking for is the name of the ID of the unordered list, or the div immediately prior to this, that contains your menu items. It will be some derivative of your primary menu’s name. View your source, grab this info and change “#nav” below to “#menu-MYMENUNAME”. It will be all lowercase.

Once you have that, now you need to add some code to your style sheet:

#nav li.logged-in-nav {
  display: none;
} 

body.logged-in #nav li.logged-in-nav {
  display: list-item;
}

logged-in-navThen, simply add the “logged-in-nav” class to the optional CSS Classes field for the menu item (as per the screen cap on the right).

It’s really that simple!

Now any menu items that have this class added to the CSS will only be visible to the end user if they are logged into the site.

If only I could make this work so that a particular menu item was ONLY visible to a guest! Now THAT is my next goal. Unfortunately there is no body class associated with users who aren’t logged in.

Reference: I originally found this snippet and give all credit to Bill Erickson at:
http://www.billerickson.net/customizing-wordpress-menus/#logged-in
Thanks Bill!

NB: There is one downside to this method. The end-user does not SEE the menu item, because the CSS “hides” it from them. It doesn’t altogether remove it from the page source and screen readers may in fact read the menu item, or anyone viewing the source will see these links — whether logged in or not. So unless you have the destination pages “controlled” in some other way, then maybe this method isn’t the best solution. However, for what I want, this is perfect.

This entry was posted in general. Bookmark the permalink.

15 Responses to Showing menu items to logged in users only

  1. Pingback: Guest only menu items | dav3 on wordpress

  2. Tina says:

    Awesome tut! Do you think this would work with an entire menu, since there’s no ‘display: menu-item’ selector? I have a group of people who would be the only ones seeing this menu.

    • dave says:

      I don’t see why not. You can only give it a go and see what happens. Please, let me know if it does/doesn’t work

  3. Ed Blackwood says:

    Hi. I’ve tried this, but the menu item never shows – logged in or not logged in. Any troubleshooting suggestions?

    • dave says:

      Yep, it will most likely be the menu item id name (in this case #nav) of the menu item itself, You’ll be using the one I have in the example above, and not the one specific to your page. Have a look at the page source and find the menu item and look for the specific tag for the menu item you’re after. Some themes use the same one, but many don’t.

      Good luck

  4. Eric says:

    Not visible to eyes, but searchable by search engines, or anyone who can read code, including robots. Not useful. Basic ACL would be more than helpful…WordPress still seems too 90s given the huge privacy issues affecting everyone. Content access doesn’t need to be that granular, but simple authorized user vs public viewing of any specific page is pretty fundamental for managing information to be seen by joe-public vs josephine-we-know. User registration settings and a simple page or menu radio button should be able to handle all that needs to be done, and still isn’t.

  5. Boris says:

    Hi Dave,
    this was exactly what I was looking for. You should be able to reverse it as well:
    #nav li.logged-out-nav {
    display: list-item;
    }

    body.logged-in #nav li.logged-in-nav {
    display: none;
    }

    However, for some strange reason I could not get it to work, so I surched further and found a very good plugin that does the job:

    All the best,
    Boris

    • dave says:

      I haven’t looked at this for a while, but the reason it doesn’t work reversed (from memory) there is no class associated with the item (including body) if the user isn’t logged in. As you’ll notice, the logged in class is attached to the body, which, as a guest isn’t available to throw against. Hence the little bit of php on the other page linked to this.

  6. Boris says:

    I had trouble with the formating. Here an other go:
    simple-access-control

    • dave says:

      That certainly does look like a better solution (I love plugins and things that just work). I haven’t tried this yet, but it’s now on my todo list. Thanks Boris.

  7. gman says:

    Works like charm.

  8. Rick says:

    loved this information. Wondering if you had ever figured the guest user menu. I know this post was wrote months ago but I would love to figure something out and add back to the community

    • Rick says:

      Just found it. Man this is the best. I will start implementing this in all my sites that have user roles. This is amazing! My hat is off to you!

  9. Pingback: Showing menu items to logged in users only | dav3 on wordpress | DCS Enterprise

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="">