Blog:

Perhaps one of the biggest holes in WordPress prior to version 3 was the lack of custom menu support. Menus often had to be hand coded into header.php and, whilst they could be ‘smart’, it often let the client needing a PHP savvy developer to make alterations to the setup.

That was then. Now, at (long) last, we are able to give some of this control back to the client. Or, if you’re using WordPress for your own site, you’re able to take control of your menu system with a wonderful new drag-and-drop GUI rather than diving into the code.

New Menu System

The menu system is based on WooNavigation, a custom menu system used by the ubiquitous WooThemes in the latest versions of their custom framework. Although much of the code was rewritten for WordPress 3, the similarities are still clear.

Adii Pienaar from WooThemes recently told me:

“The new menu system that WooThemes contributed is firstly long overdue and is a massive benefit to every single WordPress user. In essence, this is such a basic feature of any CMS, but due to it being a benefit to all WP users, I think this is a significant new addition.”

Chris Coyier from CSS Tricks agrees:

“Personally I think this is a big step forward because, together with Custom Post Types, it is migrating WordPress towards a fully fledged CMS. The more power we can give the end user, the easier it is for developers and designers with an understanding of PHP to use WordPress as a content management solution.”

So, without further ado, let’s take a look at how it all works. Grab yourself a WordPress 3 install with a bunch of pages and a refreshing beverage. It’s thirsty work.

Activating a Custom Menu

If you’re using WordPress 3 with the (brand new) default Theme TwentyTen installed this next bit won’t apply, because it’s already set up to use custom menus, so let’s assume you’re working with an older theme or perhaps even building your own. When you log into WordPress, go to Appearance > Menus.

If your current theme doesn’t support custom menus you’ll see this error message:

This means we need to head over to functions.php and get our hands a little dirty with some code. Open up functions.php and add in the following code:

add_action('init', 'register_custom_menu');
 
function register_custom_menu() {
register_nav_menu('custom_menu', __('Custom Menu'));
}

register_nav_menu has two parameters here, the first is the slug we’ll use in our code and the second is the name our menu will have in the WordPress admin area.

Now before we head back over to the menu screen, let’s stay in the source code and tell WordPress wear to put this menu. The most likely place will be in header.php, but of course there is no reason you can’t put a menu anywhere on your page. To keep things simple for our first menu let’s open header.php and, at whatever point makes sense in your theme, add the following line:

<?php wp_nav_menu(array('menu' => 'custom_menu')); ?>

With just the default ‘About’ page in our theme, if we look at our site we’ll see the following in the source code:

<div>
<ul>
<li><a href="the-link-in-here" title="About">About</a></li>
</ul>
</div>

And that’s all there is to it! Of course, we can add in a bunch of options into that array. You can check out the details over at the WordPress codex and here are a few of the more important ones explained:

• menu – which menu to call. In our example we only have one but you can set up as many menus as you like
• container – what element is wrapped around the menu. The default is a standard <div> but if you’re playing with the new kids over at HTML5 you could always change this to <nav>
• container_class – the css class given to this container, helpful for custom styling
• menu_class – the css class given to the <ul> that is rendered. The default is ‘menu’, and again this is helpful for custom styling.
• depth – How many levels should the menu display. The default is 0′ which means all levels, but you can set this to perhaps 1′ or 2′ to limit how far a drop-down menu will render. Handy stuff!

That’s probably enough for our purposes, but it’s definitely worth checking out the WordPress codex because there are many options you can set, like adding text before and after menu items and links.

Using the GUI

So let’s get cracking with the user interface, where much of the magic happens.

The first thing we need to do is create our first menu (remember, we can have multiple menus) so I’ll imaginatively create one called ‘Our First Menu’. Type that in to the Menu Name field and hit the Create Menu Button.

Did you spot the check-box ‘Automatically add new top-level pages’? Well, do you?

Normally I don’t, because I figure if we’re going to the trouble of making a custom menu we probably don’t want it doing anything automatically. After all, we want complete control over our menu, so I don’t want WordPress dropping in a new page every time we create one. Maybe you do, and that’s okay with me too :)

Excellent! Our first menu is empty but we’re well on our way. Over on the left we’re told that our theme currently only supports one menu so we best make sure we’re using ‘Our First Menu’. Select it in the drop-down, and click Save.

Adding Pages to our Menu

So we’ve created a place in our theme for the menu, and now we’ve created the menu itself. Trouble is, there’s probably nothing in it. WordPress gives us three easy ways to add content to the menu, and the great news is that it doesn’t have to be content that sits in the WordPress site. For example, the first box on the left you’ll see is for Custom Links.

You could perhaps link to your twitter account like I have in the screen-shot above, and just click ‘Add to Menu’. It might be your portfolio, which you’ve hosted elsewhere, or links to live client sites. It might even be links to your favourite news sites. Whatever you choose, it’s great to know your menu can take your visitors anywhere.

The second (and probably most often used) way to add content to the menu is in the Pages’ box, under ‘Custom Links’.

As you can see, I’m working on a fresh install of WordPress 3 which gives me just two pages – Home, and About. Now ‘Home’ strictly speaking isn’t a page in the default configuration (although you can change that). For me, ‘Home’ is whatever resides at and in index.php.

Notice the tabs at the top of the ‘Pages’ box, which allow you to hunt around through content rich sites for exactly the pages you want. If you’re setting up your menu for the first time you might want to look in the ‘View All’ tab, or if you’re just adding in a page you might want to ‘Search’ for it.

I’m going to select both Home and About so I’ve got something to play with. If I hit ‘Add to Menu’ you can see that my menu is really starting to shape up.

Finally we have the ‘Categories’ box, which acts in much the same way as the ‘Tabs’ box. Again, as this is the default install of WordPress I only have one category, the much maligned ‘Uncategorized’.

I’m going to select it (most of my posts often accidentally end up in uncategorized!) and ‘Add to Menu’. This is what we now have:

Now before we move on you need to ‘Save Menu’, so go ahead and click it.

To prove that this has worked we can load up my simple blog (which has the TwentyTen theme installed) and marvel at it’s glory.

Menu Hierarchy

That’s cool but it’s also only the beginning. The next thing to look at is ordering your menu hierarchy. So far the menu items have just appeared in the order we added them, but we probably want to change this. The good news is that this the whole system is drag-and-drop, so go ahead and move things around.

What you’ll also notice is that you can create a hierarchy by dragging items onto other items. I’ve added a few more pages and created something that looks like this:

You can see I’ve created a hierarchy of pages as indicated by their indents, and I’ve also changed the name of ‘uncategorized’ to ‘The Blog’. If we whizz on over to the actual site, we can also see that WordPress has created a funky drop down menu for me.

Now it’s worth noting that TwentyTen is designed to style the menu as a drop-down, and that the actual HTML WordPress generates looks like this:

<div>
<ul id="menu-our-first-menu"><li id="menu-item-5"><a title="The home page" href="http://localhost/">Home</a></li>
<li id="menu-item-6"><a href="http://localhost/?page_id=2">About</a>
<ul>
<li id="menu-item-23"><a href="http://localhost/?page_id=9">Our Company</a>
<ul>
<li id="menu-item-21"><a href="http://localhost/?page_id=13">The Team</a></li>
</ul>
</li>
<li id="menu-item-22"><a href="http://localhost/?page_id=11">Our Products</a></li>
</ul>
</li>
<li id="menu-item-20"><a href="http://localhost/?page_id=15">Get in Touch</a>
<ul>
<li id="menu-item-19"><a href="http://localhost/?page_id=17">Office Locations</a></li>
<li id="menu-item-4"><a href="http://twitter.com/richardshepherd">My Twitter Stream</a></li>
</ul>
</li>
<li id="menu-item-8"><a href="http://localhost/?cat=1">The Blog</a></li>
</ul>
</div>

A Few More Options

You should also be able to see in the Menus admin that each menu has a drop-down arrow. Click on it, and you’ll see there are a few things you can tinker with.

• URL - The url which the menu item links to
• Navigation Label - What it will actually say in the menu
• Title Attribute - Useful for making your menu accessible, and you could also use some jQuery to grab this and create a piece of ‘description’ text
• Remove/Cancel - No prizes here

Menu Widgets

There’s one more thing we’ll look at in this introductory tutorial, and that’s the menu widget. So far all we’ve done is actually create a menu in our header and stick ‘Our First Menu’ into that hook. There is one other thing Custom Menu’s do out-of-the-box. In the WordPress admin head on over to Appearance > Widgets and we can take a look at the Custom Menu Widget.

It should be sitting under Available Widgets, so drag it over to one of your widgetized areas and let’s take a look at the options:

As you can see, there aren’t many! You can give the widget a title (I’ve called mine ‘Our Menu Widget’) and then select which menu you have created to use. Now we only created one menu in this tutorial, but you could of course create a second and drop it in here. Click ‘Save’, head on over to your site and you should see something like this:

And that’s it! Great for a sitemap-like feature, just remember that if your menu doesn’t automatically update when you add new pages neither will this widget.

Just the Beginning

As you can probably tell, there’s a lot going on with the Custom Menu feature. I’ve tried to stick to the basics here and focus on the GUI, but there is a lot more going on under the hood that is also worth looking into. If you feel confident with PHP then start playing – there’s so much more you can do.

If all you are looking for is a simple way to create and manage menus for you and your clients, we hope this overview gets you started. As always, we welcome your comments and look forward to seeing Custom Menus on your WordPress sites!