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 && is_page()) { ?>
<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
10:29 am
Cool, helps a lot, this is by far the best solution, just one q:
does it work with category children as well?
12:43 pm
I was wondering about categories too. I’ve tried replacing posts with categories everywhere in the code but that did not work. Any ideas or solutions? Thanks.
10:46 pm
Yes, This is really nice.
Especially it is completely php driven, and no javascript.
But it would have been complete if it could do the same for WordPress categories as well..
Anybody figured out how to do it?
12:20 pm
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.
10:08 pm
The 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
11:00 pm
So 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.
7:08 am
Great trick. Thank you…
8:37 pm
Hi 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
Said
8:39 pm
Opps for the type on your Name
Regards
Said
11:38 pm
Wow!! Amazing tip :)
mmm… it’s possible the same thing with categories and subcategories?
7:15 am
Great tutorial,thanx
9:39 pm
Thanks Darren. This is a superb tip. I wanted to do the same for my categories list.
Is there a way I can change the code to display categories instead of pages as mentioned in this post.
Would really appreciate it if you could suggest something as I am not too good at php and cant really make out how to display categories instead of pages. Also, what corresponding changes would take place in the CSS code?
Thank you!
2:16 pm
Was thrilled when this worked! Great Stuff!
Sadly it turns out I also need this to apply to the Categories and Sub-Categories rather than Pages….grrr
Did anyone find a solution I’ve been looking for ages now?
Thanks
10:05 am
Hi Darren – Using your generously supplied code, I have a problem where the second level of navigation is displayed on the 404 and search results pages where there were no successful results for a search. Any ideas on why that might be happening? Any insight into how it might be remedied?
1:43 am
Hi Liam, Your question is pretty old, but I’m wondering if you were able to solve the problem. I’m experiencing what I believe is the same thing. On a 404 page, the entire navigation (parents and children) are being jammed into the sub-navigation. Any help would be appreciated!
Thanks
2:35 am
Yeah, I’m having the same problem. If it’s a 404 or a search page with no result it breaks and lists all the pages.
5:42 pm
Did anyone figure this one out?
6:33 am
I know this is some time ago but thought I’d just share my answer to this.
If you modify the line:
if ($children) { ?>
to be:
if ($children && is_page()) { ?>
it seems to work. Hope that helps.
2:28 am
Thanks for this great plugin. Facing the same problem as Liam Dempsey. Any idea how this can be solved? Additionally, possible to make the subpage appear on hover?
Thanks
8:55 am
Hi, i know this is going to sound stupid, but where in the template do i place the above php? Thanks for your help.
8:23 am
Keep up the good work mate :)
thanks .
12:56 am
my blog theme has the header script looking like this
<meta http-equiv=”Content-Type” content=”; charset=” />
» Blog Archive
<meta name=”generator” content=”WordPress ” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
<link rel=”pingback” href=”" />
<body >
<a href=”/”>
<a href=”/”>Home
not sure what to change.
12:58 am
what do i change in the below code to get this to work.
<meta http-equiv=”Content-Type” content=”; charset=” />
» Blog Archive
<meta name=”generator” content=”WordPress ” />
<link rel=”stylesheet” href=”" type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/rss+xml” title=” RSS Feed” href=”" />
<link rel=”pingback” href=”" />
<body >
<a href=”/”>
11:24 am
Hi, great tutorial –
was just wondering how you managed to get it so that the dividing rule between links on your secondary navigation is omitted after the final link (in this case ‘Locations’)?
Thanks!
7:53 pm
Where do I put this code?
Thanks,
Ben
1:46 pm
Thanks for the php etc.. installed and worked first time…
was wondering how to have a third tier???
4:13 pm
Great sharing of code, thanks so much. I made one little addition because my pages were no longer showing in the correct order. I changed this code…
…to this…
Hope that helps others:)
3:32 pm
i was wondering …is there a way to get your code to put image for the right end and left end and middle ? I could not figure out how to get it to look that way with images.. .or where to put that in the CSS.
this is what i am trying to do ..thanks
http://www.cg-hq.com/navbar.jpg
4:16 pm
…uh, the code tags appear to not be working as expected….let’s try again…
I changed this…
(’title_li=&depth=1′);
to this…
(’sort_column=menu_order&title_li=&depth=1′);
4:50 pm
Great post, Darren! You just helped me out of a jam. Thank you!
3:11 am
Can the same menu effect be achieved with categories, maybe using get_category_parents?
What I would like to achieve is a menu style similar to the JoomlaPanel menu at http://joomlapanel.com/, but with categories rather than pages.
6:29 am
I can’t seem to make it work. It doesnt become 2-tier but 1-tier where the subpage link appeared next to the parent page.
I have this code in the header.php .
<a href="" title="" id="home">Home
Where do I modify to become the 2-tier code?
Thanks for any help. Your response greatly appreciated.
6:31 am
<a href="" title="" id="home">Home
6:32 am
The code doesnt appear in my comment here: Try again.
<a href=”" title=”" id=”home”>Home
1:18 am
great article, thx for your tips!
9:47 pm
Hey -
Loved this tutorial…and it works perfectly! However, when I tested it in different browsers (ie – Safari) the parent page didn’t stay highlighted. Any ideas?
Thanks!
11:52 am
Really nice tutorial to implement navigational menus just like a full blown CMS. If used correctly with proper CSS, no one find the site is based on wordpress. I was thinking about switching to joomla just for this type of navigation. But it is not a blog engine. So I hesitated. Today I found this post. I’m already started changing my blog navigation. I know it can be done, but going thru all wodepress codex and API will be highly time consuming for a seasonal developer like me.
3:34 am
how to keep from listing child pages of index page?
5:51 pm
Nice code, thanks :)
is there a way to center the text in the bar? have tryed different types of code in the css but no luck.
Regards
12:28 am
thank u
3:57 pm
Hey Darren,
Is it possible to create a two-tiered navigational menu in wordpress where the parent is a page and the children are specific categories?
Thanks.
3:30 pm
That was too easy. Thanks!!
5:42 pm
This worked very nicely for me – thanks for sharing!
10:43 am
This is fantastic. Works awesome for what I was trying to emulate.
Quick question. My “parent” links are in the header, while my “child” links are in the sidebar. Works fantastic. My one question was if there is a way to get the “parent” link also in the sidebar so that if they want to get back to the parent page they don’t have to click on the links in the header. Does that make sense?
Here is the site I am working on.
http://ccsf.calvaryprescott.com
10:51 am
I’m releasing a project (”framework”, I guess) in the next couple weeks that includes nav code that also pulls the parent link with the rest of the sidenav. Stay tuned.
3:06 pm
Darren,
Did you release this project? Working on something that it is more crucial on, hoping that you posted it and I missed it. Thanks.
Jonah
3:51 am
Let’s say I’m trying to make this work with Mimbo 3.0… what exactly should I NOT change to maintain the built-in dropdown menu?
2:29 am
Thanks so much for this, super simple to understand and a cinch to implement. I really appreciate it!
5:40 am
Great post, thanks so much, just what I’ve been looking for
4:27 pm
D~
Thanx for increasing my understanding of how to initiate navigation for child pages.
I did not code character for character but used only those parts for the result I wanted.
Your tut was very helpful.
~DT
3:32 pm
It simply doesnt work for me. I have copied and pasted the code exactly and am getting duplication of the parent pages in both tiers of the navigation. Any Ideas?
2:48 am
Superb thinking of giving it a try soon. found it at the right time.
6:25 am
Good!!! But for the categories ????
We can to see the code for the categories,please
Thank you
9:53 am
hi
great menu system — just one query — how do you CENTER the top and submenu items in the horizontal list rather than being left aligned?
also – instead of a background colour used to highlight the selected parent link – -how do you use a colour for the link text instead which stays with that same colour even if a child link is selected?
thanks
phil
2:41 am
Hi,
Can you help me how the create the same menu for category & sub category……
Regards,
SaiSat
7:51 pm
Thanks for the tutorial. It seems like this type of navigation is becoming pretty common on various websites and blogs.
3:53 am
thx for this, but it seems like the subnav breaks for me. Cant see why :S
What year was this tut posted?
5:03 pm
i am wondering if you have some tips for drop down thesis nav bar too? i am searching it from past few days ..dint find any single easy post
3:01 pm
Nice, that’s the simplest way of doing it I have seen so far.
1:17 pm
Thank you thank you thank you! I was struggling for about an hour thinking about how to do this sub-navigation and your article was perfect. Thank you!