Creating Two-Tiered Conditional Navigation in Wordpress

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.

转载自：http://www.darrenhoyt.com