How to test wp_nav_menu() with Thematic?

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 register our new menu:

// Register 'Primary Menu'
register_nav_menus( array(
 'primary-menu' => __( 'Primary Navigation' ),
 ) );

Next step will be to remove the old menu from Thematic and add the new one:

// Remove standard menu
function remove_menu() {
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 -->

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);

Please keep in mind that WordPress 3.0 is still not final. This code might break at any time. Don’t rely on it!

This entry was posted in Menu and tagged , , , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. Posted April 2, 2010 at 7:11 am | Permalink

    The latest trunk install allows you to apply a class to the UL tag directly.

    • Posted April 6, 2010 at 2:33 pm | Permalink

      Thanks a lot, Ryan. I added the correct code to Thematic revision 653.

  2. Posted April 6, 2010 at 9:30 am | Permalink


    Works like a charm. Note that you might want to add the class
    .sf-menu .current-menu-item a
    to your style sheet as well.

  3. Posted April 22, 2010 at 12:55 am | Permalink

    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!

  4. Posted May 8, 2010 at 1:42 am | Permalink

    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.

  5. Perry
    Posted June 3, 2010 at 1:04 pm | Permalink

    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.

    • Posted June 4, 2010 at 2:48 pm | Permalink

      Thanks a lot, Perry. I’ll test the current SVN copy.


      • Joe
        Posted June 14, 2010 at 7:35 pm | Permalink

        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”


        • Joe
          Posted June 14, 2010 at 7:40 pm | Permalink

          actually, disregard my last comment… looks like the menu gets an ID based on the name specified in the menu name field…

  6. Posted June 18, 2010 at 7:49 pm | Permalink

    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() {
    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


    • Posted June 18, 2010 at 8:33 pm | Permalink

      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.


  7. Posted June 21, 2010 at 5:31 pm | Permalink

    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.


    • Posted June 22, 2010 at 4:39 pm | Permalink

      Thanks a lot, Gene. Will change this later today and change Thematic.

  8. Posted June 25, 2010 at 12:41 pm | Permalink

    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…

  9. Martijn
    Posted August 9, 2010 at 10:51 pm | Permalink

    I would like to know in what file this code needs to be placed…

Post a Comment

Your email is never published nor shared.

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More in Menu (3 of 1 articles)