While WordPress 3.0 still hasn’t been officially released, the Beta releases have been available for testing for awhile now. A new feature that is getting a lot of press is the menus option. In this post, I’ll demonstrate how this new functionality works. I think you’ll agree that it has significant potential (see the video at the end of the post). In my second post in this series, I’ll delve into the code and show how to make modifications to the display of the menus, using CSS and jQuery.

To follow along, you’ll need to download WordPress 3.o. You can visit the WordPress development blog to find a link to the latest Beta, and soon version 3.0 will be released officially. WordPress.org provides excellent installation documentation if you need help installing.

What is it?

WordPress has come a long way since starting as purely a blogging platform. Thanks to its open framework, it has been modified through plug-ins to be a powerful content management system (CMS). Developers started using WordPress to drive entire sites full of content – not just blogs.  However, to do so required tricks and kludges to work properly. WordPress 3.0 makes the process much easier and truly makes WordPress a viable CMS platform.

Simple Menus Controlled Through WordPress

WordPress has allowed users to create two different types of content – posts and pages. Posts are the blog posts themselves, generated over time. Pages, which are created through a similar interface, were meant to hold static content. All WordPress installations start with a single About Us “page” that the blogger can use to describe themselves. Developers have utilized these “pages” to create entire sites and used WordPress as a CMS so end users could edit content themselves. These developers used to have to manually create the navigation structure though, digging deep into the code, in order to create links to all of the pages they created. With WordPress 3.0, regular users can now not only create pages but also organize and arrange them into menus through the Menus sections’ simple drag and drop interface.

How do you use it?

This post assumes that you’re using the default WordPress 3.0 Theme, called Twenty Ten, which has support for the menu manager built in. My next post in this series will explain how to modify the theme and change the display of the menu.

To explore the Menus feature,  start by creating a few sample pages in your fresh WordPress 3.0 installation. In my visual examples I have created a few pages named after fruits and colors. If you need help learning how to use the WordPress interface to create pages, WordPress.org has excellent documentation.

The Menus page in WordPress 3.0

Once your pages are created, click on the menus link in the left column of the administration area, under the “Appearance” heading. Please note that users need appropriate permissions to access this link. Two new columns of options appear to the right.

The left column allows you to choose the type of link you want to add to your menu. There are three types of menu items you can add:

• Custom Links allow you to add menu items that link to external web pages. Enter the page’s address in the URL box and the name you want to use in the label box. In my visual examples I have used this section to add links to Google and Yahoo!
• Pages is where you add menu items that link to the WordPress pages you have created – in my examples the colors and fruits pages are available to me.
• Categories is the final option, and if you have created categories of blog posts, pages that list all posts in that category appear here.

Select the check boxes next to the pages you want and click add to your menu. Add a few custom links if you’d like as well. These items will now all appear in the right column in a vertical list. The Twenty Ten theme draws the menus horizontally, so you need to visualize the appearance of the items left to right instead of top to bottom.

Organizing Menu Items in WordPress 3.0

Now click and drag the items in the right column – you will notice that you can arrange them and adjust them left and right. The order you arrange them in is the order in which they appear. The adjustments you make left and right determine their hierarchy in the site. The leftmost items are your primary navigation. Items nested one notch to the right are the secondary navigation of their parent, and so on. In the Twenty Ten theme, the primary navigation items appear at all times at the top of the page, and when you mouse over them the secondary navigation menus appear. The third tier menus and so on appear to the right of their parent items when the parent is moused over.

WordPress generates standard XHTML lists for the menus, which a WordPress template developer can then use to style your navigation menus any way you choose. Check back for part two of this series to see an example of how these menus can be modified visually.

Who will use it?

Although this functionality doesn’t seem particularly groundbreaking, it makes the process of adding pages and organizing content vastly simpler than before. Prior to WordPress 3.0 adding pages and updating navigation menus almost always required a phone call to the developer, which meant additional costs and lost turnaround time. Now website owners of nearly all technical skill levels can easily keep their sites updated and organized, without delay and without sacrificing the look and feel of the navigation.

View a demonstration of the functionality below – I first show the menu with 3 items – then I nest one menu under another through a simple drag and drop and reload the page to show the change.

In my next post, I will discuss the code that the Menus function generates, and show you how to add animation and style changes to it. Thanks for reading!