The Awesome Custom Woo Navigation

Written by Magnus Jepson on January 27, 2010 Blog, News.

This functionality became part of WordPress itself. You can create custom menus under Appearance>Menus from the WordPress dashboard.

One of the most commonly asked questions by Woo users is how to modify the navigation in the theme, by excluding items, adding external links etc. We recently added Jeff to our team, and started him off with a project we had been planning for a while; A new custom navigation admin page, where you would be able to really build your own navigation without touching any code.

It didn’t take long for him to come up with the wireframe, and then Cobus added some nice styling to the UI, and we can now proudly present it to you! We’ll start off slow by adding it to our newest themes first, and we hope to get feedback and squish any possible bugs that should appear before rolling it out to all our themes.

Woo Custom Navigation admin panel

With the custom nav, you can easily mix and match categories and pages, and even add custom menu items into the mix. You can add your own structure to the menu by arranging the menu items via our drag and drop interface, and also add dropdowns or sub-navigations to each menu point. You can have as many levels as you want although this is usually limited to 3-4 levels by CSS in the theme itself.

Update! We forgot to mention that each menu also comes with a widget, so you can add the menus as widgets in your widgetized sidebars and footers. You can also create custom menus in addition to those used in the theme, and add those as widgets. The widgets have some basic settings and also developer settings to let you define the div structure and classes yourself. Pretty cool!

The first two four themes that have been updated are newly released Delegate and the user favorites Headlines, Optimize and Coffee Break. You can go ahead and download the updated theme from your dashboard and check the respective changelog located in the theme folder for which files to update.

I’ve recorded a short screencast so everybody can see the great new functionality this adds to the WooFramework. Give us your feedback!

NOTE: We know that there is a menu admin coming in WP 3.0, but we hope that ours will boast superior functionality for our users!
cta-banner-10-product-page-v2_2x

152 Responses

  1. premiumthemeclub
    January 27, 2010 at 5:19 am #

    watching this video,some confusion got cleared and it enhanced my knowledge about WooFramework , great work by wooteam

  2. Prashant
    January 27, 2010 at 5:21 am #

    Looks good, very convenient & easy to use. Next up, would the same be done for the large footers too? You know those large artistic footers in which we have large background images.

  3. MJ Stapleford
    January 27, 2010 at 5:23 am #

    Once again I am very impressed. This is an excellent addition to the themes. Nice work.

  4. Ruben R Duque de Estrada
    January 27, 2010 at 5:29 am #

    Sería interesante si implementarais un ‘dropdown Login’ (a modo de plugin) para añadir como una de las páginas del Menú de navegación… con la mezcla de ambos quedarían acojonantes los sitios desarrollados con temas de WooThemes.
    … mira que llevo tiempo buscando esto pero no hay plugins que lo hagan (ni de pago).
    FELICIDADES AL TEAM DE WooThemes.
    fantástico chicos!

  5. Ahmed
    January 27, 2010 at 6:12 am #

    Nice step from wooteam

  6. munyah
    January 27, 2010 at 6:38 am #

    awesome stuff guys. a priceless addition to woothemes templates.

  7. Pedro
    January 27, 2010 at 7:23 am #

    what a great idea !!!
    WP nervs with sorting pages – got better since some versions, but THIS is really nice. Applause……

    Especially when you sit together with the client configuring his navi. No need to go in every single page or category.

    What I really would like to have in the future:
    to be able to use instead of only color backgrounds also grafics by upload as background. In header section like on OPTIMIZE AND in content area below.
    This would enable more flexibility in designing themes.

    Anyway I have got your developer license model and I will be your fan in future too. (Please generate nicer billing for companys)

    • Adii Rockstar
      January 27, 2010 at 9:28 am #

      We’re working on something-something for our backend which will include proper invoices (printable & downloadble via PDF) for clients. 🙂

      • Pedro
        January 27, 2010 at 9:54 am #

        Nice – thanks.
        Please think of convert old billings as well. My tax consultant told me those invoices might be a problem for me, as they are not clear enough.

        • Achim
          January 29, 2010 at 6:16 am #

          Same problem here, I am glad, that you guys are working on this !

  8. Danny Foo
    January 27, 2010 at 7:56 am #

    The ability to be able to add an external link is a one up against the My Page Order plugin. 🙂

    • Adii Rockstar
      January 27, 2010 at 9:27 am #

      Ditto. We quite like that functionality as well! 🙂 Anything else you would add?

  9. Sash
    January 27, 2010 at 7:56 am #

    Hi,

    this is a very great idea cool.
    I’ll update my Theme soon 🙂

    Thank you for that feature!
    Is it build in from you or a programmer by woothemes? 🙂

    • Sash
      January 27, 2010 at 7:58 am #

      oh its from Jeff sorry 😉

      • Adii Rockstar
        January 27, 2010 at 9:27 am #

        That has been developed in-house, but Jeff & Cobus are the main contributors. 🙂

  10. Matthew
    January 27, 2010 at 8:24 am #

    Wow!

    Great news WooTeam!

    🙂

    Thanks so much!

    When can we expect more themes to have this? (Ahem, Backstage and Daily Edition, please!!) 😉

    • Adii Rockstar
      January 27, 2010 at 9:26 am #

      Definitely within the next couple of weeks. The integration with Delegate & Headlines now is the final beta testing phase, before we start the integration into the framework and our older themes.

      • Magnus
        January 27, 2010 at 9:39 am #

        ahem, it’s already in WF 2.2, so only need to update older themes… should have some more done tomorrow

  11. Jon DiPietro
    January 27, 2010 at 8:26 am #

    Thanks, this is much needed. Will you be announcing its availability on other themes here? Just want to know how I can be notified when they are updated.

    • Adii Rockstar
      January 27, 2010 at 9:26 am #

      We will be publishing a new blog post as soon as this is integrated across the board. So subscribing to the blog’s RSS would be the quickest way of been notified.

    • Magnus
      January 27, 2010 at 9:39 am #

      Or Twitter feed… I’ll publish there once I deploy updates

  12. stranflow
    January 27, 2010 at 9:49 am #

    Nice! Daily Edition please.

  13. Ben
    January 27, 2010 at 9:50 am #

    Hey Guys – looks great, I’d considered building something like this for Pro Theme Design but then I saw this on the WordPress Dev blog. Looks like they had the same idea.

    • Magnus
      January 27, 2010 at 10:08 am #

      Thanks Ben, we saw that when we were 99% done coding it 😉 Sometimes it pays to wait a bit… but I’m sure the WooNav will serve it’s purpose.

      • Ben
        January 27, 2010 at 10:16 am #

        Yeah – absolutely. It looks like you have custom links as well, which is quite a cool little addition.

  14. stranflow
    January 27, 2010 at 10:11 am #

    What’s your timing on getting the nav into Daily Edition? A week?

    • Magnus
      January 27, 2010 at 10:24 am #

      1-7 days 🙂

      • Son Tran
        January 27, 2010 at 11:26 am #

        Woo FTW!

  15. grrlfriend
    January 27, 2010 at 10:19 am #

    Where was this four months ago?! LOL…I absolutely love this. It will help all those folks setting up sites who have customers/bosses who want to mix and match items on the menus. No hours of recoding necessary, just a few mouse clicks.

    I’m a fan of WooThemes and even more so now. Great work folks and props to Jeff!

  16. Marcel Oudejans
    January 27, 2010 at 10:38 am #

    Can I request a Custom Woo Navigation widget?

    • Magnus
      January 27, 2010 at 11:20 am #

      We already thought of that… It’s already included! 🙂

      We just forgot to mention it 🙂

      • Marcel Oudejans
        January 27, 2010 at 12:30 pm #

        Remember to add includes/theme-widgets.php to the Coffee Break changelog

        • Magnus
          January 27, 2010 at 12:39 pm #

          You don’t need to update theme-widgets… the widget gets added automatically when you activate the WooNav

          • Marcel Oudejans
            January 27, 2010 at 12:46 pm #

            Oh. I must have forgotten to refresh my browser tab. My bad.

  17. Nick
    January 27, 2010 at 12:03 pm #

    Great addition! Glad to see WooThemes paving the way for where WordPress itself should be going!

    /happy subscriber

  18. Chelsea Brady
    January 27, 2010 at 4:55 pm #

    Way to Rock it, Jeff! Awesome!

  19. downsouth
    January 27, 2010 at 5:11 pm #

    Absolutely brilliant ! Easy to use, flexible enough handle all the menu situations I can think of. This will save so much time and hassles when making sites.

    My customers *always* want to mix and match pages and categories (they don’t understand the difference anyway), so this is ideal.

    Congratulations on a great advance ! 🙂

    • Magnus
      January 27, 2010 at 5:50 pm #

      Thanks downsouth, good to hear 100% positive feedback from our hardest to please customer 🙂

  20. Johnny V
    January 27, 2010 at 6:10 pm #

    The Woo Navigation is awesome! I made the right choice purchasing many WooThemes. You guys are amazing! WooThemes themes make me look like a genus to my clients!

    • Johnny V
      January 27, 2010 at 6:59 pm #

      Ohpps!

      I’m not much of a speller or genus or a genius.
      Maybe I drank too much Guinness.

  21. Incredipress
    January 27, 2010 at 7:00 pm #

    Gentlemen, this is very useful and cool. Please continue to kick ass!

  22. Mohak
    January 28, 2010 at 7:21 am #

    Awesome work guys. I think WordPress should consider rechristening themselves to call WOOrdpress!

    PS – WooNav for TheStation, OverEasy anytime soon? 🙂

    • Magnus
      January 28, 2010 at 7:42 am #

      yep soon, just adding some new features before we roll out more 🙂

      • Mohak
        January 28, 2010 at 5:34 pm #

        Can I please say hurry up! Can’t wait – a week? 🙂

  23. webdesign
    January 29, 2010 at 7:42 am #

    Wow, amazing stuff, love the way wordpress makes it possible to make complete own frameworks in their cms.

  24. Adam
    January 29, 2010 at 7:57 am #

    Are there any plans to release this as a downloadable standalone plugin?

    • Adii Rockstar
      January 29, 2010 at 8:16 am #

      Not at this stage no, even though we have developed this as a plugin (which currently only works with the WooFramework). So it is already modular and if we decided to explore a standalone version, we already have the foundation for that.

  25. Dave
    January 29, 2010 at 8:08 am #

    Looks great. One thing you might want to consider is adding a greater visual distinction between parent nav items, child nav items, child of child nav items, etc. besides just the dashes. It’d make it easier to get an overall view and visually sift through of your menu.

    • Mohak
      January 29, 2010 at 8:10 am #

      Yeah! I would tend to agree with Dave – great tip 🙂

    • Adii Rockstar
      January 29, 2010 at 8:27 am #

      Any suggestions on how you’d want us to go about this?

      • Dave
        January 29, 2010 at 8:38 am #

        Rough sketch, but conceptually something like this:

        http://j.mp/dgOFVg

        • Adii Rockstar
          January 29, 2010 at 8:55 am #

          I like and have recommended it to the rest of the team! 🙂

        • Magnus
          January 29, 2010 at 9:27 am #

          added to the next version: http://www.jepson.no/u/u4c5zs.png

          Thanks!

          • Mohak
            January 29, 2010 at 9:31 am #

            I ♥ WooThemes!

          • Dave
            January 29, 2010 at 9:34 am #

            Looks great!

  26. Pedro
    January 29, 2010 at 8:31 am #

    annother question regarding navigation (cause u are now into it…)

    I would love to select a navi in sidebar with a accordion effect – smooth. Anybody thought of something like this?

    If you click on a mainpage it slides down for subpages.

    ???

  27. bolo
    January 29, 2010 at 9:14 am #

    Can you share the source code ?

    • Adii Rockstar
      January 29, 2010 at 9:19 am #

      Sure – it’s in our themes. 🙂

      • bolo
        January 29, 2010 at 9:23 am #

        Do you have a free version?

        • Magnus
          January 29, 2010 at 9:26 am #

          It’s integrated in our framework, currently only in the themes above.

  28. bolo
    January 29, 2010 at 9:19 am #

    The custom navigation function is so cool!

  29. tgebauer
    January 29, 2010 at 1:29 pm #

    I would definitely pay for all this extra functionality if you guys keep expanding upon this core package and made it into another product.

    Very, very cool stuff that addresses some things that view to be as limitations upon the wordpress platform. Great!

    Tom

  30. goran
    January 30, 2010 at 4:56 am #

    Hi,

    When I activate custom menu the ‘current_page_item’ functionality is lost. Is there a way to get it back easily? I’m not very proficient with PHP, but I can follow instructions.
    The blog url is in website field.

    Thanks.
    Goran

    • Magnus
      January 30, 2010 at 5:43 am #

      We’ll look into adding that functionality to the Custom Nav

  31. Doug
    January 30, 2010 at 7:12 am #

    Hi there – this looks really interesting! I’ve been holding off buying some themes – is there any rough ETA for this to be included in Aperture and Overeasy? Would be of great help to me in my planning…

    Cheers

    /Doug

    • Magnus
      January 30, 2010 at 7:54 am #

      Hopefully within next week. We are adding some additional features/functionality so want to finish that before we deploy to more themes.

      • Doug
        January 30, 2010 at 8:20 am #

        Brilliant, thanks for getting back to me so quickly 🙂

        • Doug
          February 9, 2010 at 6:12 am #

          Hi – me again 🙂

          Just being nosey and wondering if there was any update on progress?

          I understand these things take time, but an updated ETA would be really useful.

          Thanks!

          /Doug

          • Adii Rockstar
            February 9, 2010 at 7:33 am #

            Things are taking a bit longer tan expected, since we’re making sure the WooNav is water-tight, perfect before integrating it into our older themes.

  32. John Puglisi
    February 1, 2010 at 10:01 am #

    Terrific functionality. WordPress as a CMS without the My Page Order plugin is a nightmare. Allowing external links in the menu is brilliant.

    Does this have the ability to ‘include’ pages in navigation? As I understand the framework right now, I can exclude pages via the admin panel but if I want to use the ‘include’ pages call in the wp_list_pages query, I have to make a hard coding change in header/footer.php.

    • Magnus
      February 1, 2010 at 1:28 pm #

      You can include/exclude anything you like in the Custom Nav interface… both WP pages/categories and external URL’s. No need to edit any template files.

      • John Puglisi
        February 1, 2010 at 1:45 pm #

        Bravo!

  33. stranflow
    February 2, 2010 at 3:32 pm #

    Hey Magnus-

    Do you have a list of themes that have been updated with the custom nav option?

    • Magnus
      February 2, 2010 at 4:21 pm #

      Yes in the blog post they are listed. We are working on adding the rest of to-do list and will then update rest of the themes and notify you on the blog.

      • Xavier
        February 2, 2010 at 8:17 pm #

        I’m looking at building a site using Coffee Break, and this new navigation function would be incredibly useful. Should I wait until it’s updated before I buy Coffee Break and begin setting it up? Or is it just as easy to start now, and update the theme once this has been added?

        Cheers,
        Xavier

        • Magnus
          February 3, 2010 at 3:02 am #

          It takes 1 minute to update the theme, so you can go ahead and buy now 🙂

  34. william jacobson
    February 4, 2010 at 2:41 pm #

    Great work… I just purchased Open Air… Is there a way to apply this to the the theme?

    • Magnus
      February 4, 2010 at 3:33 pm #

      We are very close to squish most bugs and add some cool new features, so hopefully next week.

  35. Tom Dolle
    February 4, 2010 at 3:17 pm #

    The Journal…update…hurry!

    Thanks, new features look terrific…can’t wait!

  36. Chris
    February 5, 2010 at 12:48 am #

    Very cool nav…

    I can think of many uses and look forward to being able to upgrade my themes with this functionality. Also, looking forward to additional functionality!

  37. Bill Bryson III
    February 9, 2010 at 11:23 am #

    Hey WooThemes. Love the custom nave feature. Unbelievable how great this is. I was wondering if you could add a similar feature that you have for your framework settings. I’d like to be able to do the menu building on localhost, and then copy the framework for it and push it to my live site. Is this a possibility? I have a pretty extensive menu system, so it’d be nice to do it off line first.

    Thanks,

    Bill

    • Adii Rockstar
      February 9, 2010 at 12:05 pm #

      Oooh… Good suggestion! 🙂 Definitely on the to-do list!

  38. Peter Eich
    February 12, 2010 at 7:32 am #

    Stupid question, but how do I get the new menu-feature into my theme?

    • Adii Rockstar
      February 12, 2010 at 7:44 am #

      This is currently only available for a few of our themes. In the next couple of weeks though, we’ll be working with the WP lead devs to integrate this into the core for WP 3.0, which will mean you can integrate it any theme. By that stage, all of our themes will also support this functionality.

      • Peter Eich
        February 12, 2010 at 7:47 am #

        I am using Delegate. So I should be able to integrate it now. But what do I have to do to get it into my admin page?

        • Adii Rockstar
          February 12, 2010 at 7:59 am #

          Under the Delegate tab, you should have a link for “Custom Navigation”, where you can activate the menu.

  39. Andre Foisy
    February 13, 2010 at 11:22 am #

    At last a powerful menu management!

    We’re used to managing menus through plugins and hard coding, however making it easier and integrated in WP will again save time for us developper 🙂

    Kudos WOO, and wooooo 😛

    Andre Foisy

  40. Jon Chase
    February 16, 2010 at 12:01 pm #

    it’s stopped my contents page working now i doesn’t show child pages which is total naf.

    • Adii Rockstar
      February 16, 2010 at 3:53 pm #

      Please give us a shout on the support forum, so that we may investigate & rectify.

  41. john mcevoy
    February 16, 2010 at 12:45 pm #

    please make this feature available in Canvas!

    • Adii Rockstar
      February 16, 2010 at 3:52 pm #

      This is already available in Canvas! 🙂

  42. stranflow
    February 17, 2010 at 9:06 am #

    I see the list of themes supporting this is still at 4. When is Daily Edition getting the love? It’s not you guys are busy. 😉

    • Adii Rockstar
      February 17, 2010 at 9:08 am #

      This has been delayed slightly due to the integration of the WooNav into the WP 3.0 core. More info here.

  43. Chuck Reynolds
    February 18, 2010 at 6:57 pm #

    Bravo…. very nice… very nice

  44. Jonathan Knapp
    February 19, 2010 at 2:30 pm #

    Amazing stuff guys! And congrats on being integrated into WP 3.0! I was just updating a site that used CoffeeBreak just to play around with the new menu features.

    One thing I did run into was that it doesn’t play nice with categories that have no posts in them. I have a parent category that didn’t have anything directly linked to it, and the name kept being removed from it even if there are child categories with posts in them.

    A way to add all subcategories/subpages when adding the parent to the menu would rock too. Excellent work though! (sorry to nit-pick)

  45. Takemura
    February 24, 2010 at 4:07 am #

    That’s very cool and glad to see something like this, or even this itself, make it into the WP core.

    I some questions:

    1. We’re planning to use a series of custom taxonomies in our theme, these will be specific tags which are grouped. How would this work with your menu system if we wanted to show the group name as the main menu item, and then have its associated tags appear as items in the drop down, automatically?

    2. I’m guessing it would be easy to create mega menu drop down as opposed to just regular drop downs?

  46. hamilton
    February 24, 2010 at 6:56 am #

    Hello Guys,

    Very nice work!! What about translation? What pluggins do you have for translate ?

    thanks

  47. Gary
    February 25, 2010 at 3:30 am #

    Simple and powerful, and very useful for non-techy users! Great work and screencasts to demo it.

  48. wmweblog
    February 25, 2010 at 10:25 pm #

    hey. ur menu system looks great. fun to see wp mention you as a highlight for their official post. pleaes keep on the good work!

  49. Pinto
    February 27, 2010 at 5:35 am #

    Very nice to hear that this great plugin will be built in at the 3.0 version…

    is there any chance to download it as a plugin to install it now?

    Best Regs,
    Pinto

    • Magnus
      February 27, 2010 at 6:04 am #

      No unfortunately not 😉

  50. Samuel Lavoie
    February 27, 2010 at 5:48 pm #

    Really neat improvement over the usual menu in WordPress, can’t be more happy to see them in the 3.0 core update. great job guys!

  51. Will Paoletto
    February 28, 2010 at 10:09 pm #

    This custom navigation menu system is excellent, and I’ve heard so much so that WordPress is going to be integrating it into the WordPress 3.0’s core, so congrats on that. Dealing with menus was pretty clunky in the past.

Trackbacks/Pingbacks

  1. WooThemes WooNav Trumps Pagemash Plugin | Scott Webb
  2. WooThemes WooNav Trumps Pagemash Plugin
  3. Woo To Power Menu Management In WP 3.0
  4. Menu management in WordPress 3.0 door WooThemes | Hiranthi's weblog - Weblog van een ondernemende vrouw
  5. “WooNav” to be Integrated in WordPress 3.0
  6. WooNav will be integrated in WordPress core | Digging into WordPress
  7. WordPress › Blog » Menus, the Merge, and a Patch Sprint!
  8. Menus, the Merge, and a Patch Sprint! | YesWordpress.com
  9. WordPress 3.0, 2 grandi novità » WordPress Italy Blog
  10. Gerson Minichiello » WordPress 3.0: duas grandes novidades
  11. New menu system on WordPress 3.0 « wpressr.com
  12. A report from the Wordpress 3.0 development cycle | beforeyoukillyourcomputer.com
  13. WordPress 3.0 Will Be Here Soon | Voce Communications
  14. What's Coming in WordPress 3.0 (Features)
  15. Whats coming in Wordpress 3.0? | AlexVerse
  16. Mitchell McKenna
  17. Novas funcionalidades do WordPress 3.0 | Hacks e Dicas Wordpress
  18. Gestione dei menu con WordPress 3.0
  19. Wordpress 3.0 Features :: CMS Design Resource
  20. WordPress 3.0 Will Be Here Soon | YesWordpress.com
  21. Co bude nového ve Wordpress 3.0 | nabito.net
  22. WordPress 3.0-alpha – pasul către un CMS adevărat? | WP Tuts
  23. メニュー、MU 統合、パッチスプリント! | WWWP
  24. Part 2: Wordpress 3.0 – Exciting features | Anton Koekemoer
  25. Menus, the Merge, and a Patch Sprint! | XtremelySocial.com
  26. WordPress3.0は5月前半リリース | APERTOZERO BLOG
  27. Что нового в WordPress 3 | Блог TolstoGnoMa
  28. Apple pas sexy / Cloud computing et entreprises / Bient̫t Wordpress 3 РPhilippe Scoffoni
  29. Whats Coming in Wordpress 3.0 | AlexVerse
  30. Whats Coming in Wordpress 3.0 | AlexVerse
  31. Working with the new custom menus feature | Outdated
  32. ما الجديد في Wordpress 3 | ألوانك
  33. Menus, the Merge, and a Patch Sprint! «
  34. Wordpress goes CMS @ Phil-O-Blog
  35. 7 New things coming with Wordpress 3.0 • WPspecial – Wordpress Magazine
  36. WordPress 3 Upcoming – Alex Leonard’s Blog
  37. Mysite4.info | Blog | What’s Coming in WordPress 3.0 (Features)
  38. Wordpress 3.0 | Karl Skarman
  39. Notes from Day One of WordCamp Ireland | Steve Flinter
  40. TECH-THINKING.be | WEB and GRAPHIC agency
  41. Menus, the Merge, and a Patch Sprint! | All Wordpress
  42. PHP-help » Menus, the Merge, and a Patch Sprint!
  43. Menus, the Merge, and a Patch Sprint! | Coyot [at] CanalCoffee.com : Ressources
  44. Wordpress 3.0 ile neler değişecek? | The Next Web Türkiye
  45. What’s Coming in WordPress 3.0 (Features) | Best Web Magazine
  46. culture360.org Development Blog - WordPress 3.0
  47. Menus, the Merge, and a Patch Sprint! – GRATBLOG LAGI
  48. Wordpress 3.0 Geliyor… | EbruliWeb Wordpress
  49. Menus, the Merge, and a Patch Sprint! « WPLINX.COM | Share wp technology