WordPress 3.0 Menu Management

With the recent WordPress 3.0 release, WordPress have added a useful little feature allowing you to manage menus within a theme. This has been one of our favourite new features in WordPress 3.0 at SJL Web Design, so we have decided to share it’s brilliance and give a brief demonstration of how you can set it up on your own website.

Activating Menu Management

To start using the built-in menu management you first need to activate it.

To activate menu management you will need to follow these simple steps:

Open up the functions.php file within your theme (in the unlikely event that there isn’t already a functions.php file, just create one and add the following code below wrapped in PHP tags)

if (function_exists('add_theme_support')) {
add_theme_support('menus');
register_nav_menu('example', 'Example Menu');
}

The above code needs to be placed before the closing ?> tag.

This function will not only activate menu management but it will also ensure that your theme will work with older versions of WordPress that do not support menu management. The above code will also create a theme location for ‘Example Menu’ that can be called from within the menu management interface and template files.

Creating Menus

Now that you have activated menu management you will be able to access the menu management administration section in the WordPress backend by going to Appearance > Menus.

To start using the menu management interface you will need to create your first custom menu. To do this enter a ‘Menu Name’ and click the blue ‘Create Menu’ button.

Now you will be able to start adding either existing pages, categories or custom links from the dialog boxes on the left hand side to your custom menu.

Once you have added a few menu items you can use WordPress’s AJAX interface to drag and drop the menu items into the desired sort order, even creating sub-pages for drop down menus.

Calling the Menu

Earlier on we added the following line to the functions.php file

register_nav_menu('example', 'Example Menu');

We are now going to use the first part of this function, ‘example’ to call the menu from within the template files, using the following code:

<?php wp_nav_menu( array( 'theme_location' => 'example') ); ?>

The second part of this function, ‘Example Menu’ created a theme location that we can access in the menu management interface. Using this theme location box we need to select our menu from within the drop down list and click ‘Save’.

Creating more than one menu

The method we have used above to create one menu varies slightly from the standard, this is because more likely than not you will want to start adding more menus as time passes. So we have purposely made an effort to include the:

register_nav_menu

in the functions.php file as this will play a big part in adding new menus. We have also used the theme_location argument so you can switch menus between different locations on your website using the menu management interface.

To start you will need create a new menu in the menu management interface by clicking the plus icon next to the existing menu, in this example I’m going to name it ‘Footer Menu’.

Once you have created the second menu open up the functions.php file again and add a new line under the first register_nav_menu:

if (function_exists('add_theme_support')) {
add_theme_support('menus');
register_nav_menu('example', 'Example Menu');
register_nav_menu('footer', 'Footer');
}

This will register a new theme location in the menu management interface for our Footer menu, just click the drop down and select the ‘Footer Menu’ option from the list.

Now you are just going to need to reference this theme location/menu in your footer template file using the following code:

<?php wp_nav_menu( array( 'theme_location' => 'footer') ); ?>

Extra wp_nav_menu arguments

As well as theme location, there are a number of other argument you can add to the function:

• menu
• menu_class
• container
• container_class
• fallback_cb
• before
• after
• link_before
• link_after
• echo
• depth
• walker
• context
• theme_location

You can find full documentation on the above arguments on the WordPress Codex website.

This entry was posted on Friday, August 20th, 2010 at 1:29 pm and is filed under Blogging, Web Design, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.