Thread Starter
erikcw
(@erikcw)
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?
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.
Thread Starter
erikcw
(@erikcw)
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!
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.
Thread Starter
erikcw
(@erikcw)
That worked like a charm! I was really starting to bang my head against the wall on this one! Thanks!!!
