WordPress Adding Navigation Menus


<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘top-menu’ ) ); ?>

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.

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

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.

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( ); ?>

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 customise 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.


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,

Useful Links

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s