Custom Navigation Menus in WordPress 3.0

One of the most exciting features in the upcoming WordPress 3.0, the custom Menus, has been updated and it now looks much more polished and integrated into the Admin back end of WordPress. You can now add a page, a post, media, tags, categories and even custom links with just a couple of clicks. There’s also a widget for you to drop your menu wherever you want.


One pretty useful feature in the new version is the ability to choose your password at the installation screen. So much for the random generator and password changing each time you activated a new blog. However if you leave the password field blank, the old random password will be generated and assigned.
wordpress-3.0-1

Once the blog has been created,you can go to AppearanceMenus, create a new menu and start populating it. In the final version there will be other panels to add tags and other custom taxonomies and even media.

wordpress-3.0-5

If by any chance you made a mistake or want set up more options, like window target for instance, all you have to correct is to click the Edit link and you get this panel where you can also add a rel attribute to specify an XFN relationship.

wordpress-3.0-6

Now, to integrate the menu into your blog, you have two options at least: use the core widget or call wp_nav_menu. Let’s take a brief look at the first option and aggregate the Navigation Menu widget to some widget area. Notice that the new TwentyTen theme is packed with more widget areas than the previous default theme (TwentyTen is based on Kirby, the new default theme proposed by Ian Stewart). Once your widget has been dropped on some area, you can choose what menu to display.

wordpress-3.0-2

Take a look below at the markup it generates. I’ve dropped the navigation widget on the main sidebar area.

wordpress-3.0-3

Notice the menu class. It’s a class automatically generated for our menu. The function that is generating it is the main wp_nav_menu function, the second option to output a menu. You can’t change the class assigned by default on the widget (at least on this preview version) but you can adjust some parameters when calling wp_nav_menu. As of this preview, you can adjust the following parameters:

  • id – The menu id. Defaults to blank.
  • slug – The menu slug. Defaults to blank.
  • menu_class – CSS class to use for the div container of the menu list. Defaults to ‘menu’.
  • format – Whether to format the ul. Defaults to ‘div’.
  • fallback_cb – If the menu doesn’t exists, a callback function will fire. Defaults to ‘wp_page_menu’.
  • before_link – Output text before the link.
  • after_link – Output text after the link.
  • before_title – Output text before the link text.
  • before_title – Output text after the link text.
  • echo – Whether to echo the menu or return it. Defaults to echo.

If we will call our menu using wp_nav_menu(“menu_cass=cool-menu”); we get this output:

wordpress-3.0-4

Ok, so there are a lot of options to explore in the navigation menus and this is a feature that will come handy for both end users and developers. If you’re eager to try them you can always browse the WordPress Trac and download the latest trunk version.

By the way, today is my birthday 😀

22 thoughts on “Custom Navigation Menus in WordPress 3.0”

    1. Indeed, but it involves coding, so it was more suitable for developers. This UI on the other hand, is perfectly suitable for end users.

    1. You will love it, makes a lot of things easier and has some tiny tweaks like the comment form arguments that really save time 🙂

  1. Hi, regarding the “after_link” option, I can’t find out how to use this, I want to add the symbol | between each menu option.
    One person suggets

    wp_nav_menu(array (after_link => ‘|’))

    I see you’ve set yours out completely different… I’m running WordPress 3.0.1

    Any help would be great thanks

  2. Maybe I’m wrong but I think the right parameter is link_after. Whatever it is, you can either use the syntax you’re mentioning
    [php]
    wp_nav_menu(array (‘link_after’=> ‘|’))
    [/php]
    or something like
    [php]
    wp_nav_menu(array (‘link_after’=> ‘<span class="divider"> | </span>’))
    [/php]
    and then stylize it using CSS. Hope this helps 😀

  3. Of course Kyle, I just put an stripped down snippet with only the functionality you needed. My bad. Should’ve put the whole sentence.
    However, I thought we were talking about wp_nav_menu? It is very different from wp_page_menu.

  4. Oh wow sorry I’ve never noticed the difference! at first glance though, It looks like link_after is available for wp_page_menu any way, but do I use it in a difference way?

  5. Yes, indeed: link_after is available on wp_page_menu and it behaves in the same way than it does in wp_nav_menu.

  6. I see, this doesn’t explain the problem though unfortunately… as I tried both your suggestions and it doesn’t change the menu at all 🙁

  7. […] will overcome and make the final release a stable version. Little more information you can find at Custom Navigation Menus in WordPress 3.0.2. Improved custom post types:Custom fields are actually post metadata that is associated with the […]

  8. […] With this feature users can create Custom Menus very easily. Actualy this feature is adopted from WooThemes framework which they have released as a plugin “WooNav“, and Now Automattic integrated this Menu system in WordPress 3.0. Menu management is little bit inconsistent and I  hope  WordPress developer will overcome and make the final release a stable version. Little more information you can find at Custom Navigation Menus in WordPress 3.0. […]

  9. […] With this feature users can create Custom Menus very easily. Actualy this feature is adopted from WooThemes framework which they have released as a plugin “WooNav“, and Now Automattic integrated this Menu system in WordPress 3.0. Menu management is little bit inconsistent and I  hope  WordPress developer will overcome and make the final release a stable version. Little more information you can find at Custom Navigation Menus in WordPress 3.0. […]

Leave a Reply to parmjeet Cancel reply