Support » Themes and Templates » Style Pages differently than subpages in wp_list_pages()

  • Resolved erikcw


    Hi all,

    How can I style “parent” Pages differently than their child sub-pages in the wp_list_pages() list?

    It looks like they all have a class of page_item and are wrapped in

  • tags, so I can’t style based on class.
  • Is there an alternate function or some sort of modifier I can use? I need the parent page to be larger than the sub pages…


Viewing 5 replies - 1 through 5 (of 5 total)
  • I found this – but it only adds a css class for the current page. Does anyone know how to make it work for all parent pages?

    You would need to separate out the main nav from the subnav.

    I use this for the main nav in header.php:

    <!-- Begin Main Navigation -->
    <div id="nav">

    <li class="<?php if (is_home()) { ?>current_page_item<?php } else { ?>page_item<?php } ?>"><a href="<?php echo get_settings('home'); ?>">Home</a></li>
    <?php wp_list_pages('sort_column=menu_order&depth=1&title_li='); ?>

    <!-- End Main Navigation -->

    And then I use this on page.php:

    <?php if(wp_list_pages("child_of=".$post->ID."&echo=0")) { ?>
    <!-- Begin Subnav -->
    <div id="subnav">
    <?php wp_list_pages("title_li=&child_of=".$post->ID."&sort_column=menu_order&show_date=modified&date_format=$date_format");?>
    <hr class="hide" />
    <!-- End Subnav -->
    <?php } ?>

    This will put a subnav on any page that has child pages. If there aren’t any it will not show up.

    Thanks for your reply Ryan!

    Unfortunately, that won’t do the trick for me. 🙁

    Right now I’m using
    to list all of my pages. I have 4 “parent” pages, and each parent has a bunch of children sub-pages.


    Unfortunately they both have a class of “page_item”. I need to have a different class for the Parent pages so I can style them differently. (I want the parents big and bold, and the children smaller, no underline, etc…).

    I tried do ul>li>ul>li in my style sheet. But since that doesn’t work in Internet Explorer 6, it’s kind of a waste.

    I’m comfortable hacking the core files if needed. But just need to know how test if the page is a parent.

    Thanks for your help!

    For verticle nav (you are using a vert one right?), you style them like so (without child selectors). Make sure you wrap the pages template tag with<div> and <ul> like so:

    <div id="nav">
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>

    Then the CSS would go like so:

    Parent page styling:

    #nav ul .page_item a {

    Sub page styling:

    #nav ul li ul .page_item a {

    This has been tested. Hope this helps.

    That worked like a charm! I was really starting to bang my head against the wall on this one! Thanks!!!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Style Pages differently than subpages in wp_list_pages()’ is closed to new replies.