In this tutorial we’ll add a category navigation tab to the standard navigation options provided with the Slate theme. Slate comes standard with a home tab, pages tabs, and a RSS tab. We will add a category button that links to a category archive page. This is a powerful way direct traffic to pages you feel are important.

To make these changes, we are going to start digging into the code behind the WordPress Slate theme. If you have not already downloaded this theme, it is available here at Slate theme. The topics we will be covering in this tutorial will work with other themes as well but may require additional manipulation. I recommend that you download the Slate theme to practice making these changes and then introduce them into your native theme.

Let’s look at the code that makes up the navigation bar in Slate. It can be found by opening your WordPress admin panel and selecting Editor from the Appearance section. On the right side of the screen you will see a list of the php files, and style sheets that make up your theme. If you are working with the Slate theme, select the file titled Header, with the file name header.php. Look for this code:

<div id="nav">
     <ul>
		<li class="left <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a href="<?php echo get_option('home'); ?>/" title="<?php _e('A link to home page', 'default'); ?>"><?php _e('Home', 'default'); ?></a></li>
		<?php wp_list_pages('sort_column=menu_order&depth=1&title_li');?>
                <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
     </ul>
</div>

This is the code that makes up the navigation bar in the Slate theme. Let’s dissect it a little so we understand what is happening before we start to mix it up. The overall structure of the navigation bar is as follows:

<div id="nav">
 <ul>
	<li></li>
	<li></li>
	<li></li>
</ul>
</div>

The container identified as “nav” acts to position the navigation bar, which consists of an unordered list, where each list item represents one navigation tab. Okay, that was a mouthful, but really, it’s not that confusing. Just remember that when we create a new navigation tab, we will be adding a list item to the list above.

Now let’s look at the existing navigation options. The first list item represents the link to your blog page.

<li class="left <?php if ( is_home() ) { ?>current_page_item&lt;?php } ?>"><a title="<?php _e('A link to home page', 'default'); ?>" href="<?php echo get_option('home'); ?>/"></a></li>

It’s class is “left” because I wanted to to leave a simple way for someone to shift the row of tabs over depending on the requirements of their design. The second part of the class reference states that if the browser is showing the home page, then the class is current_page_item, which means the tab will display a solid color. The link describes the destination as “home” and the title as “home”:

<a title="<?php _e('A link to home page', 'default'); ?>" href="<?php echo get_option('home'); ?>/"></a>

Moving on to the next list item we see:

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

This line of code is a WordPress Template Tag that calls up a list of all available pages on your blog. It’s the same list that is used to post a list of pages in the sidebar if you install the “pages” widget. In this case we have deactivated the title by calling up the title parameter and then leaving it blank.

The final list item is a link to your blogs RSS feed.

<li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>

Now let’s add a navigation tab with a link to a category page. This is particularly useful if you have a blog with several primary concentrations. For instance, if you blog about beer, and your favorite topics are IPAs and Stouts, you might make a category tab for each of them. When someone clicks on the IPA tab, they would be directed to a page with all of the posts that you categorized under IPA. If they really just care about Stouts, then off they go to that category.

There are some very important steps you must take before creating this tab:

• In your admin dashboard, click on general under the settings section. Make sure that the ‘WordPress address’, and ‘Blog address’, match your blogs root url.

• Sellect the Permalinks option, also under Settings. Select ‘custom structure’ and enter /%postname%/. This will make your post, page and category urls much simpler and more attractive. It will also allow us to call up those pages using the slugs that we provide.

• Under the post section, select Categories. Create the category that you wish to use, and provide a url-friendly slug. It is best to use all lowercase and remember it must contain no space.

Now we are ready to add your new navigation tab. It will look like this:

<li class="<?php if (is_category(category_slug) ) { ?>current_page_item>?php } ?>;"><a href="<?php bloginfo('wpurl'); ?>/category/category_slug/">category_title</a></li>

Where category_slug is replaced by the slug that you provided when making your category, and the category_title is replaced by the tab title you wish to display. This piece of code can be placed between any of the other list items, so long as it remains within the ul (unordered list) tags. Here is the code from the demo page:

<div id="nav">
      <ul>
	     <li class="left <?php if ( is_home() ) { ?>current_page_item<?php } ?>"><a title="<?php _e('A link to home page', 'default'); ?>" href="<?php echo get_option('home'); ?>/"></a></li>
             <?php wp_list_pages('sort_column=menu_order&depth=1&title_li');?>
	     <li class="<?php if (is_category(category1) ) { ?>current_page_item&lt;?php } ?>"><a href="<?php bloginfo('wpurl'); ?>/category/category1/">Category 1</a></li>
	     <li><a href="<?php bloginfo('rss2_url'); ?>">RSS</a></li>
     </ul>
</div>