Codeable info

How To Add A Navigation Menu To Your WordPress Theme

Posted on by in WordPress Tutorials

The current WP Mods theme was designed by Blog Design Studio over a year ago. I still love the design however as the theme was designed before WordPress 3 was released, a lot of new WordPress features such as menus, background images and header images were not built into the site.

Whilst I have no plans on using the background or header image features with this theme, I recently followed Pippins great guide on adding the WordPress featured image feature to the template as it very versatile and allows you to list articles on your site in a number of different ways.

The second WordPress 3 feature I wanted to add to the WP Mods design was Navigation Menus. For me, wp nav menu is one of the best additions to WordPress over the last 3 years as it allows you to manage all of your menus from the one area using a drag and drop interface. Customizing how menus are styled has also been made easier and creating a drop down menu only takes you a few seconds.

Adding A Navigation Menu To Your Template

If your theme was designed before the release of WordPress 3, it probably won’t have the new menu system built in unless the theme designer has updated it since it was released. Thankfully, adding the menu to your template is very straight forward. To call the navigation menu all you have to do is use the command below (we will talk about the parameters you can pass to the function shortly):

 <?php wp_nav_menu($args); ?>

You simply need to add the above code to the area you want your menu to be displayed (e.g. header, footer etc). If you are only planning on adding one menu, that’s the only call to the function you need to make in your template. If you are planning on adding two or more menus, you need to add some code to your functions.php template. Through testing I verified that wp_nav_menu() will simply call the first menu added unless specified i.e. if you don’t add the appropriate code to the functions.php template the same menu will be linked in the header and footer even if you have created separate menus for each area.

WordPress states that:

If not given a theme_location` parameter, the function displays:

  • the menu matching the ID, slug, or name given by the menu parameter, if that menu has at least 1 item;
  • otherwise, the first non-empty menu;
  • otherwise, output of the function given by the fallback_cb parameter (wp_page_menu(), by default);
  • otherwise nothing.

If you are using WordPress 3 or higher you will see the menu tab at http://www.yoursite.com/wp-admin/nav-menus.php. If your theme doesn’t have the menu system integrated, you should see a note in ‘Theme Locations’ which states your theme doesn’t support menus.

WordPress 3 Theme Locations

This message appears as you have not yet registered any menus in your functions.php template file. The code below shows you how you can easily register three menus for your theme.

// Registering Menus For Theme
 
add_action( 'init', 'register_my_menus' );
 
function register_my_menus() {
	register_nav_menus(
		array(
			'primary-menu' => __( 'Primary Menu' ),
			'secondary-menu' => __( 'Secondary Menu' ),
			'tertiary-menu' => __( 'Tertiary Menu' )
		)
	);
}

You should of course register your menus with names which make sense to you. For example, if you were planning on adding a main navigation menu in your header, a category menu in your sidebar and an advertisement link area in your footer; you could use something like:

// Registering Menus For Theme
 
add_action( 'init', 'register_my_menus' );
 
function register_my_menus() {
	register_nav_menus(
		array(
			'main-nav-menu' => __( 'Main Navigation Menu' ),
			'sidebar-menu' => __( 'Sidebar Menu' ),
			'footer-menu' => __( 'Footer Menu' )
		)
	);
}

Once you have added the code to your functions.php template, you will notice that the theme location area at http://www.yoursite.com/wp-admin/nav-menus.php has been updated with the menus you registered. You can now choose the appropriate menu and assign it to the area you want.

WordPress 3 Theme Locations

In total wp_nav_menu has 15 parameters to choose from. To specify what menu you are calling, you need to use the $theme_location parameter, referencing the name you registered in your functions.php template.

For example, using the example I used above; after I have registered my three menu areas in functions.php, I would add the following code to my header.php template to display my main navigation menu:

<?php wp_nav_menu (array ( 'theme_location' => 'main-nav-menu') ); ?>

I would then add this code to my sidebar.php template to add the sidebar menu to my theme:

<?php wp_nav_menu (array ( 'theme_location' => 'sidebar-menu') ); ?>

Finally, I would add the code below to my footer.php template to add the footer menu to my theme:

<?php wp_nav_menu (array ( 'theme_location' => 'footer-menu') ); ?>

Of course, the examples above only have one parameter. Depending on how we have styled our menus, we may pass several to the function. Here is a list of the 15 parameters you can use with wp_nav_menu().

  • $theme_location – The menu you want to display (as registered in your functions.php template).
  • $menu – Call a menu using id, name or slug.
  • $container – Whether to wrap the ul tag with a div or nav.
  • $container_class – The class that is applied to the container.
  • $container_id – The id that is applied to the container.
  • $menu_class – The class to be applied to the ul element of the menu.
  • $menu_id – The id to be applied to the ul element of the menu.
  • $echo – Whether to echo the menu or return it.
  • $fallback_cb – If no menu exists, which fallback function to use.
  • $before – Text before the anchor link.
  • $after – Text after the anchor link.
  • $link_before – Text before the link text.
  • $link_after – Text after the link text.
  • $depth – How many levels of the menu hierarchy to be displayed.
  • $walker – Custom walker object.

Styling Your Menu

You should by now have a basic understanding of how to add a menu to your theme. As always, I recommend trying this process in your WordPress Test Area before adding it to a live website. It is relatively easy to add the new menu system to your theme however it will probably take you a little while to get your menu styled exactly the way you want it (unless you’re a CSS whizz!).

I was lucky that I didn’t have to style my menu from scratch, I just had to make sure I changed the previous code in my header template to link to my classes correctly using the wp_nav_menu function. As you can see from the image below, at the time of upgrading my menu my navigation menu had a number of unique features such as a dark background image, a unique image for the home page link and a search box.

Adding A Navigation Menu To Your WordPress Theme

One of the first things I had to address was ensuring the navigation background container was linked properly. WP Mods author Pippin Williamson advised that he usually puts a wrapper around the menu and then styles the ul and li elements accordingly. This is how I assume most CSS coders do it. As we saw previously, we could also specify the container with a parameter.

For example, if we wanted to wrap our menu using the class menu-wrapper, we could do it like this:

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

This could also be achieved by using the following:

<?php wp_nav_menu (array ( 'container' => 'div', 'container_class' => 'menu-wrapper' ) ); ?>

In the end, I had to use wrap my menu inside a division rather than specifying the container through the wp_nav_menu function, as I wanted to include a search box at the right hand side of the menu.

As I noted above, the home page link on WP Mods uses an image. Thankfully, styling an individual link in a WordPress menu is very easy. Clicking on the ‘Screen Options’ link at the top of the Menu page will bring down a drop down menu. From there you will find an option to display ‘CSS Classes’ under the heading ‘Show advanced menu properties’.

Screen Options CSS Classes

Once you have clicked on ‘CSS Classes’ you will have the option to see a new option in your links which lets you customise each link individually. This allowed me to style my home page link differently by creating a class called ‘home-page’. By using this method you can customise each link in your menus differently. This can be useful, particularly for those who want to use images as links in their menu or add images beside their links.

Custom Navigation Style

There are also several default classes which allow you to change the link of a page which is currently being viewed. WP Beginner have a fantastic walkthrough entitled How to Style WordPress Navigation Menus which details these classes. Classes include current_page_item, which let you style the current page; and menu-item-home, which lets you customize the home link (though I preferred linking via the menu widget).

Classes List:

  • current_page_item – Style the current page.
  • current-cat – Style the current category.
  • menu-item – Style any other menu item.
  • menu-item-type-taxonomy – Style category links.
  • menu-item-type-post_type – Style page links.
  • menu-item-type-custom – Style custom items.
  • menu-item-home – Style the home page link.

Summary

I’m a huge fan of the way WordPress allows you to easily add Navigation Menus. If your current theme does not have this feature integrated then it may be worth upgrading your design with the code discussed in this article so that you can modify links in future easily.

I don’t profess to be an expert on WordPress menus however if you are unsure about any aspect of this tutorial please leave a comment and I’ll do my best to help.

Good luck,
Kevin

Useful Links

)
Codeable info

Comments (22)

Comment by Victoria says:

Hi! I’m trying to create a menu in the header, I followed every step and it works correctly, but on the right side of the page it shows a vertical dotted line. What did I do wrong? I checked the code and there shouldn’t be a problem.
By the way, thank you for the article!!

Comment by Sanrego says:

Dear Kevin

I want to make a NAV MENU inside my post, is it possible ??
Please let me know if its possible.
Please explain in easy way Iam a super newbie.
Thanks.

Comment by Michael says:

Thank You. I struggled a lot to get my menu to function properly. Thanks again for a clean explanation.

Comment by SIngh says:

Hi Kevin,

I am trying to integrate a menu like http://www.mashable.com.
I have an html file and a css and img folder.
Could you guide me how to integrate it in wordpress.

Cheers
CJ

Comment by subhasmita says:

hello sir,i just want to add 3 menu(contact us,partner,map) above the slideshow on right top corner of the slide. so can u plz tell me the process how to do it ???plz give me an email as soon as possible on regarding this problem…….

Comment by Tran Dinh Khanh says:

Great post!
But I wish you will try a nicer code syntax highlighter.
Yours is not the best xD

Comment by jitendra says:

Thank you, very helpful to me in updating an old theme.

Comment by graham says:

cheers for this m8 have been trying to activate the menu option in my wordpress theme for the past few hours, thought i was gona be stuck with having to edit the menu in my <a href=”http://www.tradeboxdesign.co.uk”>websites</a> html every time i needed to add or change a nav.

Comment by healthyblender says:

I’m designing my first theme and I have to say this has been a really helpful post for me. Thank you!

Comment by Sam says:

Thank you so much..Thanks Pippin for the corection.

Comment by wordpresslover says:

Thanks..helped very much…

Comment by John says:

thanks, but how do I add wp_nav_menu to admin bar (now it is toolbar)?

Comment by Michael Gorey says:

Thank you, very helpful to me in updating an old theme.

Comment by Matt says:

Where in header.php would you put
‘main-nav-menu’) ); ?>

Or any of the menus created?

For example… lets say you’ve create numerous template pages for a site each with their own headers… and corresponding navigation.

How would this work?

Comment by kevin clauwaerdt says:

aargn brains can’t handel it, i’m a total noob in php lol
i manage to do the first part, that my theme supports 2 menu’s now, and then i’m stuck, dunno where to put the ‘Top-Menu ) ); ?> part in the header so on http://www.playr00m.be the menu wil be the cosum menu … i could use help pls ?

Comment by Sairah says:

This was so well explained and super helpful–thanks! Also, easier than I thought. I was missing one step in between every time I would try before and it just made things seem so inconceivably complex.

Comment by Kevin Muldoon says:

Hi Larry,

I have never used the thesis framework so I am unsure how this would work when using that theme.

That being said, it seems that the nav menu you have created is not linking to the class for your nav menu. Your home page nav is wrapped by a div id called page and the ul class (i.e. $menu_class) is called menu. I would try and make sure you are passing the correct parameters through so that the correct styling is used.

Again, I have never used Thesis so I am unsure if things work a little differently.

Comment by Larry says:

Thanks for the great article.

I’m familiar with css and html, but very new to php.

I’m trying to call the WP (or Thesis) nav menu to a template page.

1) I created a new template (a basic dreamweaver template) – that does not include my own navigation area – and called it experimenttemplate.php

2) Then I included the call to the nav menu with which I put in the body of the template . (I didn’t create new div here to put it in).

3) Then I created a few pages and, under “page attributes” assigned them to the “experimenttemplate” template.

When I view the templateexperiment page I see the navigation links (they are just text with underlines) on the upper left. The issue is

1) they are not style anything like wp navigation. How can I get it to inherit the WP styling?

2) Only the first level of navigation shows. The pages that reference “experimenttemplate page” as a parent, do not show up. What do I need to do here.

Obviously, I needed to create a div called nav or header and include some php to call up the wp nav styling. But Iâ€â„¢m not sure how?

The site that Iâ€â„¢m using to learn how to do this is called : http://www.familymemorybank.com .
(the home page is using the WP nav â€â€œ as it is not linked to the template)
The template page in question is familymemorybank.com/experimenttemplate/
(and the child pages are:
http://familymemorybank.com/experimenttemplate/under-experiment/
http://familymemorybank.com/experimenttemplate/whatnoway/
Can you help? I looked at numerous articles on WP, on Thesis about the nav menu, but none seem to describe the basics on what you are suppose to do (for beginner like myself).
Thank you ,
Larry Ross

Comment by Kevin Muldoon says:

Which theme are you using? If you registered the menus in the functions.php template it should show in the menu area.

Comment by SABOND says:

Please guys help me, I have just blank theme I cant figure out how to add menu support to the theme, I tried your trick and it doesn’t work… I tryied to add support of sidebar to my theme and it was easy – I’ve just added into functiions.php this code and WordPress started support sidebar. Which code I have to add to solve this problem? (The message hi shows me is: The current theme does not natively support menus, but you can use the âہ“Custom Menuâ€Â widget to add any menus you create here to the themeâ€â„¢s sidebar.)

Comment by Kevin Muldoon says:

Thanks for picking that up. haha that actually makes more sense anyway i.e. why would it have current in the class name if it was any other menu item :)

It’s a useful function once you read into it.It’s just unfortunate there’s not more documentation on WordPress.org on styling menus.

Comment by Pippin says:

Excellent overview, Kevin. There is one small error however. In your classes list, you list a class “current-menu-item”, and say that it refers to any menu item. The class should be “menu-item”.

Thanks!

Codeable info