WordPress.org

1. dogbot
   Member
   Posted 2 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 2 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 2 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
   Theme Diva & Forum Moderator
   Posted 2 years ago #
   

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

5. Peter_L
   Member
   Posted 2 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
   Theme Diva & Forum Moderator
   Posted 2 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.