WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Style Pages differently than subpages in wp_list_pages() (6 posts)

  1. erikcw
    Member
    Posted 8 years ago #

    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

  2. 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...

    Thanks!

  • erikcw
    Member
    Posted 8 years ago #

    I found this http://trac.wordpress.org/ticket/2395 - but it only adds a css class for the current page. Does anyone know how to make it work for all parent pages?

  • Ryan Fitzer
    Member
    Posted 8 years ago #

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

    <ul>
    <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='); ?>
    </ul>

    </div>
    <!-- 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">
    <ul>
    <?php wp_list_pages("title_li=&child_of=".$post->ID."&sort_column=menu_order&show_date=modified&date_format=$date_format");?>
    </ul>
    <hr class="hide" />
    </div>
    <!-- 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.

  • erikcw
    Member
    Posted 8 years ago #

    Thanks for your reply Ryan!

    Unfortunately, that won't do the trick for me. :-(

    Right now I'm using
    wp_list_pages('sort_column=menu_order&title_li=');
    to list all of my pages. I have 4 "parent" pages, and each parent has a bunch of children sub-pages.

    Parent1
    __Child1
    __Child2
    __Child3
    __Child4
    Parent2
    ...

    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!

  • Ryan Fitzer
    Member
    Posted 8 years ago #

    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">
    <ul>
    <?php wp_list_pages('sort_column=menu_order&title_li='); ?>
    </ul>
    </div>

    Then the CSS would go like so:

    Parent page styling:

    #nav ul .page_item a {
    color:blue;
    }

    Sub page styling:

    #nav ul li ul .page_item a {
    color:red;
    font-weight:bold
    }

    This has been tested. Hope this helps.

  • erikcw
    Member
    Posted 8 years ago #

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

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags