WordPress.org

1. jaredstenquist
   Member
   Posted 2 years ago #

   I have a vertical nav on my wordpress site, which is currently outputting all parent pages, and chidren within them. I am using the following code to achieve this:

   <ul id="navlist">
   <?php wp_list_pages('sort_column=menu_order&title_li=&echo=1'); ?>
   </ul>

   This produces:

   <ul id="navlist">
    <li><a href="/" title="Home">Home</a></li>
    <li id="who-we-are"><a href="/who-we-are/" title="Who We Are">Who We Are</a>
   <ul>
   	<li id="who-we-are_our-history-philosophy"><a href="who-we-are/our-history-philosophy/" title="Our History & Philosophy">Our History & Philosophy</a></li>
   	<li id="our-team"><a href="who-we-are/our-team/" title="Our Team">Our Team</a></li>
   </ul>
   </li>
   </ul>

   What I need to know is how to hide the child pages (the nested UL) if the visitor is not on the parent page.

   So in my example - if the visitor isn't in the parent page of WHO WE ARE, they wont see the links OUR HISTORY or OUR PHILOSOPHY.

   Help is much appreciated!

2. davesnothere
   Member
   Posted 1 year ago #

   Did you ever get this figured out? I'm having the same issue.

3. David Gwyer
   Member
   Posted 1 year ago #

   This might be what you are after:

   http://codex.wordpress.org/Function_Reference/wp_list_pages#List_Sub-Pages

4. MAS
   Member
   Posted 1 year ago #

   <ul id="navlist">
   <?php wp_list_pages('sort_column=menu_order&title_li=&echo=1&depth=1'); ?>
   </ul>

   Try it once

5. David Gwyer
   Member
   Posted 1 year ago #

   @chinmoy29 The problem with this is it will NEVER display any child pages only top level parent pages. If you need conditional child pages you have to use a different depth plus include the child_of parameter somehow.

   The link I gave shows an example of what you are trying to achieve @davesnothere, @jaredstenquist.

6. davesnothere
   Member
   Posted 1 year ago #

   @dgwyer
   Thanks for the link. I'm working through it now.

7. davesnothere
   Member
   Posted 1 year ago #

   The solution is actually quite simple. The OP and @chinmoy29 were correct with their code, and a simple bit of css solves the problem quite nicely. Instead of writing convoluted php to only write the sub navigation when you are on the page, hide it:

   #nav li.page_item ul.children {
   	display: none;
   }
   
   #nav li.current_page_item ul.children {
   	display: inline;
   }

   BTW, visibility:hidden won't work here as it will leave a large gap in your layout. But thanks @dgwyer, I'll definitely be using what I learned from that link.

8. davesnothere
   Member
   Posted 1 year ago #

   Actually, it should be this:

   #nav li.page_item ul.children {
   	display: none;
   }
   
   #nav li.current_page_item ul.children, #nav li.current_page_parent ul.children {
   	display: inline;
   }

   Otherwise, the children disappear as soon as you click on one.

Topic Closed

This topic has been closed to new replies.