Here is a common navigational scheme, with parent pages on top and child pages (if they exist) on bottom:
We’ll need code to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.
Here is the PHP:
<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
And here is the CSS:
* {
margin:0;
padding:0
}
#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}
#nav li {
margin-right:25px;
}
#nav li, #subnav li {
float:left;
list-style:none
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}
#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}
#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}
That’s it!
If you’re wondering why the CSS seems overly verbose, it’s to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.
Popularity: 5% [?]
Posted in 
Cool, helps a lot, this is by far the best solution, just one q:
--February 13, 2008 @ 10:29 amdoes it work with category children as well?
Should i use a javascript just like superfish in premium news theme? Or only the script aboves? Thanks before darren. Ops, when mimbro pro will be release? I’ve take a look several premium news theme, but i thought mimbo has a unique value, very very user friendly.
--February 17, 2008 @ 12:20 pmThe one area I struggle with is the whole navigation for WordPress (as stated in my blog) and how it can be integrated as a CMS properly. So what do we do back-end for the two-tiered conditional navigation to work? Do we organise it by the page parent or page order?
Thanks and sorry if this seems a little off topic or simple question
--February 26, 2008 @ 10:08 pmSo what do we do back-end for the two-tiered conditional navigation to work?
Simply create pages (and subpages) and the nav code from the article will scale accordingly — that ease of use is what makes WP a great CMS for small and medium sized sites.
--February 26, 2008 @ 11:00 pmGreat trick. Thank you…
--March 12, 2008 @ 7:08 amHi Darryn
Thanks for the code, great stuff.
Just would like to know how to make the php code return a three tiered navigation.
Once again, thks heaps for your tutorials
Regards
--March 15, 2008 @ 8:37 pmSaid
Opps for the type on your Name
Regards
--March 15, 2008 @ 8:39 pmSaid
Wow!! Amazing tip :)
--March 19, 2008 @ 11:38 pmmmm… it’s possible the same thing with categories and subcategories?
Great tutorial,thanx
--April 2, 2008 @ 7:15 am