WordPress.org

Support

Support » How-To and Troubleshooting » help with wp_list_pages {I am a parent}

help with wp_list_pages {I am a parent}

  • I want the list of pages like this:

    <UL class="menu">
        <LI class="page-item"><a href="..">Venus</a></LI>
        <LI class="page-item I-AM-A-PARENT"><a href="..">Earth</a>
           <UL>
               <LI class="page-item"><a href="..">Moon</a></LI>
           </UL>
         </LI>
        <LI class="page-item I-AM-A-PARENT"><a href="..">Mars</a>
           <UL>
               <LI class="page-item"><a href="..">Phobos</a></LI>
               <LI class="page-item"><a href="..">Deimos</a></LI>
           </UL>
         </LI>
        <LI class="page-item"><a href="..">Jupiter</a></LI>
     </UL>

    Notice the location of “I-AM-A-PARENT” on Earth and Mars. It does not have to be “I-AM-A-PARENT” if wp has some ready class name for that.

Viewing 5 replies - 1 through 5 (of 5 total)
  • wp gives the direct parent ul of the childpages’ li the class ‘children’

    so, don’t look for the class “I-AM-A-PARENT”,
    use the class ‘children’

    and don’t capitalize your ul and li’s, it hurts my eyes 🙂

    Like this:

    <li class="page-item"><a href="..">Mars</a>
           <ul class="children">
               <li class="page-item"><a href="..">Phobos</a>
               <li class="page-item"><a href="..">Deimos</a>
           </ul></li>
    esmi

    @esmi

    Forum Moderator

    There’s also the .current_page_parent and .current_page_ancestor classes.

    oh, didn’t see those

    like this then

    <li class="page-item current_page_ancestor current_page_parent"><a href="..">Mars</a>
           <ul class="children">
               <li class="page-item"><a href="..">Phobos</a>
               <li class="page-item"><a href="..">Deimos</a>
           </ul></li>
    esmi

    @esmi

    Forum Moderator

    Not quite. It looks more like:

    <li class="page-item current_page_item"><a href="..">Mars</a>
           <ul class="children">
               <li class="page-item"><a href="..">Phobos</a>
               <li class="page-item"><a href="..">Deimos</a>
           </ul></li>

    When the top level page is being displayed and something like:

    <li class="page-item current_page_parent"><a href="..">Mars</a>
           <ul class="children">
               <li class="page-item current_page_item"><a href="..">Phobos</a>
               <li class="page-item"><a href="..">Deimos</a>
           </ul></li>

    when one of the sub pages is being displayed. All of these classes are generated automatically by wp_list_pages.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘help with wp_list_pages {I am a parent}’ is closed to new replies.
Skip to toolbar