0

How To Add Custom Menu Support To WordPress Theme

This is a quick blog tip on how to add support for the new custom menus in WordPress 3 into a theme that doesn’t already support them.

For this example I’m going to setup two menus: a header menu for the top of the page, and a footer menu for the bottom.

First, we need to register the menus with the theme. To do that, open the /wp-content/themes/YourThemeName/functions.php file and add this code to the bottom (before the closing “?>”):


/* Register Menus*/
function register_my_menus() {
register_nav_menus(
array( 'header-menu' => __( 'Header Menu' ), 'footer-menu' => __( 'Footer Menu' ))
);
}
add_action( 'init', 'register_my_menus' );


Now the theme knows it can support custom menus. Next we need to tell the theme where it can put them – we do this by placing calls to the wp_nav_menu() function where we want the menus to appear.

Usual locations for menus are in the header near the top of the page, in a sidebar, and in the page footer. What I normally do for smaller sites is put a limited menu in the header, which only contains the main pages of the site and doesn’t change when new pages are added. Then for the footer (or sometimes sidebar) I add a full list of all pages, which grows as pages are added. Depending on the site, sometimes you want to show child pages, on others parent pages only.

Let’s get to the code already! Here’s a typical menu. Note the ‘menu’ => ‘header-menu’ code is what identifies the menu by name within the WordPress 3 menu system, and the ‘container_class’ => ‘header-menu-class’ bit is what creates the class=”header-menu” bit so you can style each menu invidually within CSS.


<!--header.php-->
<h2>Site Navigation</h2>
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'header-menu-class', 'menu' => 'header-menu') ); ?>


That’s it – adding custom menu support to your WordPress theme is pretty easy, eh? Your suggestions or questions are very welcome in the comments section below.

Website Credits