HeadsetOptions Web Design, SEO, WordPress, Etcetra

As this tutorial runs longer than we initially anticipated, we will break section 3 further into three sub-sections.

In our ongoing exercise to learn the nuts and bolts of a magazine style WordPress theme, we examine what has become by far the most ignored part of a theme design, the navigation menu.

As important as they are, they are often found floating in the header or worse the sidebar and almost never used to its fullest as rightfully should. Today we will change that. We are dedicating three sections just to discuss navigation menus, its varied uses, and the various methods of using it. So why wait, let’s get started.

Why are Navigation Menus Important?

There are three important roles of navigation menus, they are listed below in no particular order:

• It acts as the gateway to sections of the site you want your visitors/users to explore
• It aids as a visual sitemap when designed correctly
• It enhances usability of site and helps SEO when used correctly

How are Navigation Menus in Magazine Style Themes Different from Regular Themes?

If you notice closely, most regular themes have pages listed in blocks in the header or the sidebar and call it navigation. For all practical purpose, it works, and we are all complacent with it. In WordPress, there are numerous pages that are dynamically created like the archives, category pages, paginated pages, search pages and so on that are traditionally are not considered pages when you create a list using the template tag such as the one below:

1. wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’);

In fact, the above code does not display any child pages!

Magazine style themes overcome this limitation (or at least they should if they are charging you money) by using one or more of the following:

• Second level navigation
• Conditional menus
• Intelligent dropdown/slidedown menus

A good example of a magazine style themes using second level navigation to include category pages is WP Magazine and both archives and categories as dropdowns is Solostream 3 both by Solostream.

An example of magazine style theme using conditional menus is my own semi-magazine style theme Black+White, see the demo and click on either [Support] or [Archive] and a Submenu will show up in the navigation bar to the right.

The third and the most sort after navigation style is the intelligent dropdown or more appropriately “slidedown” menu using CSS and JavaScript (for IE). Examples include News by Bence Kucsan and the very popular Revolution by Brian Gardner.

There is no one method that is better than the other, it’s a matter of personal preference and site specific needs.

How do we add these Functions to our Existing Designs?

Since our tutorials are running longer than expected, we will focus on just the “second level” menu in this section.

Second Level Menu

The second level navigation is by far the easiest, tried and tested method of the three. Section 3.1 will cover the second level menu coding and it’s usage.

To add these second level navigation, we simple use the tags that generate a string of categories (or archives) and place them beneath the main navigation menu and style appropriately.

For example, to add a list of categories below the main menu, add the following code in the header.php (assuming your main menu is in the header):

1. wp_list_categories(‘title_li=&hide_empty=0′);

Note: the hide_empty tag unhides or hides unused categories.

Where to place the tag? Right below the template tag for page as described in the example below.

If we revisit the theme we created from the last exercise you will note that the main menu is displayed in the header in a single row.The code for this menu (simplified) looks like below:

1. <div class=”wrap menu”>
2. <div class=”right rss”>
3. <a href=”<?php bloginfo(‘rss2_url’); ?>” title=”RSS Feed”><img src=”<?php bloginfo(‘stylesheet_directory’); ?>/images/rss.gif” alt=”RSS” /></a>
4. </div>
5. <ul>
6. <li class=”<?php if ( is_home() or is_archive() or is_single() or is_paged() or is_search() or (function_exists(‘is_tag’) and is_tag()) ) { ?>current_page_item<?php } else { ?>page_item<?php } ?>”><a href=”<?php echo get_settings(‘home’); ?>”>Home</a></li>
7. <?php wp_list_pages(‘sort_column=menu_order&depth=1&title_li=’); ?>
   </ul>
8. </div>

We will add the category code below it to generate the second layer menu. The code to add will look something like this:

1. <div class=”subwrap submenu”>
2. <ul>
3. <?php wp_list_categories(‘title_li=&hide_empty=0′); ?>
4. </ul>
5. </div>

To easily style this second level, use the existing style for the main menu and make minor changes to the display (colors and such). In this case, we will enclose this second level in a div called “subwrap submenu”, the main menu is within a div called “wrap menu”.

Next, we open our demo theme’s style.css file and look for classes that define the main menu and copy it. In our case it was .wrap and .menu and liked like below:

#topbar .wrap {
background: #790000;
height: 51px;
width: 958px
}

And

.menu {
background: #F7F7F6;
height: 34px;
line-height: 34px;
border-left: 1px solid #D6D6D6;
border-right: 1px solid #D6D6D6;
border-bottom: 1px solid #D6D6D6;
padding: 0;
margin: 0;
}

.menu a {
color : #74797E;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.menu a:hover, .menu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.menu ul {
list-style : none;
padding : 0;
margin : 0;
}
.menu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}

Paste this style information just below the above code within the style.css and replace .wrap with .subwrap and .menu with .submenu; the end result with a little mod will look like this:

#topbar .subwrap {
background: #fff;
height: 51px;
width: 958px
}
.submenu {
background: #fff;
height: 34px;
line-height: 34px;
padding: 0;
margin: 0;
}

.submenu a {
color : #790000;
background : inherit;
text-decoration : none;
padding: 0 10px 0 10px;
line-height : 23px;
}
.submenu a:hover, .submenu .current {
color : #000;
background : inherit;
height : 23px;
text-decoration: underline
}
.submenu ul {
list-style : none;
padding : 0;
margin : 0;
}
.submenu li {
float : left;
margin : 0 0 0 0px;
display: inline;
}

/* Override Children */
.children {display: none;}

Note how I made a few changes to .subwrap and .submenu to differential it from the main menu, very subtle change though. Also note how I added a style at the very end to prevent the child(ren) category(ies) from being displayed.

That’s it, check the result, a second level menu using categories.

Next time, we will discuss conditional and dropdown/slidedown menus. Enjoy!