Thesis theme – How to add another menu

I recently wrapped up the development of a new theme for Cash Money Life based on the Thesis theme.  One of the requirements was to have a primary menu at the top, and a secondary menu below the title.  The primary menu would contain page links, while the secondary menu would contain categories, page links, etc.  Here’s screen shot of what we ended up implementing:

This was the first time I had tried to add another menu with Thesis.  The trend of having two menus is becoming pretty prevalent in the blogging world, so I thought I would share a little “inside info” info on how to add another menu using the Thesis theme.  The menu I’ll add is a simple menu with very basic styling.  Of course depending on your knowledge of CSS, the possibilities are endless on how the menu could look.

Adding the menu

To add the new menu, we’ll add a new custom function and hook;  The code looks as follows:

/* Add the top navigation menu */
/* Links for top menu will need to be manually added here, since this menu isn't supported by Thesis */
function topnav_menu() {
?>
<ul id="topnav">
<li><a href="http://www.cashmoneylife.com">Home</a></li>
<li><a href="http://www.cashmoneylife.com/about">About</a></li>
<li><a href="http://www.cashmoneylife.com/archives">Archives</a></li>
<li><a href="http://www.cashmoneylife.com/about">Contact</a></li>
</ul>
<?php
}
add_action('thesis_hook_before_header', 'topnav_menu');

This code should be copied and pasted into your custom_functions.php file. There are multiple ways to edit your custom_functions.php file. I prefer to just ftp to my server using the FireFTP Firefox Addon and edit the file using a text editor (I use Notepad++). You can just add the code at the bottom of the file and save it.

You’ll now have a “menu” displayed at the top of your blog, but it will be pretty ugly, since we haven’t styled it.

Styling your menu

Now that we have the code and hook functioning correctly, let’s make it look nice. As I mentioned earlier, I’m just going to use a very simple style. Gray background, black text, and left justified (the menu on Cash Money Life is right justified).

Here’s the CSS:
/* Top Nav bar */
.custom ul#topnav {
border-style: none;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
background:#E4E4E4 none repeat scroll 0 0;
width: 100%;
float: left;
}
.custom ul#topnav li { float: right; padding: 3px 10px 3px 0px; }
.custom ul#topnav li a { font-size: 1.1em; color: #000000; }
.custom ul#topnav li a:hover { text-decoration: underline; }

I won't go into the gory details on how the CSS styling actually works, but suffice it to say it styles our "topnav" menu with a gray background (#E4E4E4), makes the menu go across the whole width of the screen (width: 100%), and makes the link colors black (#000000).

The above CSS code should be copied and pasted into your custom.css file. Where you paste it doesn't really matter, although I prefer to organize my CSS files in same order as the HTML.  So this would go at the top.  Save the file and reload your website and you show now have a nicely formatted menu at the top of your blog!

How you use this menu is really up to you, but a common use is to use the top menu for page links such as "Home", "About", "Contact", etc.  The secondary menu, or Thesis default menu, is then used to link to category pages.