How to Use WordPress Navigation Menus in Thesis

If you don’t like to read much, just skip ahead to the code below. I like to ramble sometimes.

So, let’s talk about the WordPress navigation menu system that was introduced around the release of WordPress 3.0.

If you’ve been using Thesis for a while, you will be familiar with how Thesis handles the navigation menu. It’s really easy to add pages or categories to your navigation and change the order if you’d like. You can also have instant drop down menus when you add child pages. However, when you stack this up against the new WordPress menu system, the Thesis menu doesn’t have as many features and the WordPress menu offers a lot more flexibility.

In my experience, it really depends on the project I’m working on as to whether I will use the Thesis navigation menu, or the WordPress menu. In my opinion, here are some of the benefits to using the WordPress menu:

• You can create multiple menus
• You can mix and match between pages and categories and sort them any way you want
• You can easily add arbitrary links to a menu item
• You can assign custom classes to each menu item
• It’s easy to edit and add menu items
• It’s easy to add child pages

Once I started using the WordPress navigation menu I was kinda hooked on it. You just have to get over the learning curve on how to make it work, and more specifically how to make it work in Thesis.

How to use WordPress Navigation Menus in Thesis

I’d like to provide credit here where it’s due. I first learned how to do this from Matt Hodder’s post on enabling WordPress 3.0 features in Thesis. I’m just expanding on it slightly here with a little more detail to the instruction.

Step 1: Add this code to your custom-functions.php file:

add_theme_support('menus');
function new_menu() {
   	wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary' ) );
}
register_nav_menu('primary', 'Primary Navigation');
add_action('thesis_hook_before_header', 'new_menu');
remove_action('thesis_hook_before_header', 'thesis_nav_menu');

This code will add support for WordPress Menus, it will register a new “primary” menu and then replace the default Thesis menu with a new WordPress menu.

After you’ve added the code, head over to the WordPress Dashboard and click the “Menus” option under “Appearance.” Your screen will look like this:

Step 2: Build The Menu

Now you can begin building your menu as follows:

1. Give your menu a name and click “Save Menu”
2. Add pages, categories and/or custom links to your menu using the sections on the left.
3. You can re-order the list by simply dragging and dropping the list items
4. To create child pages, just drag the list item slightly to the right until it snaps into place
5. Finally, assign your new menu by selecting it from the drop down box at the top left

Be sure to click “Save” when you’ve completed each step.

How to add more than one menu using WordPress menus

If you would like to add additional menus, it’s really quite easy. In the example below, I am adding two additional menus as follows:

register_nav_menu('secondary', 'Secondary Menu');
register_nav_menu('footer', 'Footer Menu');

You would add this to your custom-functions.php file. This will register these two additional menus. Of course, after you have registered these new menus, you will need go back to the dashboard and build menus for these by following Step 2 above.

How to reference the extra menus and make them show up:

So you’ve registered and built two additional menus, but now we want the Footer Menu for example to show up in the footer. Here’s one way to reference the WordPress menus:

<?php wp_nav_menu( array( 'container_class' => 'footer-menu', 'theme_location' => 'footer' ) ); ?>

You would simply add that code where you want the menu to show up. Since you’re likely working in Thesis, you would attach this code to the applicable Thesis hook as follows:

function footer_menu() {
	wp_nav_menu( array( 'container_class' => 'footer-menu', 'theme_location' => 'footer' ) );
}

add_action('thesis_hook_footer','footer_menu');

• WordPress Codex
• Enable WordPress 3.0 Features for the Thesis Theme
• Goodbye, headaches. Hello, menus!

Tagged as: navigation, thesis tips, WordPress