Support » Themes and Templates » Adding a Class to wp_list_pages Items With Children?

  • I’m using WordPress as a CMS, and for my navigation I’m using wp_list_pages(). My problem is that I need to differenciate between navigational items that are top-level and those that have children in my CSS. So I need the resultant code to look something like:

    <li><a href="somewhere">top-level link</a></li>
    <li class="menu">
       <a href="somewhere">item with children</a>
       <ul>
          ...
       </ul>
    <li><a href="somewhere">top-level link</a></li>
    <li><a href="somewhere">top-level link</a></li>

    I need a way to style the A element if it has sub-items (I want to put a little arrow on it), so something like the “menu” class on the corresponding LI element.

    Anybody have any ideas on how to do this?

    Thanks,
    -Nate

Viewing 3 replies - 1 through 3 (of 3 total)
  • esmi

    (@esmi)

    Forum Moderator

    Try looking at your page source, You’ll find that parent pages are also assigned the classes ‘current_page_parent’ when viewing child pages. Other than that, use the nested lists to provide styling.

    Yeah, the problem is that I don’t need the current page, I need some way to style items with children.

    The reason I can’t simply use the nested lists is that cross-browser CSS selectors don’t allow me to travel up the DOM tree, only down. So while I can say “Find all UL elements inside of LI elements” (i.e. “li ul” or “li > ul”) I can’t say “Find all LI elements that contain a UL element”. There’s no such CSS selector.

    I’m currently using JQuery to find the appropriate elements and add the class, but implementing it in JavaScript isn’t nearly as good of a solution from a web standards point of view as putting it in the PHP.

    esmi

    (@esmi)

    Forum Moderator

    What about writing a small function that used get_page_children?

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding a Class to wp_list_pages Items With Children?’ is closed to new replies.