Wordpress navigation can be tricky to create and sometimes we are not able to create it as we want. Problems starts if our website structure forces us to display categories, pages and home buttons and keep the active status even if deep into the category strucutre. This tutorial will explain how to acomplish just that.
Looking for demo? This website is the demo of this tutorial.
What we are going to create
We are going to create a custom wordpress navigation similar to this one on this website. One navigation containing home page button, page buttons and category buttons and active state.
Our navigation structure
We would like to display the home button followed by pages, followed by our main categories. The navigation structure code is:
<ul id="nav">
<li <?php if (is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('url'); ?>">Home<a><li>
<?php wp_list_pages('title_li=&include=10,11,12'); ?>
<?php wp_list_categories('orderby=order&title_li=&depth=1&hide_empty=0'); ?>
</ul>;As you can see, first LI tag is to display our home button and if we are on home page, manually assign the class called current_page_item. Next we want to display 3 pages (in this case the pages with id 10,11,12) and next we would like to display our main categories and we do so by setting depth to 1 (display only main categories).
Wordpress Home Button - if (is_home())
Nothing complicated here. This button will link to our home page and will have the CSS class current_page_item as explained above. To make the active state we just need to define the style in our CSS, that we want for this class.
Wordpress Pages - wp_list_pages();
We display here our pages and to make the active state for those buttons will be defined again under the class current_page_item (class generated by wp_list_pages(); function and assigned to LI tags), the same as for our home page button.
Note: To make sure our button is active even if we are on the child page and childs of the child, need to style the same "current_page_parent" and "current_page_ancestor".
So our stylesheet reads as follows:
#nav.current_page_item a,
#nav.current_page_parent a,
#nav.current_page_ancestor a {
/* our styles for active state goes here */
}Wordpress Categories - wp_list_categories();
Situation gets more tricky if it comes to categories. We have got our main categories displayed and it seems easy to create the active state. The style we would need to define is current-cat (generated by wp_list_categories), but we are not going to do it. Why? This will allow us to create the active state only if we are on the main category page, but we want to keep the active state even if on child category and even if on child category post.
To do so, we need to download the plugin called Show Active Category from Screenshine.
Upload it to your plugins folder and activate it in your wordpress control panel.
Now go and edit this plugin and locate the following line:
if ( is_single() ) {and replace it to look like this:
if ( is_single() || is_category() ) {This will allow us to display the active class on our button if we browse post or category. Now our buttons will have "active_category" class assigned to anchor element.
Note one important thing. The class is assigned to the "a" element not "li" tag (like it was for pages), so adjust you CSS to fit just that.
Our CSS looks now:
#nav li.current_page_item a,
#nav li.current_page_parent a,
#nav li.current_page_ancestor a,
#nav li a.active_category {
/* our styles for active state goes here */
}More about Active State Buttons
If this still if not enough to control your categories, you can use display category order plugin to take control over the category order.
If this is not enough and your navigation requires advanced styling, you will be forced to use some CSS tricks. As we are unable to assign any CSS id to the list items we will have to use multi-class union CSS trick. More info can be found on this tutorial: Applying style to an element only if multi-class union exist.
Conclusion
As you can see, we have a control over the wordpress navigation and things aren't that complicated if we know what we are doing. If you use different techiniques or recommend to do it a little bit different (improve it), feel free to leave a comment. I hope you like it.
Agh, and don't forget to share this tutorial with others. ;)
