Day 5: Adding custom WordPress 3 menus to your theme

 Using WordPress 3 Custom Menus I showed you how to get the most out of the custom menu function introduced with WordPress 3. In this Fifth Day of WordPress I’m going to take that a step further and show you how to add new Theme Locations for your menus. This procedure can be used to add new menus to existing themes like twentyten and it can be used to add the WordPress 3 custom menu functionality to old themes that don’t have it already installed. I’ll show you how to add the menu function, how to add the menus to your theme files and also talk a bit about the different variables available when you create custom menus. Lots of ground to cover here so let’s get started.

To get custom menus to work within your theme you first have to add the function to your theme. That’s done in the functions.php file. The basic function you need to add looks like this:

'Menu 1 Name','Menu2' => 'Menu 2 Name','Menu3' => 'Menu 3 Name',) );?>

The first part of the array variable (Menu1, Menu2, Menu3) are the elements used to call the menu from the template files. The second part (Menu 1 Name etc) is the menu name as it will appear inside the Menus function in WordPress.

If you’re working with a theme that doesn’t have the WordPress 3 menu function already installed, or if you want to add more menus, you simply copy the code above, paste it into functions.php and customize it to your liking. If you are working with a twentyten child theme you need to unplug the twentyten menu setup first. I already covered how to do this in Day 2: Creating a WordPress Child Theme the Smart Way but it doesn’t hurt to repeat it. Simply create a functions.php file in your child theme folder, copy and paste this block of code in and you’re good to go:

'Header Menu','secondary' => 'Footer Menu',) ); ?>

In this case I’ve created two menus: Header Menu and Footer Menu. And when you

When you’ve added the code above to your functions.php file you’ll find a new Theme Location option in the Menus area in the WordPress admin panel. But to get the menu to display somewhere in your theme you have to do some more work. By default twentyten has the primary Header Menu installed so we don’t have to worry about that as long as we set the variable name to “primary”. As for the Footer Menu we have to add that one manually into the theme files. Since we want it to appear in the footer we create a copy of the footer.php file from the twentyten folder in the child theme folder. This child theme footer.php file will now override twentyten’s footer.php file.

The next step is to add the template tag to call the menu. This is where things get interesting. You can call the menu in two different ways; either based on the name as set by the functions.php file or based on the menu name as defined by the user. If you pick the first (and safest) option this is the code you want to use:

'primary')); ?>

If you want to use the second option for some reason (for example if you want to add an optional menu to a free theme) you use this code:

'Menu Name')); ?>

It’s all pretty self explanatory, but here is a concrete example: If you want to call the footer menu we created above you insert the following block of code into the new footer.php file:

'secondary')); ?>

This adds the menu as an unordered list in the footer. Now all that’s left is to style it – but that’s a whole different tutorial.

If you go to the twentyten theme and look in header.php you’ll find this block of code on line 85:

'menu-header', 'theme_location' => 'primary' ) ); ?>

You’ll recognize most of it but there’s more stuff here than I told you to use before. That’s because the wp_nav_menu function comes with an insane ammount of variable options to customize the output. In the case of the twentyten header menu the code says that the div container inside which the menu is wrapped should have a class named “menu-header” attached. This is for styling purposes so you can use different classes or IDs to target different menus. There are tons of other options as well, some more useful than others and you can read all about them in the WordPress Codex function reference page. I recommend you read the page and experiment with the output. It can be quite interesting to see what comes out and the variables open a lot of posibilities for customization. For your reference I rarely use anything more advanced than what you see in the twentyten example above.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.

View the original article here