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.
Hello,
I am using wp 3.1.1 and my theme doesn’t support menu. I tried to use your solution. First part of the method is successful. It says that, my theme supports, the second part which is adding the function to the header is not working. My custom menu appears once a second and then disseapers. My current theme is http://www.skinpress.com/blackpower-theme/. Could you help me to put header code in proper line?
Thank you.
Sure, send me an email via the contact form on this site and I’ll see if I can help you out.
I tried that, but it caused an error – I’m getting this no matter what method I try. HELP?!?
Call to undefined function add_theme_support() in /home/ilene/public_html/wp-includes/functions.php on line 46
Hey,
I am in kinda the same situation. My theme recognizes the menu alright. But when I add the second part into my header.php something is a little off because my new menu doesn’t align correctly with my theme.
My code in my header php was
<a href="/”>HOME
And I changed it to…
<a href="/”>HOME
<?php
‘custom_menu’,'menu_class’=>’wrapper’));?>
Your insight here would be a huge help. I’ve really been struggling with this.
Thanks
Very Interesting, i just hope you can make a video tutorial for this, it seems to be a bit complicated for non tecky guys like me. I really hate changing lines of work, a month ago i was trying to understand wordpress, and after weeks of putting all my attention to it and slowly understand a bit of it and then they assigned me to do some link building, like right now. I find it boring, since its a repeated task of work. Anyways this is what i made after a month of understanding wordpress http://www.emainwebdevelopment.com/ ,please check it out if you have some time and i would really love and appreciate if you can leave some feedback, so i can correct my mistakes if you found some. You can notice there that my navigation bar is a image, what i did there is i set a background image on tje css for the page-item-## menu navigation list. what do you think? is there a better or faster and reliable way of customizing the navigation?