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.
Follow me on Twitter
2:38 am
Thanks This helped me
5:29 pm
Just wondering if anyone ever found out how to resolve the issue with the menu being duplicated when you make a search for something that is not on the site. Any help would be appreciated.
J
4:48 am
Thanks for this tip. I’ll have to try this later
4:44 am
This is great menu for a PHP, not a manually customized java. Thanks for the input.
8:09 am
Ooh thanks for this post, the php has helped me no end!
9:34 pm
Maybe a solution to the problem that Liam Dempsey asked about.
Change the code at line 8 from
if ($children) { ?>
to
if ($children && !is_404()) { ?>
Seems to work fine for me now.
Cheers
9:43 pm
Thanks, that works great for 404 pages. How do you do that for empty search results as well?
5:39 pm
Hi I’m having the same problem, Search pages are duplicating the menu items. Some help on this would be great…
Thanks
6:06 pm
Just figured it out.
replace the line with
if ($children&is_search()&is_404()) { ?>
Matt
6:52 pm
Hi :)
I’ve got a problem with this method :P
If i write a news thread on my “test_a” category i doesn’t see the “test_a” category same with the thread on my “navi” i’ve got just the “home” option in category
//
i got 3 category to try :
1.Home
2.test_a with two sub category : test_a1 and test_a2 with a small text
3.test_b with two sub category : test_b1 and test_b2 with a small text
do u know this problem ? :)
12:20 pm
thank you man! bright solution
3:27 am
Thanks for this – very helpful in making the site that much more refined :)
6:39 pm
Creating Two-Tiered Conditional Navigation in Wordpress was a very helpful post. I’ m wondering if there is a way to do this with categories? I know how to get the top level parent categories the top row, but I’m unsure how I might have only child pages show in the second line – if there are child pages as you’ve done for pages here.