The quest for the perfect Vertical menu…

Part 1 of this tutorial described step by step process of building horizontal multilevel nested menu for Wordpress Thesis theme. Part 2 will continue on to enhance this functionality. Here we will add “dark” version of horizontal navigation menu and I will teach you how to switch between “bright” and “dark” version. Part 2 is the superset of Part 1. It includes all from Part 1 + adds more cool stuff.

Main idea that I wanted to present is adding vertical menu to Thesis theme (and to Wordpress in general). I was looking for really flexible, SEO friendly and multi-browser compatible vertical menu that would allow to create unlimited nesting levels.

WEB has tons of pages on the subject but when I started to try all these samples – they either broke down, fallen apart, supported only limited number of levels or misbehaved in Gates+Ballmer’s junksplorer 6. Finally I got back to tried and trusted Dynamic Drive menus as their vertical samples proved to be a nice case that fits my stringent requirements. I had to significantly modify them though to make sure it fits Thesis model.
The quest for perfection continues…

I spent about 16 hours searching, assembling, testing, fixing, polishing and tuning vertical menu’s CSS and .js code and 3/4 of time was spent making it to work in MSIE 6.
Anyways, I was happy with the final result. Resulted vertical navigation menu has all the same benefits that horizontal menu has.

Having ability to add vertical menu is very important to about 70-80% of portals on the web. Horizontal menus have limited “space” to accomodate many menu choices but vertical menu does not have this limitation and would help immensely. So here we go.

Lots of steps to make it happen are already described in part 1 of tutorial so this will make it for a bit shorter one, but with much more feature rich results.

So here it goes:

Building SEO friendly, vertical, multilevel, hierarchically nested menu for Wordpress and Thesis theme. Step by Step
(…what you never thought possible…)

1. Install exec php plugin and activate it. We will need it because I will use PHP inside the text widget to emit vertical menu’ HTML code.
2. Do steps 1 – 6 from part 1 of tutorial. Basically you need to install and activate use NAVT plugin + visually build your menu. Make sure your menu group name is ‘menu1′. This name is hardcoded in custom_functions.php
3. Click on the ‘gear’ icon for your ‘menu1′ group to edit it’s properties:
   
4. Follows Steps 7.1 -7.3  of Part 1 tutorial to set “Options”, “Display” and “CSS” tabs settings.
5. Now click on the “Theme” tab of this dialog. We will overwrite number of settings there (if you been following step 1). This is ok – you will not lose anything – but these changes are needed because I’ve changed some code from step 1.
   Here’s how this dialog needs to be filled in:
   1. Inside of “Theme xpath:” area enter this code (it commands to replace any tag with these classes):
      .jquerycssmenu, .jqueryslidemenu
   2. Set “Action” to “Replace with”
   3. Inside of “Add tags before navigation group” area enter this code:
      <div class='jquerycssmenu' style='margin-top:5px;'>
   4. Inside of “Add tags after navigation group” area enter this code:
      <br style='clear: left' /></div>
   5. Click on [save/close] button.
6. Now go to Wordpress admin panel -> Appearance -> Widgets.
7. Drag “Text” widget (from the big “Available widgets” area) into “Sidebar 1″ area on the right. We will be adding code into the Text widget that will help us to materialize vertical menu.
   NOTE: I presume you have “Sidebar 1″ in existence. Thesis options allows you to turn it off – but for the sake of this tutorial let make it be.
8. Once you dragged and dropped this widget – it will opens like a flower (I am feeling romantic now that MSIE struggle is over).
9. In “Title” area enter “World’s best vertical menu”… Well, feel free to use your creativity – that text will go above your newly born vertical menu.
10. In big area for text – enter this PHP code:
    <?php
if (function_exists('navt_getlist'))
$menu_html = navt_getlist ('menu1', false, '', 'ul id="dd_vertical"');
else
$menu_html = "";
$menu_html = preg_replace ('#class=[\'\"]jquery(css|slide)menu[\'\"]#', 'class="dd_vertical"', $menu_html);
echo $menu_html;
?>
11. Press [Save] button, click on “Close” link.
12. Download updated set of files here.
    This archive includes:

    
    

    • Updated version of “bright” horizontal menu code
    • “Dark” version of horizontal menu
    • Vertical menu codes
    • Updated version of custom_functions.php
13. Now you need to unzip this archive and upload it into the ‘custom’ directory of your Thesis theme.
    Note: if you have done any customizations inside custom_functions.php – you’d need to merge them. If not – feel free to overwrite it with my version.
14. Voila! Now you may reload your website and see the same “bright” horizontal menu + neato vertical menu in the left sidebar.
15. BONUS task: Let change “bright” horizontal menu onto the  “dark” color scheme.
    1. Inside custom_functions.php file:
       replace this code:
       echo "<div class=\"jquerycssmenu\">$menu_html</div>";    // "Bright" menu
//echo "<div class=\"jqueryslidemenu\">$menu_html</div>";  // "Dark" menu
       with this code:
       //echo "<div class=\"jquerycssmenu\">$menu_html</div>";    // "Bright" menu
echo "<div class=\"jqueryslidemenu\">$menu_html</div>";  // "Dark" menu
       Basically we are commenting out one line and uncommenting the other one.
    2. Now go to Wordpress admin->Tools->NAVT Lists and click on abovementioned “gear” icon to edit properties of your ‘menu1′ group.
    3. Click “Theme” tab.
    4. Inside of “Add tags before navigation group” area enter this code:
       <div class='jqueryslidemenu' style='margin-top:5px;'>
    5. Now – reload your page – and your main horizontal navigation menu “magically” became dark, something like that:
       

       Thesis theme - multilevel nested CSS menu - dark palette

       Dark color palette may be more suitable for certain sites than the light color one. So now you have a freedom of choice in your life!

    6. To get back to “bright” color scheme – just undo above “Bonus” steps.
16. Conclusion:
    I love Thesis Theme, I love Wordpress and I love the fact that we have a ways to add decent navigation menus to our portals.

$20

Enjoy!

Gleb Esman

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:

Thesis theme - multilevel nested CSS menu - dark palette

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:

Dynamic Drive Horizontal Menus

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.

MemberWing is a wordpress membership site plugin designed specifically for SEO optimized membership portals. With it’s flexible indexable teasers, support for Google First Click Free standard, digital content and download protection empowered with PromoFusion – it guarantees your membership site speedy indexing and higher rankings.

While other membership site softwares likes to completely disable access to premium content – MemberWing implemented flexible SEO-aware architecture. Instead of completely disabling access to your site for free visitors and search engines alike – MemberWing allows you to create “free teasers” for each premium article or page.

Free teasers are indexable by search engines and also serve as a powerful marketing tool to attract new paying members.

MemberWing also includes SEO-aware download guard features named digital content protection.  MemberWing’s Digital Content Protection eliminates problem of link sharing. But additionally to that it also allows you to substitute your premium digital download materials  with promotion versions of these materials when free visitors  /non-member clicks on them.

This in turn allows search engines to index your rich media content + serve as another powerful and automatic promotional feature of your membership portal.

SEO Powers Thesis Theme and MemberWing combined

As you know Thesis Theme was designed with in depth clever SEO optimization functionality. Using Thesis theme on your site allows you to completely eliminate any other SEO plugins. Thesis Theme has all SEO features integrated and conveniently laid out for you right at the article/page editing areas.

If you are looking to build seriously top ranking recurring income membership portal – start from the right track.
Get the best SEO of the both worlds combined:

Top SEO Optimized Wordpress theme – Thesis
Top SEO Optimized Wordpress Membership site plugin – MemberWing