The Ultimate Guide to WordPress 3 Menus

When building a WordPress theme menus can be a major headache and source of trepidation. Luckily for us, WordPress 3 brought along with it a much-awaited menu creation system which makes life much easier for us. Let’s take a dive and explore the aspects of menu creation in WordPress.

Where to Find the Menu Builder

menu builder

First of all, where can you find the new menu builder? It is located under the Appearance menu item in wp-admin. Click Menus and you will enter the menu management section. Here you will find a complete menu creator and builder that conveniently lets you add items to your menus through a drag and drop interface.

Creating Your First Menu

Let’s say your site contains a main menu, as most sites do.

  1. In your Menus screen find the ‘Menu name’ text box and enter Main menu.
  2. Click on the ‘Save Menu’ blue button.
    Your new menu will now appear in a tab. Notice that the ‘Theme locations’ section is telling us that our theme does not yet support menus. Time to fix that.

Add Menu Support and Register Positions

In order to enable menu support and register a location for our new menu, enter the following into your theme’s functions.php file. Once you save the file go back to the Menus screen and set the theme location as in the screenshot.

Adding menu items

After a menu is created, then detail items can be added to the menu. Choose items like custom links, pages, and categories, from the left column to add to the menu. If you have created custom post types or custom taxonomies those too can be added to menus. If you don’t see your custom post types or taxonomies, look under the Screen Options to make sure they are checked to be Show on Screen.

After items have been added to a menu, drag and drop to put them in the order you want. You can also click each item to reveal additional configuration options. You can also drag a menu item a little to the right to make it a submenu, to create menus with hierarchy. You’ll see when the position of the drop target shifts over to portray the nested placement. When you have finished building your custom menu, make sure you click the Save Menu button.

You can specify a different navigation label for a menu item as well as other attributes.

Inserting a menu into your theme

Inserting a menu into your theme is also a piece of cake, just put the following code into your theme where you want the menu to appear:

Replace the ‘main-menu’ part with the name of your location if you had chosen another name when registering the menu earlier on. You can have as many menus as you like. Just be sure to change the theme_location.

You’re allowed even more control.  wp_nav_menu() has several parameters you can use when displaying a menu.

  • theme_location: The menu to call that is associated with the specific theme location.
  • menu: Call a specific menu ID, slug, or name.
  • container: The element that wraps around the list. The default is  div but can be changed to  nav if you’ve moved on to HTML 5.
  • container_class: The CSS class of the container.
  • menu_class: The CSS class given to the unordered list. This defaults to  menu.
  • fallback_cb: A function to call in the event that no menu items have been given. By default,  wp_list_pages() will be called.
  • before: Text that is displayed before the link text but within the link.
  • after: Text that is displayed after the link text but within the link.
  • link_before: Text that is displayed before the link.
  • link_after: Text that is displayed after the link.
  • depth: How many levels the menu should display, which is useful for things like drop-down menus. This is set to  (any level) by default.
  • walker: Allows a custom walker PHP class to be defined to create the menu.
  • echo: Whether to display the menu or return it for use in PHP. This defaults to  true and displays the menu.

Building a Sitemap

The wp_nav_menu function can easily be used to build a sitemap for your site. We are going to go one step further and also register a shortcode for it. So after entering the following code in your theme’s functions.php file, you can insert the shortcode [listmenu menu=Sitemap] (replace Sitemap with the id, slug or name of the menu you want to list) anywhere on your posts or pages in order to output a sitemap which you’d have created in the Menus screen.

You can also use all the variables that come with the new wp_nav_menu function, like menu_class, or container so you can customize your menu really easy. Just separate the attributes by space like so:
[listmenu menu=Sitemap menu_class=sitemap_menu]

Credit for sitemap shortcode idea: CozmosLabs

About Jean Galea

Jean Galea is a WordPress developer, entrepreneur and padel player. He is the founder of WP Mayor, the plugins WP RSS Aggregator and EDD Bookings, as well as the Mastermind.fm podcast. His personal blog can be found at jeangalea.com.

Related Posts

6 Responses

  1. Bernard Badilla
    Bernard Badilla April 13, 2011 at 06:22 | | Reply

    Thanks for sharing this article guide. I’m using custom menu but I don’t know how to use it. Thanks now I know what to do after reading this.

  2. kevin chard
    kevin chard April 15, 2011 at 17:05 | | Reply

    Great tutorial, the site map idea is interesting. This tutorial is something that will really help people that are new to wordpress menus. On wpsnipp.com I posted a simple little snippet to show and alternative menu to logged in users.

    http://wpsnipp.com/index.php/theme/display-different-menus-for-logged-in-users/

    Once again great tutorial,

  3. Keith
    Keith June 28, 2011 at 14:22 | | Reply

    Nice write up! Can you show the code to add more Menu groups, like Side-Menu, Bottom-Menu. I think this would really complete your Ultimate guide 🙂

  4. samir
    samir January 31, 2013 at 14:55 | | Reply

    Thanks dude

  5. Andre
    Andre July 26, 2013 at 13:00 | | Reply

    Hi Jean,

    Great tutorial and idea. Have one problem thought…
    I can’t seem to be able to display the sub-pages of that menu?
    Is there anything I have o do write to make it work?
    Thanks a lot!

Leave a Reply