WordPress 3.0 Built-in Menu System

WordPress 3.0 beta 2

WordPress 3.0 beta 2

Exciting news! WordPress 3.0 becomes nearer and nearer. May 6, 2010 WordPress development blog announced WordPress 3.0 beta 2 availability and left a word about release candidate :).
What’s new in this beta? As declared at the development blog:
* Revised menu user interface;
* Changes to the WordPress exporter and importer to make it more flexible.
If you wish to test WordPress 3.0 beta 2 you can download it here.
Let’s see together what we can do with new WordPress 3.0 built-in menu system management interface and how to use it. Example and screenshots use the new WordPress 3.0 default Twentyten theme.
Just after installation when you have not any menu in the list WordPress includes into menu links to the blog root (Home) and all your blog pages. On the fresh new installation it is the only one About page. So we have menu with 2 items (Home and About) by default:
Menu by default on empty fresh installation

Menu By Default


If default auto-made menu (Home link and few pages you have) is enough for your site, you may left it as it is. If you need more, for example you have a hundred of pages and there is no place in the menu for all of it of course, or you wish to add some custom links to your menu, then you need to create your own, so-called custom menu.
Where does your blog menu live? Go to Admin dashboard Appearance section and click the Menus menu item:
Empty menu list by default

Empty menu list


Menus screen is divided on two sections:
– menu items constructor from the left. It consists of “Custom Links”, “Pages” and “Categories” subsections;
– menu editor section to the right. You can create new menu there, rearrange selected menu items, delete unneeded menu.
Start with creation of new custom menu. To create a custom menu, input its name into “Menu Name” input box and click Create Menu.
Create new menu

Create new menu


Then input/select items like custom links, pages or categories from the left menu items builder column to add to this menu:
– Custom Links: input link URL and menu item label and click “Add to Menu” button;
– Pages and Categories: turn on checkbox near page or category you wish to see at your menu and click “Add to Menu” button. As the result you can get something like this:
Test custom menu

Test custom menu


You can edit any item at any time by click on the right side down arrow at the menu item title. Do not forget click “Save Menu Item” button when you finish editing.
To change menu items order you can use drag and drop technique: just drag menu item to place according with its new order.
Finally you will get your blog menu updated:
WordPress blog menu in action

WordPress blog menu in action


Menu item background becomes lighter when you move mouse pointer over it.
Adding submenu to some of the menu item is quite simple. 1st, add menu item which will be submenu item. 2nd, drag this item to the menu item under which you wish to have submenu and drop on it. That’s all. Simple, right?
You can create multiple menus. To create another menu click tab with the plus symbol to the right from existing menu tab. Then act as described above already for new menu creation.
Add another menu to existing one

Add another menu to existing one


If you have more than one menu defined at your “Menus” system be aware that your “Twentyten” theme uses the 1st one by default.
How to use other custom menus? WordPress 3.0 offers you the new “Navigation Menu” widget for that. Go to Admin dashboard Appearance Widgets link and use “Navigation Menu” widget there:
Navigation menu widget

Navigation menu widget


Place it to the one of available widgets area and input menu title and select menu from the list of available menus:
Configured navigation menu widget

Configured navigation menu widget


As the result you will get such navigation links list at your blog sidebar:
Sidebar menu widget

Sidebar menu widget


For those of you who want more than just static screenshot images WordPress 3.0 in action live video is available:

Link to share this video is WordPress 3.0 menu system in action.

Tags:

  • Pingback: Zeek Interactive : May OC Wordpress Meetup Live()

  • Pingback: WordPress 3.0 Release Candidate 1 | ShinePHP.com()

  • caracarina

    Hi there. I am a complete beginner in wp and really struggling to implement a submenu – my wp dashboard does not have this “navigation menu” widget, I have downloaded a widget to make a submenu (gecka-submenu.0.4.2.1) but I can’t get it to work. This method looks easy enough, but it isn’t in my dashboard. I have the latest version of wp installed. Please help!

  • Hi! Did you tried this?
    Adding submenu to some of the menu item: With menu constractor under “Appearance->Menus”,
    1st, add menu item which will be submenu item.
    2nd, drag this item to the menu item under which you wish to have submenu and drop on it. Then repeat the same with next menu item.

  • Anonymous

    can you please tell me how to remove this from back end widgets section?

  • Just drag and drop unneeded widget to the unused (available) widgets area.

  • I have an even more elementary question. Sometime around the time I upgraded to WP 3.01, my dashboard completely changed in appearance. Doesn’t look like the one in your screen shot any more. Has no descriptions alongside the little icons running down the left side of the screen. All I have are the icons. And I cannot for the life of me figure out how to get the descriptions back. Even after almost six years of working with WP, I don’t remember what all the little icons mean.

    Anyone know how to get the text descriptions back for each?

    Thanks,
    kwc

  • I found the answer to my question about how to restore the dashboard appearance.

    Found it after DAYS of immense frustration and being blind to the simple, elegant solution in the interface. The little fly-out arrow at the top of the column of icons. Tap it and you get the full dashboard. Tap it again and you get the truncated icon-only version.

    Not sure how I bumped it before.

    But all is well now.

    — ken

  • You are not alone with this trouble :). Not the days, but a few minutes I spent exactly to understood what’s happened with WP admin interface, until found that little arrow which I clicked accidentally… I think that arrow could be a larger size, e.g. icon size for example, for WP users convenience. But that depends from WP developers.