Adding a Class to wp_list_pages Items With Children? (4 posts)

  1. nrutman
    Posted 5 years ago #

    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>
    <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?


  2. esmi
    Forum Moderator
    Posted 5 years ago #

    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.

  3. nrutman
    Posted 5 years ago #

    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.

  4. esmi
    Forum Moderator
    Posted 5 years ago #

    What about writing a small function that used get_page_children?

Topic Closed

This topic has been closed to new replies.

About this Topic