With the release of WordPress 3.0, we now get a new function under Appearance called Menus. With this we get to add, delete, order and modify our menu to our liking. Since this is quite a new feature, most developers and old theme users are not too acquainted to it yet; most do not know how to add it to their theme. In this tutorial, I will teach you the simple method of adding this customizable menu option to your theme. For this to work we need to modify 2 theme files: header.php and functions.php.

 

Let's first open functions.php as there is a little amount changes we need to make to our codes. Within your php call out (<?php and ?>) we need to add a few lines of code. Let's start off by register our menu to our WordPress functions. This will tell the Menus option in the admin dashboard that this theme will use this feature.

 

function register_main_menus() {
register_nav_menus(

 

Now we need to set a simple array to give us some selection options. Note that the Menus feature does allow you to offer more than one menu. When we put this code into our functions file, we will get a drop down box under "Theme Locations" in Menus section.

 

array( 'primary-menu' => __( 'Primary Menu' )

 

Remember that the primary-menu after the array is important. Let's close up all these call-outs before continuing

 

) //close array
); //close register_nav_menus
}; //close function call-out

 

It's time for us to check to see if the register_nav_menus function exists and to tell the server what action to take if it does.

if (function_exists('register_nav_menus')) add_action( 'init', 'register_main_menus' );

 

Save the file and now open up header.php. In your theme locate the call for navigation. Normally a menu call looks something like this

 

<div id="nav">
<ul>
<li<?php if (is_home()) { echo " class=\"current_page_item\""; }?>><a href="<?php echo get_settings('home'); ?>"><?php _e("Home", 'theme_name'); ?></a></li>
<?php $include_pages = ot_option('include_pages'); ?>
<?php wp_list_pages('title_li=&sort_column=menu_order&include='.implode(',', $include_pages)); ?>
</ul>
</div>

 

Delete all contents within the div; from <ul> to </ul>. Once you do that, lets call out for the menu class that we will use later

 

<?php $menuClass = 'ot-menu';

Now we need to call for our primary navigation and check if the wp_nav_menu exists.

 

$primaryNav = '';
if (function_exists('wp_nav_menu')) {

Now it's time for us to tell the server the details for the menu.

 

$primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
};

Note that the pimary-menu callout for teh theme_location corresponds to the same callout in the functions.php file. Make sure these two are the same. Here is where you get to customize your menu.

 

if ($primaryNav == '') { ?>
<ul class="<?php echo $menuClass; ?>">
<?php show_page_menu($menuClass,false,false); ?>
<?php show_categories_menu($menuClass,false); ?>
</ul>
<?php }
else echo($primaryNav); ?>

 

The $menuClass we defined earlier is now called within the unordered list to give it a class. You don't typically have to do this, but it does make it look good. If you want to make any changes to the code of your navigation, this is the place to do so. Note that this code is wrapped between your navigation div tags.

 

Here is the full code for the custom navigation

functions.php

 

// This will enable wp_nav_menu() in one location.
function register_main_menus() {
register_nav_menus(
array( 'primary-menu' => __( 'Primary Menu' )
) );
};
if (function_exists('register_nav_menus')) add_action( 'init', 'register_main_menus' );

header.php

 

<?php $menuClass = 'ot-menu';
$primaryNav = '';
if (function_exists('wp_nav_menu')) {
$primaryNav = wp_nav_menu( array( 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'echo' => false ) );
};
if ($primaryNav == '') { ?>
<ul class="<?php echo $menuClass; ?>">
<?php show_page_menu($menuClass,false,false); ?>
<?php show_categories_menu($menuClass,false); ?>
</ul>
<?php }
else echo($primaryNav); ?>

You, made really good work! I think your tutorial will help newbies! Good luck! I am waiting on your new tutorials.

I posted several others before this one. Most of my tutorials can be found on my personal site. At the moment, I am working on a CSS guide book. So I guess I'll offer that here as a free tutorial/guide. Stay tuned!

Great tutorial, thanks. But...what's the difference with using this snippet to yours?

 

if (function_exists('register_nav_menus')) {

	register_nav_menus(array(

	      'main_menu' => 'Main Navigation'

	));

 }

 

I know it works perfectly fine but it would be nice to know what the difference is...?

There isn't much of a difference. The only one I see between our codes is that mine allows you to customize your navigation to your liking.

 

Just as a little addition, before I learned of the code I used, I took advantage of the code you did. But with all the features in my functions page, that code did not work for me.

Okay, thanks for the reply.

The first thing we need to do is open up your themes functions.php file and add the following code:

?

01

02

03

04

05

06

07

08

09

10

 

add_action( 'init', 'my_custom_menus' );

 

function my_custom_menus() {

register_nav_menus(

array(

'primary-menu' => __( 'Primary Menu' ),

'secondary-menu' => __( 'Secondary Menu' )

)

);

}

 

This code creates a new function “my_custom_menus”, which you can name whatever you want. Within this function, we call “register_nav_menus” which takes two arguments, the slug which is called from within our code and the label which you will be used in the WordPress menu manager. As you can see, we have defined both the Primary and Secondary menus. That’s it for the functions.php file, so you can save and close it now.