WordPress.org

Ready to get started?Download WordPress

Forums

help with wp_list_pages {I am a parent} (6 posts)

  1. dogbot
    Member
    Posted 3 years ago #

    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.

  2. Peter_L
    Member
    Posted 3 years ago #

    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 :-)

  3. Peter_L
    Member
    Posted 3 years ago #

    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>
  4. esmi
    Forum Moderator
    Posted 3 years ago #

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

  5. Peter_L
    Member
    Posted 3 years ago #

    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>
  6. esmi
    Forum Moderator
    Posted 3 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic