Highlighted Navigation with WordPress
Ever wonder how to automatically highlight your tabs or navigation depending on the category, page, or post you are on? Wonder no more! To make this work, there are three bits of code you will need:
- The header code to control the body ID (and to tell us what page we are on)
- The navigation code
- The CSS to control the highlight
For this example, I will use this web site as an example.
The header code
ID;
$parent = 1;
while($parent) {
$page_query = $wpdb->get_row("SELECT post_name, post_parent FROM $wpdb->posts WHERE ID = '$current_page'");
$parent = $current_page = $page_query->post_parent;
if(!$parent)
$parent_name = $page_query->post_name;
}
?>
<body id="">
The XHTML code (navigation)
<div> <ul> <li><a href="/index.php">Home</a></li> <li><a href="/blog/">SDAC Blog</a></li> <li><a href="/web_solutions/">Web Solutions</a></li> <li><a href="/network_solutions/">Network Solutions</a></li><li><a href="/user_interface_solutions/">User Interface Solutions</a></li> <li><a href="/custom_solutions/">Custom Solutions</a></li> <li><a href="/search/">Search</a></li> </ul> </div>
The CSS code
#home #nav-home, #about_us #nav-home, #contactus #nav-home, #faqs #nav-home,
#disclaimer #nav-home, #search #nav-search,
#blog #nav-blog, #web_solutions #nav-websolutions, #network_solutions #nav-networksolutions,
#user_interface_solutions #nav-userinterfacesolutions,
#custom_solutions #nav-customsolutions, #tos #nav-home, #sitemap #nav-home {
background:url("images/tabs/active_tab_bg.gif") repeat-x;
border-right:1px solid #676e78;
}
#tabs li:hover, #tabs li:hover a {
background: url("images/tabs/active_tab_bg.gif") repeat-x;
color:#212933;
}
General information
When you view the code for a page, you will notice that the header code will find out if the page viewed is infact a page. If it is a page, it gets the page parent (I use parent and child pages in my web site organization). The tabs are created with unique li IDs. So that a combination of #home (the body ID) and the #nav-home (li ID) will show as a highlighted tab. With this example, this case will only occur when we are on the home page because #home is a page (the home page) so the home tab will be highlighted. When we click on “SDAC Blog”, the body ID will then be #blog, so now the #blog #nav-blog combination will force the “SDAC Blog” tab to be highlighted. Take a look at the CSS to see where to define the “cases”.
Hopefully this took some of the mystery out of working with WordPress, navigation, and how to put everything together.