WordPress 3.0 Menu Update

The new menus WordPress 3.0 just got an update, provided by Ptah Dunbar. Thanks Ptah, cool work! I checked out the new version. But first a screenshot of the backend:

WordPress 3.0 Menu Option Page

As you can see, you can build your menu from modules. Right now these are pages, posts, custom links, categories, tags and media. You can sort the entries in your menu via drag & drop. Here an edit menu item screenshot:

Wordpress 3.0 edit menu item screenshot

Comments are closed.

52 comments

  1. Michael Martin

    It's looking great. Going to be a massive boost for the less tech savvy users who want more control over their menus.

    Heck, even the savvy users are going to find this a nice change!

  2. shawn

    One word... WOW!

    I've been using the original woo-nav and was so excited to hear it being put into the core. All of the things that I desired to be added to woo-nav look like they are now in there.

    Now if only I could use it with 2.9 lol

  3. Trace

    Dieing to have this in 3.0. We've been using the NAVT plugin and it's on its last legs and quite buggy...., so this will so nice to have.

    Also, the "info / Related Posts" section above the "leave a reply" box is mashed into the right sidebar in Safari, just a a heads up. Also, you're logo is awesome. Just sayin.

  4. Ptah Dunbar

    Hey Michael, I just wanted to clarify that the menu item types (e.g. posts, pages, cats, tags etc.) are all dynamically chosen based on what the site has available.

    So technically, it grabs all post types with the public parameter as true, and all taxonomies with the show_ui parameter as true.

    Menus still needs some work done, but this patch was already huge to begin with. I've got more coming! Let me know if you find any quirks, bugs etc. and I'll try to get them resolved in the next patch.

    Cheers 🙂

  5. JhezeR

    Wow...WP 3.0 is so very powerfull, i luv it

  6. Puge

    Very cool!!!

    Any news on the release date?

  7. Retro sweets

    Looks like WP are starting to develop in the knowledge that the platform is largely used as a CMS and not just a blog. Good work WP!

  8. Jeffikus

    Loving how the WordPress team have expanded on the initial code! Really taking it to another level 🙂 Great work @Ptah - looking forward to the 3.0 release!

  9. Michael

    @Ptah, yeah, my own custom post type was available too.

  10. Giuseppe

    Hi thanks for the great update!
    I just need to know if thers is a template tag and wich tag to use instead of the widget for my menus

  11. Michael

    @Giuseppe
    wp_nav_menu( 'sort_column=menu_order&container_class=menu-header' );

  12. Carlos

    Wow.. this is going to be very powerful.

    Really like the ability to associate CSS classes with it.

  13. Victor Teixeira

    Is there an option to display child categories or not, or child pages?

    Right now I'm using Menus+ which is an excellent menu plugin. It provides options to display child or not and it also provides a menu item called Hybrid menu where I can build a custom submenu with pages, categories, whatever...

  14. Dustin W.

    Thanks WooThemes for allowing WordPress to use the WooNave in the core of WordPress.

  15. Edward Caissie

    I'm finding the Navigation Menu's use of the 'menu' class to be creating issues with themes already using that specific class name; as well as themes using the wp_page_menu() function which also generates the 'menu' class tag.

  16. Greg

    There goes my plugin idea =P

    I must say I'm glad that this will now be a part of standard WordPress.

  17. Gavin

    Great stuff! I'm testing the functionality now but I seem to be having an issue with the menus. I've added another category and renamed 'Uncategorized'. When you click 'view all' in the 'add existing category' you still see only 'uncategorized' and there is no other category.

    Is this a known issue?

  18. Tomáš Kapler

    is it possible to create a bit inteligent and automate menus: e.g. add as second link the all subpages (first level) of page_x ? So when i add the page under page_x, it would be automaticaly added to the menu, and i would not need to add it again manualy

    P.S.: is it possible to give the specific menu specific id and/or class?

  19. Michael

    @Tomáš: Hierachical stuff dosn't work at the moment. And yes, you can add your own class to the menu. wp_nav_menu( 'sort_column=menu_order&container_class=menu-header' )

  20. Tomáš Kapler

    thx michael.
    P.S.: i know it is possible to ad class to the menu with function, but it is not possible with the widget (but is is global problem - i had to recreate all wordpress widgets and add there id + class input boxes, becase i hate that automate one. It would be great if someone would found out a way how to add those two options globaly (as with the widget logic plugin)

  21. slee

    I have not checked out the beta yet I have been soo busy but one thing I am slightly concerned about is how the new menu structure will work. Will it still have the dynamic menu? ie add a page and it automatically is added to the menu? or will we have to build the menu each time?

  22. lucy beer

    hi
    i'm running the latest wp 3.0 locally but in my Menus screen I do not have the 'Add an existing Post' option - only Links, Page or Category. is this just a bug, or do I have to do add some code to activate the 'add post' option?
    cheers
    lucy

  23. Francis

    Still trying to find out how to enable it in my theme... 😛

    Could anyone help me ?

    Thanks 😉

  24. Michael

    Francis: add_theme_support( 'nav-menus' );

  25. Paul

    Michael,

    I'm using the new 2010 theme. Where do you add
    add_theme_support( 'nav-menus' ); ?

    It appears this code is already in the theme's footer.php file. How do I enable the drop down functionality of the menu?

  26. Paul

    D'oh!!!! In the menus administration area, just drag and drop the child pages underneath the parent pages in the menu and hit save. Makes sense now but this isn't explained anywhere.

  27. Michael

    Paul: add_theme_support( 'nav-menus' ); is in TwentyTens functions.php line 83. The dropdown functionality works automaticly if you have child pages in your nav-menu. Its only CSS.

  28. Tim

    Anyone have any idea how to keep WP from putting IDs on all of the LIs?

  29. Paul

    Anyone know if it's possible to use the 3.0 menu UI to add image links to the navigation and how? I would love to have some social media icons in my navigation. Including the search field would be cool too. I thought the menus were going to have this ability. Maybe just not yet?

  30. Tomáš Kapler

    [Paul] - you can do it easily with CSS (you can do it even now) - every LI in menu has its specific class, you can use (and with new menu UI you can even set this class). AFAIK the menu ui is also filterable with wordpress filters and actions, so it should be easy to enhance it even with inline images wia some plugin, if someone would need it (imho CSS is in 99% better)

  31. Kevin

    Thanks for posting. Would love to see a tutorial on how to add this new menu system to a custom theme

  32. Ash

    I loved the look of this, and it is great to use, but after trying it out I have found one sticking point.

    I create a lot of sites for clients that love the way wordpress will put the page in the navigation where they tell it to live from the create/edit screen of the page. This system (so it seems, maybe someone can tell me different) to but another stage in the way of it appearing in the navigation. i.e the user creates the page and selects from the attributes the parent page (if there is one) and then publishes it, then they must go and add it to the navigation.

    Just seems to have made it more difficult for the average user. Could it not pick up the order straight from the edit/create page attribures?

  33. Tomáš Kapler

    re Ash: afaik they are going to redo also the Page panel. And also what you can see now is far from being final - e.g. you cannot add the whole tree - page with subpages. When this will be implemented (prior the final 3.0), then you will be able to work as you work now, with extra options from the menu panel.

  34. John Williams

    Anyone know how to display the nav description?

  35. Kevin

    I noticed this menu does not support a "Home" page. I ownder if this in in the works? You have to create a new page titled home and redirect. Not a good solution for static home pages.

  36. Francis

    Kevin > Yes that is not easy... And I found no way to highlight that homepage neither... I tried it using a new page or a custom link...

  37. Dustin

    Hey Everyone. KInda frustrated right now. Maybe someone can help me. I love the idea of a native nav menu in WP. It is great and easy to build a menu from the backend. My snag right now though is trying to merge it with Superfish. Does anyone know if this is possible?

    I have the external JS files stored in my theme dir and thy're called in the head, and I have the inline JS code as follows:

    $(document).ready(function() {
    $('ul.sf-menu').superfish();
    delay: 800,
    animation: {opacity:'show',height:'show'},
    speed: 'medium',
    autoArrows: false,
    dropShadows: true
    });

    My nav menu code looks like this:

    'menu_order', 'container_class' => '', 'container' => 'nav', 'menu_id' => '', 'menu_class' => 'sf-menu' ) ); ?>

    Any help would be greatly appreciated. I feel like I'm missing something really simple here.

    Best,

    Dustin

  38. Dave T

    Looks great, thanks!

    Im trying out a beta 3 nightly build in subdomain multisite mode, and the menu admin panel is not displaying correctly in the subsites - it's only showing the custom links menu. That's what you get by using nightly builds eh? Can't wait for v3 final 🙂

  39. Joe Carey

    I am assuming the idea behind the menu system is to allow me to create a main menu, utility menu and other menus, each containing certain pages.

    How does one go about including a specific menu in the template?

  40. John MacMenamin

    I have the same problem.
    You can rename the super fish css selectors from .sf-menu to menu and it works but you loose the multilevel arrows 🙁

    If anyone else can help it would be awesome.

  41. Michael

    'menu_class' => 'sf-menu ' works for me with superfish.

    And the script:

    $('#primarynav .sf-menu').superfish({delay:700,animation:{opacity:'show',height:'show'}, dropShadows: false});

  42. John MacMenamin

    Michael,

    Thanks for the reply!
    I still have a problem.

    Could you give a full example of your header code.
    I tried what you have and I have a T_DOUBLE_ARROW error.

  43. John MacMenamin

    GOT IT!

    'menu_order', 'menu_class' => 'sf-menu' ) ); ?>

  44. John MacMenamin

    wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu' ) ); ?>

  45. Michael

    @ John:

    <div id="primarynav"><?php wp_nav_menu( array('menu' => 'mymenu', 'menu_class' => 'sf-menu', 'container' => '', )); ?></div>

    and the javascript

    <script type="text/javascript">
    //<![CDATA[
    jQuery(document).ready(function($){
    $('#primarynav .sf-menu').superfish({delay:700,animation:{opacity:'show',height:'show'}, dropShadows: false});
    });
    //]]>
    </script>

  46. Joe Carey

    Thanks Michael.

    'menu' => 'mymenu' in the array defines the menu to use.

  47. John MacMenamin

    .sf-menu .current-menu-item, .sf-menu .current-menu-item a:link, .sf-menu .current-menu-item a:visited, .sf-menu .current-menu-item a:hover, .sf-menu .current-menu-item a:active {
    background: url(../images/button-bar.png) repeat-x !important ; background-position: 0 -80px !important ;}

    New css selector for all current menu items is now: current-menu-item

    No more need for current-cat,page,home etc!

  48. eric

    @joe or @michael
    Any way to get a class on the anchors?
    I know that there's a $link_before and $link_after, but I don't think that's what I'm looking for...
    something like this...
    Home
    Any ideas?
    I was kind of hoping that they would have that option in the backend when creating the menus.

  49. eric

    sorry I meant like this...
    id="home">Home</a

  50. Mansi

    Is there a way to add the search box in the right hand side of the main nav menu? It seems like the perfect spot for it...

  51. Jason

    John & Joe,

    Thanks for your posts. I have been searching for a way to make Superfish work correctly with the new menu system and your posts finally helped me get it to work!

    Thanks!

  52. Jason

    And Michael too!