Categories
24 Days of WordPress Tutorials

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.

WordPress 3 MenusTo 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.

WordPress 3 MenusAt 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.

Adding new buttons to the WordPress 3 menuNow 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.

Moving WordPress 3 menu itemsNow 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.

WordPress 3 menu item configurationFor 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

Fancy WordPress 3 menus with HTMLThat’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.HTML in WordPress 3 menusNow 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

Custom Menu WidgetIf 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.

By Morten Rand-Hendriksen

Morten Rand-Hendriksen is a staff author at LinkedIn Learning and lynda.com specializing in WordPress and web design and development and an instructor at Emily Carr University of Art and Design. He is a popular speaker and educator on all things design, web standards and open source. As the owner and Web Head at Pink & Yellow Media, a boutique style digital media company in Burnaby, BC, Canada, he has created WordPress-based web solutions for multi-national companies, political parties, banks, and small businesses and bloggers alike. He also contributes to the local WordPress community by organizing Meetups and WordCamps.

4 replies on “Day 4: Using WordPress 3 Custom Menus”

Hi again Morten, I have a large number of these custom menus for my site. Is there any way to rearrange the order in which the menu names (the horizontal tabs) appear in the WordPress GUI? This would be strictly for organization. Thanks.

Great post, one question though, when you add a title in the widget section, how can you change the tags, it wraps the title by default in a but I want to change this to a tag, don’t suppose you would know the best way to do this??

Thanks

Comments are closed.