Use Multiple Menus in your WordPress theme
When WordPress 3.0 was released the ability to edit site menus from the WordPress dashboard was introduced. The WordPress menu feature allows you to create multiple menus. You can easily set a customize menu as the primary navigation for your site or put a custom menu widget in your sidebar. Themes can be further modified to create additional menus areas.
Adding a Menu to the Footer
When I create a custom WordPress theme for my clients I like to create a footer menu as well. This is useful for adding links to contact, sitemap and back to top. Here are the steps to edit your own theme.
In this tutorial you are going to edit the functions.php, footer.php, and style.css files. If you modify theme files directly your customizations will disappear when the theme updates. So create a child theme first.
Create a secondary menu area
Add the following code to the functions.php file for your twenty ten child theme
// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array(
'primary' => __( 'Primary Navigation', 'twentyten' ),
'secondary' => __('Secondary Navigation', 'twentyten')
) );Tell WordPress where the secondary menu should be used
Open your footer.php file and add the following code wherever you want the secondary menu to appear.
<div class="bottomMenu"> <?php wp_nav_menu( array( 'theme_location' => 'secondary' ) ); ?> </div>
Style the menu
Open your css file and create a class bottomMenu and add your own styling. Here is an example.
.bottomMenu { display: block; width:960px;}
.bottomMenu ul { display:inline; float:right;}
.bottomMenu li { list-style-type: none; display: inline; font-size: 12px; }
.bottomMenu li a {
color:#000;
line-height:15px;
text-decoration:none;
font-weight:normal;
border-right: thin solid #000;
padding: 0 7px 0 3px;
}
.bottomMenu li a:hover { color:#ccc; text-decoration:underline;}
.bottomMenu li:last-child > a {border-right: none;} /* remove pipe from last item */Create the Menu
- Go to Appearance -> Menus and click the + to create a new menu
- Name the menu e.g. “footer”
- Add published pages such as contact, sitemap, privacy policy to the menu
- Drag and drop menu items to order them
- Save the menu
- Set the Secondary Menu (you created this with the edit to the functions.php file) on the left side to use this newly created menu
That’s it your custom menu will now work in the footer of your theme.
Add a Back to Top Link
- To add a jump back to the top of your site open the menu (make sure you’re editing the right menu)
- Under Custom Links -> create a url link -> “#top”
- Paste into the Navigation Label “^ Top” or “↑ Back to Top”
- Save Menu
Please add your comments to let me know how this works for you.
Thanks, Ruth. This is just what I’ve been looking for to tweak my website. I’ve also just discovered a WP plugin to create a child theme. I’ll let you know how it goes.
Thanks this helps. I was searching from the last 2 days how to add a custom footer menu. You have written it in a detailed step by step manner. You make it easy for newbies like me.
thanks for help 😉
Thanks you so much!
Excellent tutorial and very simple to follow!
great for beginners
Can I use this code in twenty thirteen themes footer
Yes… It will work with any theme
Ruth, thank you so must your information is too good.
This worked well thank you, I was wondering though is there a way to set it to have parent and child links? So when you hover over a page the child pages come up under it as well?
How is the sub-menu show? Is it bottom up or still drop down when the menu put to the footer?
Kelvin
Kelvin,
The menu will display inline as it does in the footer of my site.
If you want the menu as a bulleted list stacked, check if your theme has footer widget areas and just add a menu widget.
Thank you so much I had been trying to do this for ages. I use the omega theme and it worked perfectly 🙂
Thanks It works
This guide actually helped me working with a non standard theme, where the official documentation wasn’t really clear.
Newbie to wp and the menu registration was in a custom systemhelper.php file. Your screenshots helped me understand how exactly the menus are registered in wp. After that it was only a matter of time to find and add more than 1 menu that my theme had.
Thanks!
Great post Ruth. is excellent
Its working fine..thanks
Question; What if you are using multi-site and sub-domains? I have it working on the main site but once it goes to the sub-domains it loses track of it and puts a default menu in place. Suggestions?
Thanks!
GL
Hi Glenn,
You need to tell WordPress to use the menu from the main site which has a blog id of 1.
< ?php //store the current blog_id being viewed global $blog_id; $current_blog_id = $blog_id; //switch to the main blog which will have an id of 1 switch_to_blog(1); //output the WordPress navigation menu if( has_nav_menu( 'secondary', 'twenty-ten' ) ) { wp_nav_menu( array( 'menu_class' => ‘bottom-menu’,
‘theme_location’ => ‘secondary’
) );
}
?>
Thanks, this has really been helpful.
Thanks a lot. Worked like a charm.
thank you. Will it work with all themes.
Thanks alot. Simple and easy. Was looking for quite sometime found the solution here.
well im new to the WordPress and for a past several i have been searching for the how to customize the menus and adding the menu bars at the different ..by reading this article it gave me boost to try something different with my menus
Thanks for this post it was helpfull.
Is this code works in every themes footer? By the way, appreciated your useful info.
Thanks,
wow, it worked… was not expecting it to work…
So helpful thanks 🙂 But can the items appear next to each other not in a list under each other and how can I make them icons for social media menu? Site listed in the form if you need to have a look. Thanks.
Hi, If I would like that the footer menu be the same as the main navigation menu, what is the simplest way to do it? Thank you!
Open Customize -> Menus -> Under Menu Locations assign the same menu to both the Primary and Footer locations.