How To Create Custom Navigation Menus in WordPress Themes

Written by Clement Faria on February 28, 2012 under Anything, Tutorials & Guides, Web Development.

One of the new features in WordPress 3.0+ themes are Custom Navigation Menus. This custom navigation makes WordPress more user friendly than before, allowing you to manage your menus with ease. You can organize your default menu, add or remove items and even create flexible drop down menus. Since this feature is for WordPress 3.0+ themes, if won’t be available in older themes, this can however be easily fixed with a small update. I will show you in this article how to enable as well as install custom navigation menus in your themes.

Enabling Custom Navigation Menus Support to your theme
To enable Custom Navigation Menus in your theme, you must first insert the code below to your theme’s function.php file, located in you theme directory.

add_theme_support( ‘menus’ );

NOTE: If the above code is not inserted in the functions.php file, it wont be see in the Admin Panel as an option.

Adding Custom Navigation Menus To your Theme
Once you have enabled the feature, you can now add the menu to your theme. To display the custom navigation menu in your theme, insert the command below into the the area you wish the menu to be displayed.
Custom Navigation Menus are not limited to just the header.php, but can be placed in other files like the footer and sidebar.

<?php wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘container_class’ => ‘menu-wrapper’ ) ); ?>

The function used to display the custom menu is wp_nav_menu. The arguments used in the code are sort_column and container_class. The sort_column value grabs the order that you selected in the Menu section in the Admin Panel, while the container_class assigns the css styling class used for the specific menu. If you don’t wish to use arguments, you can use the code below.

<div class=”menu-wrapper”>
<?php wp_nav_menu( ); ?>
</div>

Adding Multiple Menus To your WordPress Theme
If you are adding multiple menus, you will need to add some more code to your functions.php file. Failing to add the appropriate code will result in the same menu being displayed, even if you have different menus for different areas.

To add multipe menus, you must register the menu locations in your theme. This way you can position and call your custom menus anywhere. Add the code below to your functions.php file.

add_action( ‘init’, ‘register_my_menus’ );
function register_my_menus() {
register_nav_menus(
array(
‘menu-1′ => __( ‘Main Menu’ ),
‘menu-2′ => __( ‘Footer Menu’ )
)
);
}

The code above sets up two menu locations for you to use with in your theme. You can then call the menus using the code below:

<?php
// Main Menu Location
wp_nav_menu( array( ‘theme_location’ => ‘menu-1′ ) );
?>

and

<?php
// Footer Menu Location
wp_nav_menu( array( ‘theme_location’ => ‘menu-2′ ) );
?>

Your Custom menu should now be showing in your Worpress Theme. All that’s left to be done, is to style the menu to your liking. And that’s it, Your current WordPress theme now natively support the 3.0+ Custom Menu feature.

Comments