WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Conditionally show section menu for pages? (10 posts)

  1. OsakaWebbie
    Member
    Posted 1 year ago #

    What I'm looking for seems like basic website navigation, so I'm surprised it's not in core WordPress. I want to have a "section menu" or "context menu" (I'm not sure of the right term) that will change depending on what page in the hierarchy is being viewed, showing only related items. I'm happy to create custom menus for the task, but I don't know how to control when they are visible and when they aren't.

    The plugin "Subpages in Context" comes close, but it shows the menu even when the viewed page has no children (e.g. an About page or Contact Us), which looks silly. Also, it would be nice to have the ability to shorten titles for some of the menu items - some of my page titles are longer than I would like on the menu, ideally.

    I also tried the "Section Widget" plugin (the simple part - I don't need the tabs). It has good control of when the content would be shown (just select the page checkboxes), but I would have to write the HTML for the menus by hand - that's pretty tedious, prone to errors, and not helpful for handing the maintenance of the site over to a non-programmer.

    The Custom Menu functionality in core WordPress works well for creating the menus, if I could find a way to conditionally show them, like placing them inside the "Section Widget" or something, but that doesn't look possible.

    Isn't this something that lots of people would want to do? Ideas are appreciated.

  2. hiltond
    Member
    Posted 1 year ago #

    Took me a while to find it but the "Advanced Menu Widget" may be what your looking for.

  3. OsakaWebbie
    Member
    Posted 1 year ago #

    Thanks for the idea, but that plugin doesn't help - it has a variety of filters to hide and show menu items on the menu, but I have to start with the same menu for all, so (a) the title of the menu will always be the same, and (b) the menu will physically be there even if there are no items in it. And I can't seem to even find a combination of filters that gets the menu items I need in each case, although perhaps I would with a little more experimentation.

    Let me explain a little more - you're welcome to look at the site (http://japan.prayersummits.net, temporary URL while in development), but it's in Japanese, so I'll use a simplified English example - here is a similar page structure to what I'm working with, and what menu I want to show is in [ ] brackets:

    <ul>
    <li>Home</li>
    <li>About</li>
    <li>Big Event [show Big Event menu]</li>
    </ul>
    <ul>
    <li>Big Event for California [show Big Event menu]</li>
    <li>Big Event for Texas [show Big Event menu]</li>
    </ul>
    <li>Local Event [show Local Event menu]</li>
    <ul>
    <li>Local Event in San Diego [show Local Event menu]</li>
    <li>Local Event in San Francisco [show Local Event menu]</li>
    <li>Local Event in Houston [show Local Event menu]</li>
    </ul>
    <li>Contact</li>

    The Big Event menu would have a title of "Big Event" and menu items for the two regional Big Event pages (I don't care if the parent page is on the menu - either way is fine). Same concept for the other menu. Bonus points if I can edit the menu item wording so that the words "Big Event for" and "Local Event in" are not repeated over and over. Notice that for pages like About and Contact, there would be no menu at all.

    In Joomla this is trivial, basic functionality (you can hide or show any module based on what page you are on), so I guess I'm having CMS culture shock trying to learn WordPress. (:-o)

  4. OsakaWebbie
    Member
    Posted 1 year ago #

    Oops - it seems that this forum doesn't understand a UL inside an LI, and I don't see a way to edit my post. Here it is in plain text:

    * Home
    * About
    * Big Event [show Big Event menu]
    -- Big Event for California [show Big Event menu]
    -- Big Event for Texas [show Big Event menu]
    * Local Event [show Local Event menu]
    -- Local Event in San Diego [show Local Event menu]
    -- Local Event in San Francisco [show Local Event menu]
    -- Local Event in Houston [show Local Event menu]
    * Contact

  5. OsakaWebbie
    Member
    Posted 1 year ago #

    And now the layout of the whole thread is messed up as a result! I guess I have exposed a bug in the forum code. (I am putting a closing UL tag at the front of this post in the hopes that it will repair itself.)

  6. OsakaWebbie
    Member
    Posted 1 year ago #

    Nope, that did something even stranger - the thread now has two columns!

    FORUM ADMINISTRATOR/MODERATORS: If you can clean up the offending post(s), please do so (and then you can also delete these latest posts that are only about the forum problem). I wish the forum had either a preview feature or the ability to edit one's own posts, but I don't see either functionality.

  7. Edited your post to fix the stray code -- in future, you can enclose code samples in backticks or use the "code" button above the editor.

  8. OsakaWebbie
    Member
    Posted 1 year ago #

    Thanks, Amy! However, I wasn't trying to show code - I was trying to use code to create a two-level bulleted list to help explain my page hierarchy (in fact, I didn't even type any HTML - I just used the tools in the editor to create the UL and LI tags). But the forum seems to choke on the second level UL for some reason.

    Anyway, I now look forward to any other insights on my WordPress question.

  9. OsakaWebbie
    Member
    Posted 1 year ago #

    After starting to hack the "Subpages in Context" widget to add the features I wanted, I realized that since the titles and structure I want to see are really the same as showing a piece of my main navigation menu, I decided to attack it from a different direction, starting with the menu itself and then subtracting what I don't want. That turned out to be much easier.

    I put a copy of my navigation menu in the sidebar, and then used a combination of CSS and jQuery to hide/remove what I don't want to see. Here is my CSS, which hides everything and then shows the parent/child group of links related to the current page:

    #primary #menu-top-navigation li.menu-item ,
    #primary #menu-top-navigation ul.sub-menu {
      display:none;
    }
    #primary #menu-top-navigation li.current-page-ancestor,
    #primary #menu-top-navigation li.current-page-ancestor ul.sub-menu,
    #primary #menu-top-navigation li.current-page-ancestor ul.sub-menu li.menu-item,
    #primary #menu-top-navigation li.current-menu-item ,
    #primary #menu-top-navigation li.current-menu-item ul.sub-menu,
    #primary #menu-top-navigation li.current-menu-item ul.sub-menu li.menu-item {
      display:block;
    }
    #primary #menu-top-navigation li.current-menu-item > a  {
      color: white !important;
    }

    I'm using a child of the Mantra theme, and Mantra has a place in its settings for custom Javascript, so I put this bit of code there to remove the menu widget if the current page is a top level page with no children:

    jQuery(document).ready(function() {
      if (jQuery('#primary #menu-top-navigation li.current-page-ancestor').length==0 && jQuery('#primary #menu-top-navigation li.current-menu-item ul.sub-menu').length==0) {
        jQuery('#primary #menu-top-navigation').closest('li').remove();
      }
    });

    It works very nicely - no plugins needed! So perhaps this will help someone else, although the classes would need to be varied to fit the theme that is used.

  10. OsakaWebbie
    Member
    Posted 1 year ago #

    Oh, I forgot to check the "Resolved" checkbox, and I guess I have to submit another post to do that. See above post for my solution to my own problem.

Topic Closed

This topic has been closed to new replies.

About this Topic