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.

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

add_theme_support( '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 banner, which only contains the main pages of the site and doesn’t change when new pages are added. Then for the 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’ => ‘menu-sidebar’ code is what identifies the menu by name within the WordPress 3 menu system, and the ‘container_class’ => ‘menu-sidebar’ bit is what creates the class=”menu-sidebar” bit so you can style each menu invidually within CSS.


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


And here’s a header menu – I’ve left in the h1 header for context, but the  wp_nav_menu() is the relevant bit for us.


<div id="header">
<h1><a href="<?php echo get_settings('home'); ?>/"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>

<div id="menudiv">
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'menu-header', 'menu' => 'menu-header' ) ); ?>
</div>


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