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

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

15 Comments

  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

    Thx!

    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.

      Chris

      • 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”

        cheers!

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

    • 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.

      Chris

  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.

    -Gene

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