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 WordPress 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 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 WordPress 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 straightforward. 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):
Add Code
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’ that states your theme doesn’t support menus.
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.
You should of course register your menus with names that make sense to you. For example, if you were planning on adding the 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:
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.
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:
I would then add this code to my sidebar.php template to add the sidebar menu to my theme:
Finally, I would add the code below to my footer.php template to add the footer menu to my theme:
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:
This could also be achieved by using the following:
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’.
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.
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
- Function Reference: wp nav menu
- Goodbye, headaches. Hello, menus!
- How to Style WordPress Navigation Menus
- How To Add Your Own Classes To The Last Item In A WordPress 3 Nav Menu
