Before you can start this tutorial, you’ll need to follow the tutorial on how to add the WordPress 3 menu to Thesis.

Once you finish that tutorial, you will have the following in your custom_functions.php:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now we need to do two things:

1. Register the menu area.
2. Hook the menu area into place. In this example I’ll be putting a menu above the footer.

To accomplish this, we will add the following to our code from above:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');
add_action('thesis_hook_before_footer','footer_menu');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu',
        'footer'=>'Footer Menu'
    ));
}

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

For the register part, I simply added a comma then 'footer'=>'Footer Menu'. The first part, 'footer' is the menu slug. The second part, 'Footer Menu' is what will be displayed in the WordPress admin. So, if you were going to add a menu above the content, you may do something like this 'content-menu'=>'Content Menu'.

The second thing I did was add a function that contains my menu.

function footer_menu() {
wp_nav_menu('theme_location=footer');
}

If I wanted to add the menu above the content, I would do something like this:

function content_menu() {
wp_nav_menu('theme_location=content-menu');
}

Lastly, I hooked my function into place with

add_action('thesis_hook_before_footer','footer_menu');

If I were putting a menu area above the content, I may do something like this:

add_action('thesis_hook_before_content','content_menu');

I have seen a few ways to add WordPress 3.0 menu support to Thesis and they do “work”, but they really aren’t optimal. So, I have written a fix for this issue until Thesis can get updated.

First, let’s identify exactly what we need to get accomplished. This tutorial will only cover replacing the current navigation menu, called by the function thesis_nav_menu();, if and only if a replacement has been assigned by the WordPress functionality. It is important to remember that you lose some, but not all, of the CSS native to the Thesis navigation.

Let’s get started by opening custom_functions.php and entering the following function:

function register_menu() {
register_nav_menus(
    array(
        'primary'=> 'Primary Menu'
    ));
}

Basically, this allows us to register the area where we want a navigation bar to appear. Since we are using an array, this will allow us to go back at any point and register another area.

Next, we need set up the following 3 scenarios:

1. No WordPress menu is detected, so the Thesis menu is shown.
2. At least one WordPress menu exists, but none are selected for the nav bar, so the Thesis navigation is shown.
3. At least one WordPress menu exists and one is selected for the area.

It is important to remember that this next function must be repeated to register other areas. Unlike register_nav_menus();, each area where you want a navigation bar to appear must have its own code to register. For the primary navigation, we will use the following code:

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Now, let’s register the menus and areas and take the default Thesis nav menu out.

add_action( 'init' , 'register_menu' );
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

Now, Let me show you what all the code looks like together:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','wordpress_menu_support');

function register_menu() {
register_nav_menus(
    array(
        'primary'=>'Primary Menu'
    ));
}

function wordpress_menu_support() {
if (function_exists('wp_nav_menu'))
	wp_nav_menu('theme_location=primary&fallback_cb=thesis_nav_menu');
else
	thesis_nav_menu();
}

Remember that the WordPress menu system is not as clean and robust as Thesis, so you will have to make some CSS changes. Some of the things that the WordPress menu does not contain are the home, current and current-parent classes. Why? Because Thesis‘ nav menu has a specific purpose and the WordPress menu system is for generic menu creation.

Moving the nav menu around in Thesis is super easy. If you check out hooks, you will start to figure out that the nav menu can pretty much go anywhere. I this particular video, I show how to put the nav menu above the sidebars. This is especially useful if you have a bunch of nav menu items, as they tend to get cluttered in a normal nav arrangement. Thesis’ super powerful PHP engine makes nav bar adjustments easy as pie. Or if you don’t like pie then cake.

Here is the PHP that I use in this tutorial:

remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_sidebars','thesis_nav_menu');

And here is the single line of CSS I use:

.custom .menu li { float: none; }

Good luck using Thesis! Be sure to send all requests to:
ThesisTutor [at] gmail [dot] com

Remember to Get Thesis or Upgrade to the Thesis Developers Option!

This an Advanced Tutorial!

Thesis 1.6 Update!

Here is some updated code to make your rounded tabs Thesis 1.6 compliant:

body.custom { background: #eee; padding-top: 3em; }
.custom #header { border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #ccc solid; }
	.custom #header #logo { text-indent: -9999px; }
	.custom #header #tagline { text-indent: -9999px; }
.custom .menu { border: none; }
	.custom .menu li a { /*---[ insert "border-radius" declarations here" ]---*/ }
	.custom .menu .tab-home a { border-left: 1px solid #ddd; }
.custom .menu li ul li a { -moz-border-radius: 0em; -webkit-border-radius: 0em; }

In this video, I show you how to make rounded tabs in the nav menu. As I explain, there are a few lines of CSS I wrote prior to recording the video in order to make the tab effect more noticeable. Here they are:

body.custom { background: #eee; padding-top: 3em; }
.custom #header { border-left: 1px #ccc solid; border-right: 1px #ccc solid; border-top: 1px #ccc solid; }
	.custom #header #logo { text-indent: -9999px; }
	.custom #header #tagline { text-indent: -9999px; }
.custom #tabs { background: #eee; border-left: none; border-bottom: none; }
	.custom #tabs li { background: #ccc; border: none; **add round corners declarations here** }
.custom .current_page_item { padding-bottom: 0em; }

Please Note: Internet Explorer does not support this technique! If you use IE, get Firefox immediately.

What is a hover? Hover is a pseudo-class of CSS. Pseudo-classes allow some selectors to have special effects. A pseudo class, in this case hover, looks like this: :hover. Notice the colon. I will explain more about CSS in later posts, so for now let’s change the hover function in your Thesis customization.

By default, Thesis’ nav item hover is an underline. I don’t personally care for underlines (only in certain contexts), but Chris Pearson decided that Thesis nav items should behave like that by default. He knows his stuff. But, if you’re stubborn like me, you still want to change it.

Let’s change the hover:

1. Open custom.css.
2. Enter the following:

   .custom #tabs a:hover { background: #color hex here; text-decoration: none }

In this very simple example, we changed the background color and took away the underline. What are other options? You could change the text color by adding color: #color hex here;, change the top, right, bottom or left border with border-top: #color hex here 1px solid; [replace top with another side name] or a whole host of other changes. One of my absolute favorites is the following:

.custom #tabs { border-left: none; border-bottom: none; }
.custom  #tabs li { border-top: none; border-right: none; }
    .cusotm #tabs a:hover { background: #d9d9d9; margin-top: -.2em; }

Just, uh, don’t forget the decimal or you will really piss people off.

Oh, and don’t forget to submit ALL your questions to thesistutor[at]gmail[dot]com.

I bet you barely noticed that there is a little 1 pixel gray border on the left side of the nav bar. Well, I think that when you are customizing a site, you need to get rid of it. I know, I know. It isn’t that important. But it can really make a site look more symmetrical and crisp. And, as always in Thesis, it is incredibly easy.

1. Read the first four steps from previous tutoring sessions.
2. Open the custom.css file with your favorite text editor.
3. At the bottom of the text, enter the following:

   .custom .menu { border-left: none; }

Yes, it is that easy to remove the border.

Remember, you need to get it, dude.

Ok, ladies and gentlemen. I want to show you folks how to move around the nav menu in Thesis using hooks. First of all, I understand the initial aversion to coding. But don’t be a wuss and just try it out. Once you get going it is super easy. Second of all, every mac user who has ANY interaction with websites ought to own a copy of Transmit for all ftp work.

Let’s get started.

1. Open your ftp client and click on the wp-content folder.
2. Now select the themes folder.
3. Select thesis_151. If you don’t have Thesis 1.5.1 then get it!
4. Select the file labeled custom.
5. Right click custom_functions.php and select your editor. I use Dreamweaver for all CSS and PHP editing. However, you may use a simple text editor, such as textedit for mac.
6. After all the words and stuff you don’t understand, space a couple lines and enter the following:

   remove_action('thesis_hook_before_header','thesis_nav_menu');
   add_action('thesis_hook_after_header','thesis_nav_menu');

7. Now save it and load it on your server. If you were smart, you would get a copy of Transmit. I swear that this will be worth every penny.

There you have it. You just moved your nav menu from above the header to below it. Wasn’t that easy? Check back often!