The Quest for the perfect menu…

This is Part 1 of the tutorial
Part 2 of this tutorial teaches how to build vertical menu + dark color palette for the horizontal one

I decided to get Thesis theme, because one of my clients informed me about compatibility issues between Thesis and my wordpress membership site plugin MemberWing. I fixed it and then decided to take a closer look at Thesis and actually bothered to watch videos on the front page of main Thesis site – Diythemes.com.
What impressed me the most is attention to detail, user friendliness and most of all – SEO features that are so well thought of.
MemberWing membership plugin was designed from the ground up for membership sites that would need to pull as much SEO juice as possible. So I paid lots of attention to multitude of SEO enhancements and perfections in MemberWing. Many of my own clients are asking about different themes to use and having theme that was so well SEO optimized from deep inside would be an excellent fit for membership portal entrepreneurs.

Combining SEO powers of MemberWing with SEO powers of Thesis theme would give the best of ranking opportunities to my clients. So I got Thesis and played with it for a day.

It is an excellent theme in all ways. The navigation part of it though is a bit limited in function. Starting from Thesis 1.5+ it is one level menu only. My usual desire is to be able to customize navigation as much as needed. Some sites have only few pages, many others have tons of static pages + zillions of articles/posts + lots of categories.
So in ideal world having a chance to create nice looking hierarchically organized user friendly navigation menu is a must. Thesis right off the bat has good looking navigation but I noticed that all Thesis-based websites are looking like twins. Customizing Thesis navigation menu is not really easy so most people just leave it as is. There is no way to change order of categories in the menu or position them in between pages. And again, the ability to create nested menu structures is missing. So I decided to see what could be done about it.
After trying about half dozen menu/navigation related plugins I set my choice on Wordpress Navigation List Plugin NAVT.
NAVT plugin is essentially unordered list generator with super fancy and a bit hard-to-figure untraditional admin interface. What misleading about it is that it does not actually create fancy looking menus by itself. It does the hardest part of job though – gives you an ability to visually pull together, and generate unordered list – skeleton of your menu-to-be. And you may create many menus too. You may pull all kind of Wordpress stuff into the navigation menu: pages, posts, articles, categories, users, code blocks, external links, dividers, separators and mix and match and nest and arrange and customize them in any tree-like structure you want.
NAVT generates for you resulted HTML unordered list. Second beauty of NAVT is that it helps you to insert your new menu into your theme via famous JQuery based logic but without need to change any code! NAVT allows you to specify: “replace this #element with my new NAVT menu”. #element could be an id or class of path of existing menu or div element tag that is being generated by your current theme. So NAVT does this replacement for you without forcing you to go into theme code and make it more messy than it already is. If that all sounds like gibberish – don’t worry – I’ll guide you step by step soon. The challenging part of NAVT for everyone is that you’ll have to come up with actual CSS + images + javascript code for your menu yourself. And it’s up to you to figure out where and how to integrate these files and make this stuff properly get connected together.
Sincerely without knowing JQuery + some PHP + CSS+ having decent experience with Wordpress – this thing is hard to pull.
Gladly I know this stuff a bit so I decided to bite the bullet and guide humanity to freedom in building the best of the best navigation menus for Wordpress. I just needed to find out sources for some nice looking horizontal CSS menus. I picked dynamic drive website for their best selections, demos and sources.

I dedicated a day to study Thesis and play with NAVT plugin. At the end I proudly created custom, flexible, SEO optimized, multilevel, nested nagivation structure for my Wordpress + Thesis based site.

List of features of multilevel, nested Wordpress navigation menu for Thesis Theme
(you GOT to love this stuff):

• Professional, clean look and feel.
• Support for all modern browsers, including MSIE 6,7, Opera, Safari, Firefox 3.x, Google Chrome in both javascript and non-javascript modes.
• Gracefully downgradable for non-javascript browsers. You menu will be usable, visually similar and working even for javascript disabled browsers  (albeit only top level navigation will be visible and no flyouts will happen of course as they are made by javascript).
• SEO friendly features – unordered list menu code is generated within HTML. Google and other search engine spiders will be able to index your navigation structure and find links to inner pages.
• Support for unlimited nesting levels and sublevels.
• Support for any order or pages, posts (via user defined URIs), categories, users, custom code blocks and external links within the menu.
• Support of text- as well as image-based menu elements. (I have yet to try these though).
• Menu structure and content is visually adjustable via NAVT admin area.
• Compact: JQuery based flyouts for nested levels.
• Fast: JQuery for the menu is loaded from Google servers (I’d love Thesis itself to do the same instead of pulling it locally). This would speed up things a bit.
• Scalability – This type of menu is editable and configurable at any time via NAVT plugin settings without any need of coding anywhere.

I used this excellent menu from dynamic drive portal as a base. I had to customize javascript code a bit as well as include chunk of PHP into custom_functions.php to make it work with Thesis. Also the number of pre-existing pages, categories and posts from my site were used to assemble menu structure. Your site specifics will be different – but concepts will be the same.
So let proceed, shall we?

Step by step instructions to setup NAVT-based nested, customizable, multilevel, SEO friendly
and just plain cool looking navigation menu for Wordpress and Thesis Theme

1. Go to Wordpress admin panel. Plugins->Add new, search for “navt”. The plugin will be shown. Click [Install], [Install now], “Activate Plugin”.
2. Tools->NAVT Lists, Inside “Navigation Group” area find “group name” and enter: “menu1″ in the field, press [Create] button. “menu1″ rectangle area got created.
   This “menu1″ area will be the main playground for menu construction. You’ll be dragging and dropping here your menu elements.
3. In “assets” area find “other” listbox and click on “Home” choice. “Home” thingie will appear inside of “unassigned” area. Weird, eh? No worries, as long as it works – and it will for us.
4. Drag this “Home” thingie from “assets” area into “menu1″ rectangle area. It will become “Home” item in the menu.
   • Repeat steps 3-4 for some pages from “Pages” area, as well as for categories in “categories” area. Drag any other items you want to be on your menu inside “menu1″ rectangle. You may click on pages, categories, users and some custom elements such as “list divider” and “code block”. Code block is cool way to add custom snippets inside the menu.
   • You may drag menu items inside “menu1″ area to rearrange their order.
   • You may adjust hierarchical position of each menu item with “<” and “>” arrows.
   • Clicking on text name of each menu item – opens mind boggling extra customization dialog for this item. I mostly used defaults but technically you can go crazy and start making image-based menu choices and add chunks of HTML code into it. Proceed with caution though.
   • For linkless unclikable submenus that will serve as “parents” for other “sub-children” I used “Code block” type. For example when customizing such code block item I entered for “Menu item alias” = “MemberWing” and for “Enter code block:” = “<a href=’#'>MemberWing</a>”. Having href=”#” will make it not clickable but acting as a valid “parent” menu choice.
5. Here’s how my NAVT ‘menu1′ build structure looked like almost completed:
   
6. Finish initial building and then click on “gear” icon to customize your menu structure:
   
7. It will open dialog with 4 tabs: Options, Display, CSS, Theme.
   1. Go to “Options” tab and make sure everything is unchecked and “group name” says: “menu1″
   2. Go to “Display” tab and make sure everything on “Show navigation group on…” area is checked [x]. Leave the rest at defaults.
   3. Go to “CSS” tab and select radio button (x) “Do not apply CSS classes”.
   4. Go to “Theme” tab and fill it in like that:
      
      Insert into “Add tags before…” area this code:
      <div id='myjquerymenu' class='jquerycssmenu' style='margin-top:5px;'>
      Insert into “Add tags after…” area this code:
      <br style='clear: left' /></div>
   5. Press [save/close] button
8. At this point menu building from within NAVT plugin options is complete.
   Now it’s time to do a little tune up for Thesis theme to get it ready. For that we need to add a few custom files – CSS and javascript that belongs to the menu and update Thesis’ custom_functions.php
9. Download the complete set of files here.
10. Unzip archive. If you have updated your custom_functions.php with your customizations – you need to merge them with my stuff. I’ll leave it up to you.
    If you haven’t touched it – feel free to overwrite it with mine. Please note: I preferred to position menu under the website header (default is above) – so my adjustment included this preference as well.
11. Upload archive including all subdirectories and files under your Thesis theme ‘custom’ directory, like this:
    .../themes/THESIS-DIR/custom/custom_functions.php
.../themes/THESIS-DIR/custom/jquerycssmenu/...
    I haven’t touched custom.css – I prefer to keep menu-specific CSS under their own locations to avoid creating mess inside custom.css
12. At this point you may reload your website and see new beautiful new multilevel, nested, SEO optimized menu.
13. You may always go back to NAVT settings and customize your menu with more choice or reposition anything. It will be reflected on live site automatically.

The road ahead…

This tutorial included creative example of one type of menu.  I played with another one – just to see how dark colored menu would look like:

I think it is pretty nice. There are many more navigational samples available at Dynamic Drive – all of them are possible to customize for Thesis and other Wordpress themes with some effort:

 

I hope you’ll find this tutorial beneficial and useful. As I said, it is possible to customize any of these menus for Thesis – that is given time and desire to make it happen.

I could do this work for you on a contract basis. Just pick the menu you like, contact me and I’ll work on the code and instructions for your website.

$20

And of course if you’re up to building super SEO optimized premium wordpress membership portal – the best solution for this:
Thesis Theme + MemberWing membership plugin + self hosted Wordpress of course.

Tagged as: CSS menu for wordpress, thesis theme, thesis theme hierarchical menus, thesis theme multilevel menu, thesis theme nagivation, thesis theme nested menus, thesis theme tutorial, wordpress css menu, wordpress nested menu