WordPress 3 Custom Menu Support in Thematic

More thematic child theme functions goodness 🙂

Having read the comments on this page: http://themeshaper.com/wordpress-menu-tricks/ I couldn’t find a definitive copy and paste guide – looks like the HTML and PHP tags were being stripped out. So, leaning heavily on Tony L‘s work (thanks Tony!), here is a copy-paste-edit example. Simply add this to your Thematic child theme’s functions.php file and you should find that you can then use the ‘Menus’ tab under WP’s Appearance menu in the CMS.


// Add support for WP3 custom menus
add_theme_support( 'nav-menus' );

// Remove Thematic default menu
function remove_thematic_menu() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init','remove_thematic_menu');

// Register the custom menu with the theme
function register_custom_menu() {
register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
}
add_action( 'init', 'register_custom_menu' );

// Output the new menu to the thematic header
function childtheme_access(){
wp_nav_menu( array('primary-menu', 'menu_class' => 'sf-menu' ) );
}
add_action('thematic_header', 'childtheme_access', 4);

Any mistakes, omissions or bugs are my own and I’d love to hear your feedback in the comments. Thanks for reading 🙂

Update

George Irwin kindly sent me an improvement on the ‘Output the new theme to the thematic header’ function, as follows:


// Output the new 3.0 menu to the thematic header
function childtheme_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('primary-menu', 'menu_class' => 'sf-menu' ) ); ?>
</div><!-- #access -->
<?php
}
add_action('thematic_header','childtheme_access',4);

As George rightly points out, this keeps the new custom menu in line with the original as defined by Ian Stewart in the Thematic header-extensions.php file so that you don’t need to change your CSS. Much better George, thanks 🙂

Update 2

Thanks to skarab and Manxstef, there’s a further improvement to this code 🙂


// Output the new 3.0 menu to the thematic header
function childtheme_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('primary-menu', 'container_class' => 'menu', 'menu_class' => 'sf-menu') ); ?>
</div><!-- #access -->
<?php
}
add_action('thematic_header','childtheme_access',9);

These tweaks ensure that the custom menu is created on the page in exactly the same place and with the same DOM as the default Thematic menus. Thanks both!

Related Posts

18 Comments

  2. Hi Vidyut,

    Did the ‘Menu’ option appear under ‘Appearance’ in the CMS?

    Did you construct a menu and save it?

    Does the menu appear in the DOM at all? Perhaps it’s hidden by CSS?

    You’re definitely using a Thematic child theme’s functions.php file?

    Sorry if these are remedial questions: back to basics first!

    If you let me know the site, I’ll try and take a look?

  3. Thanks for this!

    BTW, in order to keep the #access div, you’ll need to include that in this code, too, so that third part would look like

    [naughty code edited by divydovy]

  6. Thanks a lot. This tip saved the day for me.

    If anybody uses the above code verbatim, but finds that the new menu is not positioned correctly on the page, here is how to fix: To ensure that the markup for the new menu will be placed at the exact same spot as the markup for the old menu, the priority argument for add_action needs to be the same as the priority for remove_action. Thus, the last line needs to be modified as follows:

    add_action(‘thematic_header’,’childtheme_access’,9);

    Also, to generate a menu that matches even more closely the original thematic menu and ensure that css styles are applied correctly, replace the call to wp_nav_menu() in the code above with the following:

    wp_nav_menu( array(‘primary-menu’, ‘container_class’ => ‘menu’, ‘menu_class’ => ‘sf-menu’ ) );

  7. Hey fella 🙂

    Thanks for this, I’ve just started investigating hanging stuff off Thematic rather than rolling from scratch and this Custom Menus thing is pretty nifty.

    Just one small thing, the WordPress nav menu API call would be better as:

    wp_nav_menu( array(‘primary-menu’, ‘container_class’ => ‘menu’, ‘menu_class’ => ‘sf-menu’) );

    (Assigning this container class keeps it consistent with Thematic, otherwise it’ll assign ‘menu-main-nav-menu-container’ and the styling goes a bit haywire.)

    Best,

    Stef

  9. what would the code be to add a secondary menu to the main-aside that is accessible through appearance/ menus like this main-nav is? can you combine this into one function or do they need to be two separate functions?

  10. Hi Akosner,

    Just to be a little ‘particular’ before I start. The code on that page is actually 3 functions already, plus the ‘add_theme_support’ line – don’t know if that counts as a function or not!

    To register a second menu, you can adjust function_register_custom_menu to something like this:

    function register_custom_menu() {
    register_nav_menu( 'top-menu', __( 'Top Menu' ) );
    register_nav_menu( 'primary-menu', __( 'Primary Menu' ) );
    }
    add_action( 'init', 'register_custom_menu' );

    One could either then echo this menu out on a particular action hook as we do with the Primary Menu, or use the ‘Custom Menu’ widget under ‘Appearance>Widgets’ to simply drag and drop the ‘Top Menu’ into the Main-Aside widget area (this is labelled ‘Primary’ in Thematic if we’re talking about the same thing).

    Hope that’s helpful.

  11. Hi, thanks so much for this. I found a strange issue in which another menu, other than the primary menu would be displayed.

    To fix it, I had to change the call to wp_nav_menu to look like this

    $main_menu_args = array(
    ‘menu’ => ‘my_menu_name’,
    ‘container_class’ => ‘menu’,
    ‘menu_class’ => ‘sf-menu’
    );
    wp_nav_menu($main_menu_args);

    Wasn’t able to figure out _why_ it was happening. Was working fine on a dev server, but not on one of our staging servers. Changing the call made it work in both places.

    Thanks again!

  12. Hi Evan,

    Interesting – thanks for sharing that fix. Hopefully that’ll save others some headaches. I haven’t seen this issue (yet), but great to know there’s a fix in place if/when I do.

    Cheers 🙂

  14. Hi Eoghan,

    You mean like a sub-menu, or drop-down menu from a top-level item?

    If so, yes. Easy. When you build the custom menu in the WP CMS – Appearance>Menus, then just indent any items you wish to appear as sub-menu items by dragging them underneath (and slightly to the right of) the parent menu item.

    If that’s not what you mean, I don’t understand!

    Cheers

  18. Thank you! I already had my menu styled and realized I didn’t output the WordPress custom menu. Your code saved me some time and my style applied perfectly.

    Thanks!

Comments are closed.