Anatomy of a Magazine Style Premium WordPress Theme - Part 3.1 “Navigation – Second Level Menu”

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

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. <?php 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”.

02.11.2008 - 7:22 pm - Design, How to, Resources, Tips - 323 views -