During the last weeks some people asked, how to test WordPress 3.0 and wp_nav_menu() with Thematic. Here’s a first answer.
First of all we need to tell your Child Theme, that it supports the new functionality:
// This theme uses wp_nav_menu() add_theme_support( 'nav-menus' );
Next step will be to remove the old menu from Thematic and add the new one:
// Remove standard menu
function remove_menu() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_menu');
// Create wp_nav_menu
function new_access() { ?>
<div id="access">
<div class="skip-link"><a href="#content" title="<?php _e('Skip navigation to the content', 'thematic'); ?>"><?php _e('Skip to content', 'thematic'); ?></a></div>
<?php wp_nav_menu( array( 'menu' => 'primary-menu', 'container_class' => 'menu', 'menu_class' => '', 'fallback_cb' => '' ) ); ?>
</div><!-- #access -->
<?php
}
add_action('thematic_header','new_access',9);
And finally we need to add the needed UL class to support Superfish:
// Add the UL class to support Superfish
function wp_nav_menu_add_menuclass($ulclass) {
return preg_replace('/<ul>/', '<ul class="sf-menu">', $ulclass, 1);
}
add_filter('wp_nav_menu','wp_nav_menu_add_menuclass');
Please keep in mind that WordPress 3.0 is still not final. This code might break at any time. Don’t rely on it!
15 Comments
The latest trunk install allows you to apply a class to the UL tag directly.
Thanks a lot, Ryan. I added the correct code to Thematic revision 653.
Thx!
Works like a charm. Note that you might want to add the class
.sf-menu .current-menu-item ato your style sheet as well.
Hey I was wondering if someone might be able to help me. I’ve developed my own theme using html5 and have been working at incorporating wp_nav_menu(). I have it working great just like in the twentyten theme. I want to style with superfish and I’m still new to jquery.
html code
'menu_order', 'container_class' => 'menu-header' ) ); ?>
I have cited the external js files, have the superfish styling in my css, and have tried putting sf-menu as parent elements via both the menu css classes and manually in the nav-menu-template.php file ‘menu_class’ => ‘sf-menu’. The best I get is the “access” styling on top of the sf-menu styling and no rollover effects.
Any help would be greatly appreciated. Thanks!
Eh, this blog is fantastic. I might as well switch to the thematic one instead of always building my themes from scratch. I shouldn’t start from the beginning any time a have a web design project deals.
Thanks for the amazing works here.
Hi there – just thought I would let you know that I just tried this on WP3 RC 1: the menu appears OK but the filter to add the “sf-menu” class to the ul doesn’t seem to work.
Thanks a lot, Perry. I’ll test the current SVN copy.
Chris
i changed this line:
return preg_replace(‘//’, ”, $ulclass, 1);
to this:
return preg_replace(‘//’, ”, $ulclass, 1);
and the menu works… looks like the new WP menu function adds an ID called “menu-main”
cheers!
actually, disregard my last comment… looks like the menu gets an ID based on the name specified in the menu name field…
Hi Chris,
I was trying to implement the code above with the Final Release version of WP 3 and it didn’t seem to be working. After some research, I solved the problem and posted the solution on the Thematic Forums
I’m posting the code bellow, I don’t know if it can be improved any further:
// We declare that our theme supports wp_nav_menu()
add_theme_support( 'nav-menus' );
// We Register the a new menu for the theme called "Primary Menu"
function register_primary_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
add_action( 'init', 'register_primary_menu' );
// We remove the standard Thematic menu
function remove_menu() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_menu');
// We create the new wp_nav_menu called "Primary Menu" in our theme
function new_access() { ?>
<a href="#content" title="">
'primary-menu', // we define this as being the previously registered "Primary Menu"
'menu_class' => 'sf-menu', // we assign the sf-menu class to the menu ul so that superfish workds
'container_class' => 'menu' // we assign the menu class to the menu container div so to keep it compatible with the Thematic menu styling
));
?>
<?php
}
add_action('thematic_header','new_access',9);
Thanks a lot for your help, Theo. I’m currently testing Thematic against the final release of WordPress and doing some adjustments. Will post something later today.
Chris
Heads up in the final WP 3.0 things changed
`add_theme_support( ‘nav-menus’ );`
needs to be:
`add_theme_support( ‘menus’ );`
to work properly.
-Gene
Thanks a lot, Gene. Will change this later today and change Thematic.
Thanks for all your hard work, Chris!
It’s great that you continue to develop Thematic for WP3. I have gotten so used to Thematic that it is hard to start on a new project without it…
I would like to know in what file this code needs to be placed…