WordPress Menu Creator Cascading Menu Guide
A quick run down on building menus for WordPress with the Menu Creator
The First Step
The very first step after installation of the plugin is complete is to add your menus. If for example you want to use the WP Menu Manager tool to manage a sidebar menu, a header menu and a footer menu then you need to add all three menus. Here you can see we have added one called "Main"
The Second Step
The second step is to add your menu items. You have two main options here; You can add the URL directly or you can simply add the Post / Page number to build the menu item with. In either case you must start the very first menu item with a Menu Order of Zero (0).
Of the two types of menus, either; "External Link" or "Page or Post" it is VERY Important to title your links wisely if you hope to manage them easily. Many times we have provided technical support to people where the main issue is that they lost their menu items, or so they thought they did. Giving your menu items an intelligent and easy to understand Title is important. Also, this TITLE will show up on the actual menu. Future releases of the MENU MANAGER will provide an option for you to change the actual link title tag for better SEO features.
Adding Null or Void Links
There are times when building sites and or templates that we use a bogus link to structure our menu layout and then there are other times where we want a cascading menu where the main link isn't a real link to a URL. In those cases we need to have a way to add the item to a menu without actually having to add an actual Page/Post ID or URL. For this reason we added a feature to the Menu Manager the option of having a NULL valued link. In order to create a Null Valued link you simply select "EXTERNAL LINK" for the link type and then add javascript:void(0); as your link.
Adding EXTERNAL Link Types
External links are pretty straight forward yet can easily fail to work if you do not add the http:// in the URL. Although this isn't technically required it is the absolute ideal method for adding links and most issues we have encountered regarding links have to do with people not adding the links correctly. To add an external link you would simply type in for instance http://www.google.com as the URL and set the link order.
In future releases of this plugin, a new set of options will be added so you can specify popup windows, or target="_blank" for instance along with a few other options.
Adding Post/Page Link Types
To add a link to a Page or Post it is important to first gather a list of your posts and or pages you wish to link to for your particular menu. Although there are three ways to do this, it is easiest to first add posts and or pages then simply go to the Page/Post editor to find the ID's.
What I usually instruct people to do is to navigate to your Page or Post list and simply "Mouse Over" the item to reveal the POST ID in the browser status bar. With a clean sheet of paper I then run down my list of posts, mousing over each one, then making note of the ID number. Below is a graphic that may help you better understand.
After I have my list of ID's I would simply create the menu items with the Page or Post Type and then enter the ID for the Value.
The Third Step
The third step is to determine what kind of menu you are hoping to add to your template and then adding the appropriate tag to the template to get the results you want. After the menu is rendered you can then style your menu accordingly.
There are three possible variables for generating menu items on your site. The first is a single unordered list which produces code like that in the first example below. The next would be a nested unordered list with two levels and the third, also a nested list, has three levels. If you were to view the source of this page you would see menu example on TOP has all three types.
First we have to understand the anatomy of the template tag we use to render the menu items. The template tag consists of a small menu display request with some directives as follows <?php displayMenu(1, 3); ?> The first numerica value is the actual MENU ID and the second numeric value is the levels you wish to display.
So, for instances, if you want to have a THREE level menu, you would add a tag like this to your template <?php displayMenu(1, 3); ?> Naturally this assumes your MENU ID is ID1 as the graphic below would demonstrate.
In my example menu at the top of this page I placed the following code in my template. The reason I wrapped the menu code <?php displayMenu(1, 3); ?> in the <div id="topnavigation"><div><div> <?php displayMenu(1, 3); ?> </div></div></div> was entirely for my styling needs. I build a menu that was rounded on each end with a repeat background. You ARE NOT REQUIRED to follow this method as the menu code generated permits you to style your menu any way you like.
<div id="topnavigation"><div><div>
<!--[]-->
<?php displayMenu(1, 3); ?>
<!--[]-->
</div></div></div>
Here is an example of the menu code that is rendered. As you can see I've included lots of options for end users to be able to style their menus using literally dozens of menu systems and styles. You can use anything from the suckerfish style menu to the OpenCube menu from OpenCube solutions.
<ul id="mc_menu_1" class="mc_menu mc_depth_2">
<li id="menu_item_3" class="mc_menu_item external_link"><a href="javascript: void(0);">Single Level Menu</a></li>
<li id="menu_item_2" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Two Level Menu</a>
<ul id="mc_submenu_2" class="mc_menu mc_depth_1">
<li id="menu_item_25" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Working with a Realtor</a></li>
<li id="menu_item_26" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">The Selling Process</a></li>
<li id="menu_item_27" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Preparing and Staging Your Home to Sell</a></li>
<li id="menu_item_28" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Marketing</a></li>
<li id="menu_item_29" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Home Inspections</a></li>
</ul>
</li>
<li id="menu_item_1" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Three Level Menu</a>
<ul id="mc_submenu_1" class="mc_menu mc_depth_1">
<li id="menu_item_12" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Our Services</a></li>
<li id="menu_item_13" class="mc_menu_item external_link"><a href="javascript: void(0);">Search Our Listings</a></li>
<li id="menu_item_14" class="mc_menu_item external_link"><a href="javascript: void(0);">Property Search -- MLS</a></li>
<li id="menu_item_11" class="mc_menu_item external_link"><a href="javascript: void(0);">Buyer Resources</a>
<ul id="mc_submenu_11" class="mc_menu mc_depth_0">
<li id="menu_item_21" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">10 Easy Steps to Get Into Your New Home</a></li>
<li id="menu_item_22" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Making the Decision to Buy a Home</a></li>
<li id="menu_item_23" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Buying a Home that Fits Your Lifestyle</a></li>
<li id="menu_item_24" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Home Inspections</a></li>
</ul>
</li>
<li id="menu_item_19" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Lending Tools</a></li>
<li id="menu_item_20" class="mc_menu_item wordpress_link"><a href="javascript: void(0);">Specialty Real Estate</a></li>
</ul>
</li>
<li id="menu_item_5" class="mc_menu_item external_link"><a href="javascript: void(0);">Link Example A</a></li>
<li id="menu_item_5" class="mc_menu_item external_link"><a href="javascript: void(0);">Link Example B</a></li>
<li id="menu_item_5" class="mc_menu_item external_link"><a href="javascript: void(0);">Link Example C</a></li>
<li id="menu_item_5" class="mc_menu_item external_link"><a href="javascript: void(0);">Link Example D</a></li>
</ul>
If you are still having trouble and need help building your menus, I can usually set one up for a site in about 15 - 45 minutes and my average fee has been $20 - $40. This would include me adding the code to your template, setting up the first two or three menus, and adding three example link items.