MoshuBlog.com

Welcome back! I hope you enjoyed your previous visits. Let me know how can I help you to find what you were looking for. Don't forget to download the Best 7 WP Tutorials in this ebook.

A while back I promised to write the second part of the Two level menus article. Today Susan reminded me about it, so here we go: Part 2 - styling and highlighting the two level menu.

In the examples I will refer to the same demo installation as I did in Part 1. (You can right click the link and open it in another tab to be able to follow the explanation.

You remember, we created a top horizontal menu using the Fold Page plugin and using this code:

<?php wswwpx_fold_page_list ('depth=1&sort_column=menu_order&title_li='); ?>

Eventually, on the Demo site I modified this to include a “Home” link and to have one of the categories also included (as explained in another post about Pages and Categories).
This is the modified code used on the demo:

<ul>
<li id="one"><a href="<?php bloginfo('home'); ?>">Home</a></li>
<?php wswwpx_fold_page_list ('depth=1&sort_column=menu_order&title_li='); ?>
<li id="five"><a href="<?php bloginfo('url'); ?>/?cat=18">Hidden</a></li>
</ul>

You can notice I have added ids to the first and last li items. Let me explain it but before that comes the disclaimer: since I am not a real coder my solution is not perfect and is not really dynamic; more knowledgeable coders, probably, could come up with a more elegant solution. However, it worked for me. The explanation:
I have five items in my horizontal menu: Home, About, Archives, Contact, Hidden. I know it will not change, so I can put this code in the head section of the header file:

<?php
if ( is_home() ) { $current = 'one'; }
elseif ( is_page('2') ) { $current = 'two'; } //id of the About page
elseif ( is_page('6') ) { $current = 'three'; } //id of the Archive page
elseif ( is_page('16') ) { $current = 'four'; } //id of the Contact page
elseif(get_the_title($post->post_parent) != the_title(' ' , ' ',false)) { $current = 'post_parent'; }
elseif ( is_category('18') ) { $current = 'five'; }//my hidden cat
?>

Now we are prepared to style our menu. The code above will set the “current” class depending on which page/Page we are on. For the styling we also have to remember that the Fold Page plugin adds a special class to the parent Page when we are on the children Pages. You can check the source code on the demo: when we are on the sub-Pages of About the li item around this parent will get the “current_page_ancestor” class (pretty much self-explanatory…).

Now will add a bit of CSS into our head section:

<style type="text/css">
#<?php echo $current; ?> {
background-color: #ff0000;
padding: 0 16px;
}
#nav .current_page_item {
background-color: #6eaae9;
padding: 3px 8px 2px 8px;
}
.current_page_item, .current_page_ancestor {
background-color: #ff0000;
padding: 0 16px;
}
</style>

A few quick notes to this: lines #2-5 set the background colour for the “current” page/Page.
Lines #6-9 set the background for the sub-Pages in the sidebar - my sidebar is in a div id=”nav”!
And, finally, the last lines will set the colour for the “ancestor Page (in the case of the Demo - About) and for the current page items in the top menu.
Of course, you can use all your colours and style elements that fit into your theme and make it part of your design.

In case you want to see the whole header.php used in demo - here is the whole code.

Basically, that’s all. As I said, it’s more like a hack than elegant code but it works well with a horizontal menu that is not going to change too much in the future. When I needed a quick fix for a blog with a similar menu system, I found the components for this solution in the Codex and in the WP support forums… I just put them together.
If you have suggestions to improve it, to make it more dynamic, feel free to take it and make it better. And if you just need a quick fix - enjoy it.