Creating Two-Tiered Conditional Navigation in WordPress

November 29, 2008 · Print This Article

If you want a common navigational scheme, with parent pages on top and child pages (if they exist) on bottom in wordpress.

Then we’ll need code follow to help us:

  1. query the page
  2. determine if there are child pages
  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.


Your choice for site templates and wordpress themes

Comments

Got something to say?

You must be logged in to post a comment.