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.
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!
About
watching this video,some confusion got cleared and it enhanced my knowledge about WooFramework , great work by wooteam
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.
Once again I am very impressed. This is an excellent addition to the themes. Nice work.
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!
Nice step from wooteam
awesome stuff guys. a priceless addition to woothemes templates.
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)
We’re working on something-something for our backend which will include proper invoices (printable & downloadble via PDF) for clients. 🙂
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.
Same problem here, I am glad, that you guys are working on this !
The ability to be able to add an external link is a one up against the My Page Order plugin. 🙂
Ditto. We quite like that functionality as well! 🙂 Anything else you would add?
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? 🙂
oh its from Jeff sorry 😉
That has been developed in-house, but Jeff & Cobus are the main contributors. 🙂
Wow!
Great news WooTeam!
🙂
Thanks so much!
When can we expect more themes to have this? (Ahem, Backstage and Daily Edition, please!!) 😉
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.
ahem, it’s already in WF 2.2, so only need to update older themes… should have some more done tomorrow
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.
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.
Or Twitter feed… I’ll publish there once I deploy updates
Nice! Daily Edition please.
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.
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.
Yeah – absolutely. It looks like you have custom links as well, which is quite a cool little addition.
What’s your timing on getting the nav into Daily Edition? A week?
1-7 days 🙂
Woo FTW!
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!
Can I request a Custom Woo Navigation widget?
We already thought of that… It’s already included! 🙂
We just forgot to mention it 🙂
Remember to add includes/theme-widgets.php to the Coffee Break changelog
You don’t need to update theme-widgets… the widget gets added automatically when you activate the WooNav
Oh. I must have forgotten to refresh my browser tab. My bad.
Great addition! Glad to see WooThemes paving the way for where WordPress itself should be going!
/happy subscriber
Way to Rock it, Jeff! Awesome!
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 ! 🙂
Thanks downsouth, good to hear 100% positive feedback from our hardest to please customer 🙂
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!
Ohpps!
I’m not much of a speller or genus or a genius.
Maybe I drank too much Guinness.
Gentlemen, this is very useful and cool. Please continue to kick ass!
Awesome work guys. I think WordPress should consider rechristening themselves to call WOOrdpress!
PS – WooNav for TheStation, OverEasy anytime soon? 🙂
yep soon, just adding some new features before we roll out more 🙂
Can I please say hurry up! Can’t wait – a week? 🙂
Wow, amazing stuff, love the way wordpress makes it possible to make complete own frameworks in their cms.
Are there any plans to release this as a downloadable standalone plugin?
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.
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.
Yeah! I would tend to agree with Dave – great tip 🙂
Any suggestions on how you’d want us to go about this?
Rough sketch, but conceptually something like this:
http://j.mp/dgOFVg
I like and have recommended it to the rest of the team! 🙂
added to the next version: http://www.jepson.no/u/u4c5zs.png
Thanks!
I ♥ WooThemes!
Looks great!
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.
???
Can you share the source code ?
Sure – it’s in our themes. 🙂
Do you have a free version?
It’s integrated in our framework, currently only in the themes above.
The custom navigation function is so cool!
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
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
We’ll look into adding that functionality to the Custom Nav
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
Hopefully within next week. We are adding some additional features/functionality so want to finish that before we deploy to more themes.
Brilliant, thanks for getting back to me so quickly 🙂
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
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.
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.
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.
Bravo!
Hey Magnus-
Do you have a list of themes that have been updated with the custom nav option?
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.
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
It takes 1 minute to update the theme, so you can go ahead and buy now 🙂
Great work… I just purchased Open Air… Is there a way to apply this to the the theme?
We are very close to squish most bugs and add some cool new features, so hopefully next week.
The Journal…update…hurry!
Thanks, new features look terrific…can’t wait!
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!
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
Oooh… Good suggestion! 🙂 Definitely on the to-do list!
Stupid question, but how do I get the new menu-feature into my theme?
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.
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?
Under the Delegate tab, you should have a link for “Custom Navigation”, where you can activate the menu.
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
it’s stopped my contents page working now i doesn’t show child pages which is total naf.
Please give us a shout on the support forum, so that we may investigate & rectify.
please make this feature available in Canvas!
This is already available in Canvas! 🙂
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. 😉
This has been delayed slightly due to the integration of the WooNav into the WP 3.0 core. More info here.
Bravo…. very nice… very nice
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)
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?
Hello Guys,
Very nice work!! What about translation? What pluggins do you have for translate ?
thanks
Simple and powerful, and very useful for non-techy users! Great work and screencasts to demo it.
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!