Day 4: Using WordPress 3 Custom Menus

In this Fourth Day of WordPress let’s take a closer look at the new custom Menus function that was introduced with WordPress 3.0. You may already be aware of this function, and you may even have used it before, but it has some pretty nifty uses you may not be aware of, so please read on.

Basic menu creation

Assuming you’re working with a theme that supports WordPress 3 menus, actually making a menu is very easy. I’m using twentyten as an example here but it’s the same for any theme with this function installed. If you haven’t created a custom menu yet WordPress will insert a menu consisting of a Home button plus a list of all your top-level pages. Any children of these pages will be listed in the drop-down elements.

To get to the menu option go to Appearance -> Menus. Here you will see the standard Menu dashboard. Opening it for the first time there are no menus defined and it is empty. To start off you need to insert a Menu Name and click the Create Menu button. Now you have a custom menu you can work with.

At the top left is a box labeled Theme Locations. Depending on what theme you use there can be one or several locations listed here. Below each location is a drop-down box where you can pick what menu goes in that alocation. For twentyten there is one theme location and that’s where you want your custom menu to appear so select it and click Save.

Now it’s time to add some menu elements. You can add one of three types of elements: Custom lins (pointing to anywhere within your site or on the web), Pages and Categories. This is what makes the menu feature so powerful: You can now create a custom menu with a mix of different types of links. In the past this required either a hard-coded menu, a pile of theme hacks that were quite complicated or a dedicated plugin. No more of that nonsense. To add menu items simply select them and click Add To Menu and they appear. Note that if you want a dedicated Home button select the View All tab under Pages and you’ll be able to select it from the list.

Now comes the fun part: With menu items added to your custom menu, you can move them around and organize them in hierarchies simply by clicking and dragging them around (see image above). This means you can modify your menu on the fly to fit your own preferences or those of your visitors. In short, your menus are not static any more but dynamic entities that can be changed and configured at any time.

When you click the Save Menu button and go to your site you’ll see that your new menu has replaced the default one. Very neat. But that’s just the beginning.

Menu item customization

Each of your menu items can be customized in some useful and surprising ways. I’ll give you some examples.

For each menu item you can make in-menu changes to the Navigation Label (the actual text that appears in the menu) and the Title Attribute (the screentip that pops up when people hover over it). For the custom link menu items you can also change the URL. To access these options simply click the little down arrow on the right side of each item tab. As a rule of thumb every menu item should have a defined and descriptive Title Attribute. This is both for people who are accessing your site using a text-to-speech browser, text-only browsers and also for your primary blind reader Google. When you make changes to the menu items remember to click the Save Menu button in the top right corner, otherwise the changes are not saved. From within the menu item configuration area you can also Remove any menu item from this menu. Doing this does not delete the content, just removes the menu item.

Fancy Menus With HTML

That’s all well and good, but I’m pretty sure if you’ve played around with these menus at all you already knew all of this. So here’s something you most likely didn’t know: The Navigation Label field can receive HTML code! The image above shows the header menu we built for the 12×12 Vancouver Photo Marathon website. As you can see each of the menu items contains more than just one or two words, and the content within each item is split into two separate styles: an all-caps main title and an all lowercase description. To achieve this we simply inserted some HTML into the Navigation Label field of the menu items as you see in the image below.Now just so we’re clear: Getting this to work requires quite a bit of style code – it’s not automatic.

I’ve tested this extensively, and the menu items will simply feed out pretty much any HTML you stuff the Navigation Label field with. That means you can create some pretty ridiculous conflicts if you’re not careful. For example, you could insert an <a href> tag in the Navigation Label field that points somewhere entirely different than the menu item itself. This can produce some rather unfortunate results. You can also stuff it with active JS and even embed and iframe codes. I do not recommend it. Sticking with simple <span> tags and other stylistic elements is safe.

Custom Menu Widget

If you have already filled out all your theme menu areas or you want to create an additional menu somewhere else you can use the Custom Menu widget. This widget allows you to place any of the menus you create within the Menus area in any widgetized area. That means you can add a custom menu to your sidebar or any other widgetized box, for example in the footer. Twentyten comes with a huge pile of widgetized areas you can populate with custom menus.

To use the Custom Menu Widget to to Appearance -> Widgets, locate the Custom Menu widget and drag-and-drop it to your desired widgetized area. Once there you can give the custom menu a title (if you don’t give it a title it will appear without one) and select which of your custom menus to display.

Using the custom menu widget in conjunction with the theme menus you can create a whole variety of custom navigation scenarios depending on where the user lands on your site. This shows just how useful and revolutionary the custom menu function in WordPress 3 really is. Now that you know, go out and make some cool menus of your own!

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.