Feature
Post

Category
Code


How To Add Support For Menus In Your WordPress Theme

Are you running WordPress 3.0 yet? If so, you might have come across a nifty little addition called Menus. You’ll find it on your admin Dashboard in the Appearances section, and here’s a little screenshot of how it looks:

As you can see, I’ve set up a new menu named “Lorraine Menu” here, and added various things to it by selecting from the elements on the left side of the page: a link to Devlounge, links to some pages, and so forth.

Also of note is the message beneath Theme Locations that states:

The current theme does not natively support menus, but you can use the “Custom Menu” widget to add any menus you create here to the theme’s sidebar.

So how do I make sure my theme supports these new menus? There are two methods:

The Easy Way: Widgets

If your theme is already widgetized, you probably don’t have to do anything- especially if the menu is meant to go in the sidebar. A user simply needs to add a “Custom Menu” widget from the Widgets screen. If your design includes navigation elsewhere, just add another widgetized area in your functions.php and specific theme template (header.php or sidebar.php, for example).

The More Complicated Method: Native Support

I suspect that most WordPress theme authors will want to add native support for menus in their themes, though- and it’s really not that hard. Here’s how to do it:

Register Menu Locations. The first thing you want to do is add this code to your functions.php file. Let’s set up 2 locations for menus, making sure to replace the “menu-name” texts with your own.:

add_action( 'init', 'register_my_menus' );

function register_my_menus() {
register_nav_menus(
array(
'menu-1' => __( 'Menu 1' ),
'menu-2' => __( 'Menu 2' )
)
);
}

Call Menus from Theme Templates. To specify where you want these locations to be in your theme templates, use this:

<?php wp_nav_menu( array( 'theme_location' => 'menu-1' ) ); ?>

and

<?php wp_nav_menu( array( 'theme_location' => 'menu-2' ) ); ?>

You can learn more about wp_nav_menu and the parameters it supports at the Codex.

And that’s it! It shouldn’t take more than ten minutes- more with styling, of course- to update your existing WordPress themes to natively support 3.0’s Menus feature.


  1. By Bredbånd posted on June 22, 2010 at 8:17 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I’m really looking forward to all of the new features. WordPress is still my favourite CMS. Keep up the good work!

  2. By kız oyunları posted on June 23, 2010 at 11:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Basically, caching works by generating static files on your server

  3. By neil posted on June 24, 2010 at 12:23 am
    Want an avatar? Get a gravatar! • You can link to this comment

    It’s helpful for me . thank you

  4. By DSM Design posted on June 25, 2010 at 10:49 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great post, v. informative! Cheers :)

  5. By iMadalin posted on June 29, 2010 at 12:44 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thank you very much!!!!!!!!!!!!!

  6. By Mary Luketich posted on June 29, 2010 at 2:35 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Nav broke up when installing 3.0. Your code blew up the admin side.

  7. By laura posted on July 13, 2010 at 12:04 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Great tutorial, exactly what I need… but i cant get it to work. I keep getting an error message as soon as I add the command to my functions.php. Three hours later I still can’t figure it out.

  8. By Roy [Mantech Computer Service] posted on July 14, 2010 at 5:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Ohhh!..so awesome i really appreciate your tutorial of this topic or concern i really want this idea cuz i want this to my wordpress…thank you so much great job…

    can i ask a favor?…can you give me some interesting about wordpress uses…hoping the response…thanks in advance

  9. By Roy [Mantech Computer Service] posted on July 14, 2010 at 5:56 am
    Want an avatar? Get a gravatar! • You can link to this comment

    or everyone can contact me on this official website in Pagadian City…
    http://www.pagadianbusinessdirectory,com

  10. TrackbackAdding Menu Support to your Theme | WP Scene16 Excellent One Column Wordpress Themes | Devlounge16 Excellent One Column Wordpress Themes | CSS CitadelHow to Enhance Your Website Using Breadcrumbs - ShowcaseHow to Enhance Your Website Using Breadcrumbs – Showcase | Programming BlogHow to Enhance Your Website Using Breadcrumbs – Showcase – Design TodayHow to Enhance Your Website Using Breadcrumbs – Showcase | My Free Design Area - A Webpage for Joomla Free & Commercial Templates, Wordpress Free & Commerciak Themes, and Drupla Free and Commercial templates, Flash Templates and animation, Html 网站管家-实现企业网站价值 » 如何提高您网站面包屑的魅力?