Athena - Responsive Flat WordPress Theme for Personal Blogs and Shops

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 Appearance\Menus, 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 :D


“Custom Navigation Menus in WordPress 3.0” received 22 comments! Add yours.

  1. About Us March 18th, 2010

    [...] Custom Navigation Menus in WordPress 3.0 | WordPress | ilovecolors [...]

  2. About Us | Healthy Blood Pressure.net March 18th, 2010

    [...] Custom Navigation Menus &#1110&#1495 WordPress 3.0 | WordPress | ilovecolors [...]

  3. Mário Andrade March 21st, 2010

    You kind of had this functionality on previous versions. You can simply create link categories and and list them as a new menu.

  4. Elio March 21st, 2010

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

  5. generic levitra without prescription March 22nd, 2010

    I read blogs on a similar topic, but i never visited your blog. I added it to favorites and i’ll be your constant reader.

  6. parmjeet May 16th, 2010

    This navigation menu functionality is great.

  7. :D July 29th, 2010

    Happy Birthday

  8. Ulf Karlsson August 6th, 2010

    Thanks for the info. I have just started with 3.0.

  9. Elio August 6th, 2010

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

  10. Mark August 17th, 2010

    Happy birthday, for when it was :)

  11. Kyle November 11th, 2010

    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

  12. Elio November 11th, 2010

    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

    wp_nav_menu(array ('link_after'=> '|'))
    

    or something like

    wp_nav_menu(array ('link_after'=> '<span class="divider"> | </span>'))
    

    and then stylize it using CSS. Hope this helps :D

  13. Kyle November 11th, 2010

    Hey this didn’t seem to work at all, if it helps heres my code now:

    ‘ | ‘));?>

  14. Kyle November 11th, 2010

    sorry

    wp_page_menu(‘show_home=Blog’, ‘sort_column=menu_order’, array (‘link_after’=> ‘ | ‘));

  15. Kyle November 11th, 2010

    I can’t paste it now, but after the array as above, I’ve tried both you suggested, and it didn’t work…

  16. Elio November 11th, 2010

    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.

  17. Kyle November 12th, 2010

    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?

  18. Elio November 12th, 2010

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

  19. Kyle November 12th, 2010

    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 :(

  20. Most awaited features of WordPress 3.0 July 18th, 2011

    [...] 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 [...]

  21. Most awaited features of WordPress 3.0 - iCrunched.co September 13th, 2012

    [...] 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. [...]

  22. Most awaited features of WordPress 3.0 • iCrunch.co February 26th, 2013

    [...] 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 comment