Add Custom Menus to WordPress 3+ Themes
WordPress 3 added plenty of new features – and one of the most useful was the ability to create and add custom navigation or menus to your themes. Whilst they are very simple to implement, they are also extremely flexible, allowing you to add not only pages, categories or posts to your navigation, but also custom links.
Custom menus are a huge bonus for WordPress users. They allow you to easily create a navigation structure, filtering the content and cherry-picking what you want to include. By default you can add pages (and sub-pages) or categories, but you also have the ability to to add links of your own choosing, such as individual posts or external content.
There are a couple of simple steps to add a custom menu to your theme, and you can either do this with a text editor (such as the excellent Espresso, read my review here) or with the built in WordPress Editor, found under the Appearance menu.
Open your theme’s functions.php file and add these lines before the closing ?>
// allow for custom menus
add_theme_support( ‘menus’ );
This prepares the theme to accept the custom menus. Now open your header.php (assuming that’s where you want it to go – more about this later…) and add the function in where you want it to appear:
<?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'container_class' => 'main-nav' ) ); ?>
This tells WordPress a couple of things; to sort the menu to match how you set it up in the Menus panel, and the name of the class (main-nav) that you have given the container for styling. Now, hop over to Appearance > Menus and you’ll see your new custom menu.
You can set it up to automatically add new main/top-level pages as you create them by checking the box next to your Menu Name. On the left, check the pages or categories you want to include and click the Add to Menu buttons. Once they are on the menu, you can simply click and drag them into the order you want, placing sub-menu items by ‘indenting’ them as you drag. You’ll see a dotted border showing you the sub-level each item will appear at. Click the disclosure triangle for each item to change the navigation label and set a title attribute, or remove the link from the menu altogether.
Custom links can be added by entering a URL, setting a label and adding them to the menu, where you then control their placement in exactly the same way.
If you want to add multiple menus to your theme, you need to give them unique IDs, slugs or names. More here at the WordPress codex. There is also a very helpful post here over on Justin Tadlock’s blog.
All you need to do now is style your menu and you are all set to go!
For anyone who is interested, here is a link to the stylesheet for the custom menu on this site: custom-menu stylesheet css file.other page