Making A Two-Tiered Navigation in WordPress

Aside from the wonderful WordPress 3.0 navigation, a lot of people really like the two-tiered navigation. So, what is it? The two-tiered navigation is a horizontal navigation that the first layer on top is the parent pages and the second are the child pages. When you click the parent page, the child pages will appear below the parent.

In order to successfully make a similar two-tiered example like that of above, you will need to insert some html, and WordPress php functions to your layout’s template, and the CSS to help with that sheet. However, this tutorial is written for you as a step-by-step process to make it easier to understand.

Step 1. You will want to keep things simple and define our tiered navigation with its own list ID named ‘tiered-nav.’ Since this is the beginning, add the php function to call the parent page.

<ul id="tiered-nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>

Step 2. After this, you want to add the php if function statement to connect the parent page and children pages, so it will connect to the correct section. For example (using the picture example included with this tutorial) if you have About, Freebies, and Contact for parent pages, you do not want to click on Contact and its child page is Site History (which is suppose to be in the About section.)

<?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) { ?>

Step 3. You want to make sure to add the second list that will call your child pages. To keep organized, especially when using CSS later, this list unordered list ID is named ‘sub-tiered-nav’.

<ul id="sub-tiered-nav">
<?php echo $children; ?>
</ul>

Step 4. Not done yet! You have some php functions to close. The if php statement needs to be closed and the whole function that was used in creating the two-tiered navigation needs to be closed.

<?php } else { ?>
<?php } ?>

Step 5. To get this code looking like a two-tiered navigation, you will have to specify in your CSS what to do in order to make this happen. Right now, you have two unordered lists.

/* Two Tiered Navigation */

* {
	margin:0px;
	padding:0px;
	}

/* Top Tier */

#tiered-nav {
	background:#C1DBE9;
	border-bottom:1px solid #FFFFFF;
	height:32px;
	}

#tiered-nav li {
	margin-right:25px;
	}

#tiered-nav li, #sub-tiered-nav li {
	float:left;
	list-style:none;
	}

#tiered-nav a, #tiered-nav a:visited {
	color:#FFFFFF;
	text-decoration:none;
	font-weight:bold;
	}

#tiered-nav a:hover, #tiered-nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#tiered-nav li.current_page_item a,
#tiered-nav li.current_page_item a:visited
        {
	background:#073447;
	}

/* Second Tier */
#sub-tiered-nav {
	background:#E3EFF7;
	border-top:2px solid #BBD8E7;
	border-bottom:2px solid #E3EFF7;
	height:28px;
	}

#sub-tiered-nav {
	border-right:1px solid #073447;
	padding:0px 7px;
	}	

#sub-tiered-nav a, #sub-tiered-nav a:visited {
	color:#073447;
	text-decoration:none;
	font-weight:bold;
	}

#sub-tiered-nav a:hover, #subnav a:active,
#sub-tiered-nav li.current_page_item a,
#sub-tiered-nav li.current_page_item a:visited {
	text-decoration:underline;
	}

Of course, you can use your own colors to pull off this effect and insert images for backgrounds.

Please sneak on over to Darren Hoyt to thank him for the original code for this tutorial.