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.
Leave a Reply
This site uses Akismet to reduce spam. Learn how your comment data is processed.
Is it true that wordpress can’t automaticly mark the current category of a single post with the “current-cat” class? Unbelievable. So you use the solution you described on top? nice.
Thank you so much for this bit of code. Works like a charm!
I am glad it helped – I have used it on a lot of sites.
Thanks for postings this – work perfectly 😀
Thanks so much for this! I’ve been able to get it working for all child pages, whatever the level of the child within the hierarchy. That’s brilliant, because I haven’t been able to achieve that for any grandchild-level pages with any other method.
I need some help with posts, however.
I have a bunch of different main sections in which a post might appear, such as “News”, “Blog”, “Reviews” etc. Currently, whichever section I’m in, once I drill down to an individual post, the “Blogs” section name is highlighted in my main nav, due to (I think) the ((is_single()) ? “blog” : “blog”))) code in your body ID.
Is there a way to distinguish between posts in different sections? I’m guessing I need to alter or add to the bit of code I highlighted above, but I don’t know enough PHP to be able to do this for myself. Any help would be hugely appreciated.
Not to worry – I figured it out using in_category()
Thanks heaps!
Thank you for this. I have been trying to find something like this for a while. I am having an issue with very long page titles not working as ids, any suggestions?
Send me over an example URL and I will take a look (use the contact form)
Hi,
A nice post. By the way, how to apply the post for the category pages. For example, when I clicked a category, the category stays highlighted. Thanks.