How To Add WordPress 3.0 Menu To Thesis

by Matt on June 22, 2010

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.

{ 1 trackback }

{ 17 comments… read them below or add one }

Nathan Rice June 22, 2010 at 5:17 pm

I submitted a ticket on WP Trac about the home link not having the proper class. menu-item-home gets applied to the home menu item if viewing the homepage, but not on other pages. That should be fixed in 3.0.1, so it will work in any context.

As for the current class, the WP nav menu has an equivalent. current-menu-item

My ticket for parent and ancestor classes doesn’t have a patch yet, so it may or may not get in for 3.0.1. However, if a page (or it’s parent or ancestor) is the current menu item, then every menu item in the tree will get a class to describe its relationship to the current menu item … current-menu-parent and current-menu-ancestor.

Reply

Matt June 22, 2010 at 6:24 pm

***Comment Revised. Revised areas in bold :) ***
I just noticed the current-menu-item, thanks for pointing that out.

For all the Thesis users interested, open css.php found in thesis_17/lib/classes/css.php. On line 680 add , .menu .current-menu-item a at the end of the CSS declaration. Then go to line 684 and add , .menu .current-menu-item a, .menu .current-menu-item a:hover to the CSS declaration.

Please only do the above steps if you know what you are doing. Messing up your css.php could be bad :(

Reply

Anders July 15, 2010 at 6:34 am

When will thesis be updated?

Reply

Matt July 20, 2010 at 12:34 pm

Already is. This posted pre-dated the fixed version.

Reply

Kimberly Castleberry June 24, 2010 at 12:14 am

Matt, can you shed some light on the revisions that would need made to call a second menu? Pretty please?
Kimberly

Reply

Matt June 24, 2010 at 11:11 pm
Kimberly Castleberry June 29, 2010 at 1:52 am

Thank you Matt! You are a gem!
Kimberly

Reply

Paul July 2, 2010 at 11:00 am

Hi Matt,

Thanks for the code. it worked great. The only thing is, is that I used to use a short piece of code to make the nav menu sit below the header:


/* Header Display Above Nav */
remove_action('thesis_hook_before_header', 'thesis_nav_menu');
add_action('thesis_hook_after_header', 'thesis_nav_menu');

That no longer seems to work with the new code you wrote. Any thoughts as to how I can achieve the same result?

Thanks. Paul

Reply

Paul July 2, 2010 at 4:01 pm

I found the answer (probably because it was very vary simple!).

I just needed to change the code on line 3 to read “after_header” instead of “before_header”.

here’s the complete code:

add_action('init','register_menu');
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_after_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();
}

Reply

David Radovanovic July 12, 2010 at 5:52 pm

Isn’t there an option to use either WordPress or Thesis menu:

Navigation Menu
+–Select Menu Type

* WordPress nav menu [?]
* Thesis nav menu

Reply

Matt July 20, 2010 at 12:33 pm

That was added in Version 1.8, which came out after this post.

Reply

David Radovanovic July 12, 2010 at 7:18 pm

After a more thorough read through, this is a smart way of dealing with both menu types without having to mess with options. Thanks!!

Reply

Bryan December 1, 2010 at 8:49 pm

Best solution I found so far for this problem, Thanks Matt!

Reply

David December 17, 2010 at 4:29 pm

I sent an email to you via thesistutor@gmail.com and I wanted to see if you could help me. Look forward to hearing back from you.

Reply

Bay Area Webdesigner February 21, 2011 at 5:25 pm

works perfectly! thank you for this tutorial.

Reply

niki March 12, 2011 at 8:18 pm

Tried that exactly and got this:

Warning: call_user_func_array() [function.call-user-func-array]: First argument is expected to be a valid callback, ‘register_menu’ was given in /home/nikitc5/public_html/livelocaldecorah.com/wp-includes/plugin.php on line 395

Warning: Cannot modify header information – headers already sent by (output started at /home/nikitc5/public_html/livelocaldecorah.com/wp-includes/plugin.php:395) in /home/nikitc5/public_html/livelocaldecorah.com/wp-includes/pluggable.php on line 897

Reply

Lisa Sauro May 10, 2011 at 8:52 pm

Want to use the wordpress menu instead of the thesis menu. All you have to do is use openhook plugin and check the box to Remove Thesis nav menu. Then place this code in openhook in after header box

Reply

Leave a Comment

Previous post:

Next post: