When it comes to delivering custom websites at competitive pricing any good service provider should build and maintain an inventory of foundation design elements to help with rapid deployment of client sites. Such an inventory can take a great deal of time to acquire and maintaining the design elements or template foundations to be consistent with trends and front line practices can be a daunting task. Thankfully there are a few good theme development platforms that eliminates many of these design frustration for a designer. Once such theme is the THESIS by DIYThemes.
Over the past year, THESIS has grown exponentially in terms of its use by developers as a foundation framework for site design. Due no doubt to the lofty list of features that THESIS includes, THESIS makes the project development flow a bit quicker and easier to maintain. Because of the popularity of THESIS, the ever growing list of people that wish to add our WordPress Menu Creator plug-in to a THESIS design has also grown. Although THESIS has menu management features integrated with the themes options, clients and web designers often seek to employ our plug-in where much tighter and more CMS like control over menu management is desired. So I’m going to show you the quick and easy way to deploy Menu Creator in Thesis.
Now, in order to begin this relatively simple process you must have THESIS 1.6 installed and you must have renamed the example custom folder to /custom/ in order to make the edits necessary for using the menu creator. You should also have the menu creator installed and activated. Optionally you should create a menu and title it as “Top Navigation” or something similar.
Now, before we begin the actual edits please keep the following in mind. It is very important to note that the generated code by the WP Menu Creator is simply an XHTML compliant unordered list. The < ul > will have an ID assigned to it based on the menu ID so the very first menu you create would be Menu ID 1, so the resulting markup for the unordered list would be < ul id=”mc_menu_1″ > As such, we will address the styling options toward the end of this article.
Simply navigate to the THESIS settings menu and select custom file editor. Then, select from the drop down list the custom_functions.php to add the necessary code.

function custom_bookmark_links() {
global $post;
?>
<ul class="bookmark_links">
<li><a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark this article on Delicious</a></li>
</ul>
<?php
}
Just after the closing bracket, assuming your custom_functions.php file has not been previously edited, you will enter the code as follows. Make sure you change the menu ID to be consistent with the actual WP Menu Creator ID.

The following code tells thesis to remove its “thesis_nav_menu” and add the menu creator. If the displayMenu function exists (if the plugin is activated) it will display menu ID 1. If not I have this example to show the categories.
function menucreator() {
if (function_exists('displayMenu')) {
displayMenu(1);
} else {
echo '<ul id="mc_menu_1">';
wp_list_categories('title_li=');
echo '</ul>';
}
}
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','menucreator');
Alternatively you could replace the section where wp_list_categories exists and show the actual thesis navigation if the menu creator is not active or a menu is not created. The code would look like this.
function menucreator() {
if (function_exists('displayMenu')) {
displayMenu(1);
} else {
thesis_nav_menu();
}
}
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','menucreator');
The final result should look something similar to this.
function custom_bookmark_links() {
global $post;
?>
<ul class="bookmark_links">
<li><a rel="nofollow" href="http://delicious.com/save?url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&noui&jump=close&url=<?php urlencode(the_permalink()); ?>&title=<?php urlencode(the_title()); ?>', 'delicious', 'toolbar=no,width=550,height=550'); return false;" title="Bookmark this post on del.icio.us">Bookmark this article on Delicious</a></li>
</ul>
<?php
}
function menucreator() {
if (function_exists('displayMenu')) {
displayMenu(1);
} else {
echo '<ul id="mc_menu_1">';
wp_list_categories('title_li=');
echo '</ul>';
}
}
remove_action('thesis_hook_before_header','thesis_nav_menu');
add_action('thesis_hook_before_header','menucreator');
As mentioned above, the Menu Creator renders the UL with the menu ID so each menu can be individually styled. Since it will render the menu without any CSS reference at all you can opt to include the existing CSS for the THESIS menu in the custom css file by changing the directives or you can add your own CSS. There are countless examples of CSS navigation using this markup so the possibilities are endless.
Please feel free to ask for help if you need it.
Making a big jump from WP Menu Creator 1.7 to version 2.0 as we have sat on updates for many weeks eagerly awaiting a look at WordPress 2.9 before we committed to anything. I’m happy to say that WP Menu Creator will work with version 2.9 of WordPress.
I’ll post more when it is available.
Currently we have about 30 submitted sites that use the WordPress Menu Creator and we are going to publish these and others in three separate categories. The categories are; Theme developers that distribute the Menu Creator in their themes, Sites that use the Menu Creator, Sites that use third party themes converted to work with menu creator. Although the actual titles of these categories are not set in stone as of yet, they do represent the three main areas we want to share with users of this plug-in. I’ll explain a little more on what each category will represent and you can submit your feedback or link for inclusion in the page of examples that are befitting of these categories. Once your example is published in these categories, you can link back if you so desire and naturally submit additional examples as you make them available. I’ll return to this post a little later and provide links to each of those categories. Lets look at what each of these categories will be applied to and how we intend on using them;
Since we make it super easy to distribute the Menu Creator in themes, we decided to create a category that will feature details and links back to those theme developers. The theme developer simply submits a few short paragraphs about their theme, a screen shot, the link they want us to publish and we are going to start providing links to those in support of the WordPress Menu Creator. Our only requirement is that the short summary you submit must state that it employs the WP Menu Creator.
Why distribute WP Menu Creator in your theme? Simple! Its void of any link back requirements, we do not advertise or solicit products or services in the plug-in, there are no heavy branding or other types of “thou shalt worship us” phrases in the plug-in, its super easy to implement into your theme for distribution given the code we provide and there is no cost to you. You gain by providing the absolute best possible menu management solution available for WordPress which is so flexible it can literally accommodate any type of CSS / XHTML compliant menu system. We already have many theme developers publishing themes with the Menu Creator for you to examine their solutions.
We get requests to help theme designers and webmasters implement the WP Menu Creator several times a week. After having provided technical assistance and even examples of the code to many of our plug-in users, we decided that we are going to start publishing summary details and links to those projects or developers that use the Menu Creator. Like the category above, when we publish the details, we all also publish a one way link back to the project site and even a screen shot of the menu system being employed.
The idea behind this is simple. When we first built the WP Menu Creator we knew that it would need to be so flexible that it would literally accommodate hundreds if not thousands of different types of CSS / XHTML compliant menus for WordPress. Like our new WP Form Creator or the WP Zillow plug-ins we also publish, we decided that maybe the best way to make our products truly flexible is to simply not deliver any CSS markup for styling. We didn’t want users of the products to think that these were the only possible styling options thereby giving us a poor rating on the power of the Menu Creator or Form Creator for instance.
Almost daily, we receive about a half a dozen requests for help in using the WP Menu Creator with third party themes like those published by Thesis or StudioPress themes among many others. Although we are happy to provide assistance to users of our plug-in, the number of requests at times becomes a bit high and difficult to keep up with. These types of themes differ from the average site owner or developer of custom works in that these themes are most often commercial and are usually quite popular with literally thousands of bloggers using them. Because of this we have published code snippets and instructions on how to modify some of the more popular themes for use with the Menu Creator and will begin publishing those examples today in the new section we have setup. The number one problem with WordPress Menu Management is the requirement that most theme developers essentially require you to manage your menu by managing the way you publish your content. This is neither effective or consistent with proper menu management.
For the most part, menu management in WordPress is largely handled by the themes coded features that display links as a result of posts, pages or other types of navigable elements within your blog. As WordPress grows in its use as a CMS solution, existing menu and navigation methods become quirky and un-natural in following the true essence of a CMS solution. In order to be a true CMS, content and the navigation must not be inner-dependent and should not require even casual manipulation of your sites content structure in order to achieve the navigation structure you desire. With WordPress as either a blog or a CMS solution, navigation for any effective website must (or should) follow the principles of guided navigation and should have a URL structure that is as shallow as possible in order to be truly user friendly. Navigation links should also be able to be controlled in a way that allows for inclusion of keywords in the title, alt tags, and even an option to control which links are followed and which are not by the site manager.
With most themes being published today, methods being used are not befitting of good site navigation or design and can actually be counter productive to your objective. Many themes present the three primary issues that bloggers suffer most in regard to website and menu management; The number one problem with WordPress menus is that they are literally not easily managed, therefore the subject of this post. Subsequently WordPress Menus generally do not follow good principles of guided navigation, and last they require modification to the content structure to achieve even casual structuring. You can examine each of these three issues as we continue below.
Guided navigation is articulated best by comparing it to good goal planning or task list practices. With any truly effective goal setting process, the goal planner will almost always start out with broader more generalized final goal or end result, and then identify the steps to be broken down into smaller more manageable tasks. One of the primary goals for any website owner should be to get the right information to their visitors as quickly and painlessly as they can. It may also be the goal to lead your client to the products and services quickly enough as to capture the lead or even the sale and in order to do so. Studies indicate that the faster you do this the more likely a person will stay on your site and the more likely they will make a decision to contact your or purchase a product. Well organized sites are not just perceived as being better, they literally are better in terms of effectiveness and user friendliness. With that in mind we can summarize the elements of Guided Navigation as being the identification of the goal, the steps or tasks in which to reach the goal and the methods you use to guide the end user through the tasks as painlessly as possible.
Goals in the case of a website are actually identified by more than just the site owner. Visitors to your site have their own objectives in visiting you and may have their own ideas as to how to find what they are seeking. Because of this, a good site manager will always keep in mind that the entry point into the site will rarely be the front page. When someone Googles a term, locates a page within your site, the point of entry will not likely be the front page. Good guided navigation suggests that if you are conscious of this, your site will at bare minimum feature general topics in the navigation that can then be narrowed down to finder points. A sort of general to specific navigation structure really does make up the ideal example of how guided navigation should work. Lets look at how many themes miss this principle.
Nearly every WordPress theme I’ve examined, has menu navigation based on categories and pages with posts being displayed in some manor of “latest” something or other. Although many WordPress themes are exceptionally fine at presenting the aesthetic appeal side of a blog or CMS, they tend to lack heavily in the management of good overall structuring of a CMS type solution. Your menu should not be dependent on the structure of your content. With many themes this is the common way of structuring both navigation and content.
Studies indicate that the more shallow your URL structure is the more likely it will be referred to others and remembered by end users.
Menu management should be simple, quick, user defined, and most important guided. In order to achieve this there is only one tool available for Guided Navigation, that fits the bill of true menu management and that is our tool the WordPress Menu Creator. The tool or plug-in as its known, is essentially a generator of sorts that renders an XHTML Unordered List of link elements that you can style and modify according to your sites design. The Menu Creator can be applied to most third party themes with little modification. What does the Menu Creator provide? This list can answer that.
Today we added a new feature to the Menu Creator to allow you to set yet another option in your link structure in response to the Google REL Canonical URL update. Google made a post along with a video related to this new feature as presented by Matt Cutts and its worth a look because reckless application of this in your site can be consequential and counter productive to your efforts. Key points from Google include;
Is rel=”canonical” a suggestion or a directive?
This new option lets site owners suggest the version of a page that Google should treat as canonical. Google will take this into account, in conjunction with other signals, when determining which URL sets contain identical content, and calculating the most relevant of these pages to display in search results.
Can the link be relative or absolute?
The rel=”canonical” attribute can be used with relative or absolute links, but we recommend using absolute links to minimize potential confusion or difficulties. If your document specifies a base link, any relative links will be relative to that base link.
In using this feature within the Menu Creator it is a good idea to pay special attention to how you are using it, why you are using it and where you are using it. Since we built the Menu Creator to function on sites that may include shopping carts, OpenRealty, and even other CMS solutions, you have the option via our code library to not only manage menus externally of WordPress but even on external domains. If you are using these features it is ESPECIALLY IMPORTANT to note that this new REL element is for a specific local domain and not remote or multiple domains as is the case with 301 redirects for instance.
If you have questions, please either contact us directly or simply post a comment below that we may answer publicly for others to see as well.
Below are some examples of CSS styles that can be copied to your style.css file to complete the styling of your Wordpress menus. Be sure to edit the Menu #s. Colors and images can also be edited to match your website theme.
Our first example can be seen at www.RELV.com. Both the Top Menu (within the header.php) and the Main Menu (within the sidebar.php) use our Wordpress Menu Creator.
You can change save and change the gradient images below and adjust the colors in the CSS to match. Important: Please note where the CSS refers to menu_8 to change to match YOUR menu number. In order to identify your Menu Number in your Wordpress Dashboard go to the “WP Menu Manager” under “Tools”. Mouse over your Menu and read the ID number in your status bar at the bottom of the page.
/*=-=-=-[Navigation]-=-=-=*/
#topnavigation {
position:absolute;
top:55px;
left:0px;
z-index:105;
background: url(images/navbar.jpg);
width:900px;
height:20px;
font-size:12px;
font-family: Arial, Tahoma, Verdana;
color: #fff;
font-weight: bold;
argin: 0px auto 0px;
padding: 0px;/* border-bottom: 1px solid #8c0000 */
}
#topnavigation a, #topnavigation a:visited {
color: #fff;
font-size: 12px;
text-decoration: none;
padding: 0px 0px 0px 3px
}
#topnavigation a:hover {
color:#fff;
text-decoration:underline;
padding:0px 0px 0px 3px
}
#topnavigation ul {
list-style-type:none;
margin:0;
padding:0;
}
ul#mc_menu_1 {
margin:0px;
padding:0px;
list-style-type: none !Important;
}
#mc_menu_1 a, #mc_menu_1 a:visited {
background:#FFF url(images/navlink.jpg) right;
color:#FFF;
display:block;
font-weight:bold;
text-transform:uppercase;
margin:0px;
padding:2px 17px 2px 15px;
border-right:1px solid #5a0000
}
#mc_menu_1 a:hover {
background:#fff url(images/navhover.jpg) right;
color:#FFF;
margin:0px;
padding:2px 17px 2px 15px;
text-decoration:none
}
#mc_menu_1 li {
float:left;
margin:0px;
padding:0px
}
#mc_menu_1 li ul {
position:absolute;
width:10em;
left:-999em
}
#mc_menu_1 li li {
float:left;
margin:0px !Important;
padding:0px !Important;
width:150px;
}
#mc_menu_1 li li a, #mc_menu_1 li li a:link, #mc_menu_1 li li a:visited {
background:#d71c22;
width:150px;
float:none;
text-transform:none;
margin:0px;
padding:2px 10px 2px 10px;
border-bottom:1px solid #8c0000;
border-left:1px solid #5a0000;
border-right:1px solid #5a0000
}
#mc_menu_1 li li a:hover, #mc_menu_1 li li a:active {
background:#8c0000;
padding:2px 10px 2px 10px
}
#mc_menu_1 li:hover ul {
left:auto;
display:block
}
#mc_menu_1 li:hover ul, #mc_menu_1 li.sfhover ul {
left:auto
}
/*=-=-=-[End Navigation]-=-=-=*/
<?php displayMenu(1, 2); ?>
Right Click and “Save Image” Menu Images:
![]()
![]()
This menu is NOT cascading (no child levels) so the CSS does not need to refer to the menu number and no images are used, only background colors. Additional styling for fonts, sizes, colors and weight can be added.
#rightmenu li {
}
#rightmenu li a {
display:block;
padding:3px 8px;
background:#d8c7a9;
width:244px;
}
#rightmenu li a:hover {
background:#dfd0b1;
}
#rightmenu ul a {
text-decoration:none;
}
We get asked this time and time again about how to we are able to take our Menu Creator and display the menus externally outside of the WordPress template. There are instances where a person would like to add his or her WordPress menu in their other non-WordPress pages on their site as we do quite frequently with the UltimateIDX among other applications.
Earlier today, I received another such emails from Yanik Prefontaine, a contributor whom of which has been assisting us with a multi-lingual update to the Menu Creator and he had asked us what the best method is for performing such a task, by displaying menus externally. Here is a more detailed description of what I sent Yanik a few moments ago.
First, the process for displaying Menu Creator Menus externally is actually quite simple and seems to work in all instances we use it in. But first, why exactly would a person want to do something like this? Well, consider for a moment this example situation that we encounter when building Real Estate Websites.
After building an UltimateIDX project with a custom WordPress template and then integrating it with our IDX/RETS solution, a client will ask if there is a way to add in functionality for adding a special class of listings to their site. Since most MLS’s require that their data occupy a database not shared with other NON MLS data, we usually opt for a custom solution where deemed necessary. An alternative solution we may employ would be to use a modified version of a popular open source listings manager called OpenRealty. After porting the clients custom WordPress design to OpenRealty, we set about integrating features to work and function in concert with the overall sites functionality while making it as transparent as we possibly can.
Client case in point is an UltimateIDX client needing a way to display rental properties they manage where the listings are not actually part of the local MLS data. This client had also requested a way for him to be able to display properties that are either in the process of being built or are nearing completion in a special listings feature for builders. That being said, here is the process for making the menus work in the external listings manager, controlled from a single location, WordPress.
What we usually do is create a WordPress template file with only the php tag required for displaying the Menu Creator menu and we usually name it like tpl.sidemenu.php or tpl.topmenu.php for instance. But what are WordPress template files? WordPress has a truly unique feature in that you can assign custom templates to pages and posts to meet the specific needs of the designs requirements. We often call this the Micro CMS feature of WordPress because it allows for a pretty bold list of possibilities for building feature rich sites with WordPress. If you consider for just a moment, that 90% of all of our designs have these special TPL (tpl.templatefilename.php) files in them, most often used to accommodate a modest, yet noticeable difference in the templates appearance for such things as categories or maybe specific subjects such as subdivisions or cities as is the case in Real Estate Websites using WordPress.
What a WordPress tpl file looks like will certainly vary depending on its function but the bare minimum requirement in our case looks like this;
<?php
/*
Template Name: TopMenu Template
*/
// Used to display my top menu in OpenRealty or Joomla for example so I can control the menus site wide from one location.
?>
<?php displayMenu(1, 3); ?>
Creating the page in order for this external feature to work begins first with the upload of the new tpl.top-menu-external.php file to your theme directory. Naturally you can name your php file anything you wish to so long as its not in conflict with the name of other files in the WordPress hierarchy. Once you upload your new template file, you simply create a new page and assign the template to that page. I usually name my pages for these types of things like “external-top-menu” or “sidebar-menu-include”. There isn’t any real need to have the WordPress loop in your template file so there isn’t any real need to put anything in the editor other than a description of what that page is for.
Now, to use the Menu Creator menu externally we use either cURL or PHP to include the page path into our external location. Depending on how you have your permalinks configured, a page could for instance look like http://yourdomain.com/top-menu-external/ or http://yourdomain.com/top-menu-external.html which you should verify before trying the include.
Some servers will not allow for URL Includes in part due to security reasons.If your server is configured to allow for a php url include you could use <?php include(‘http://yourdomain.com/top-menu-external.html’); ?>
If that is not a possibility, then cURL comes to the rescue with the following code;
<?php
$curl_handle=curl_init();
curl_setopt($curl_handle,CURLOPT_URL,’http://yourdomain.com/top-menu-external.html’);
curl_exec($curl_handle);
curl_close($curl_handle);
?>
Place either of the above code snippets where you want the menu to render and it should show the menu from WordPress. Its important to note that CSS and other menu related code must be linked to in order to match styling features and its a good idea to test it on a non essential external page before committing the changes to a live location.
FYI, did you know that the remote include method described above can also be applied and used for things like the sidebar or footer for example. We have many dozens of Real Estate Websites that are built on WordPress that have WordPress site elements displayed in their non WordPress content and applications.
UltimateIDX developers have released version 1.1 of the WP Menu Creator which includes a multitude of new features in answer to requests by users of the plugin. Although the previous WordPress published version was 1.0.6, the jump to 1.1 was not without intermediate releases within this site. Versions 1.0.7 – 1.0.9 were bug fix releases that addressed a handful of small issues users were having in getting the menu to show and function properly. Although we have have included a new RSS feature to provide up to date css menu examples beginning this May 15th, the Yahoo Tabs feature will be replaced with our own home grown code to reduce its dependency on third party GNU / GPL sources.
This version of the menu creator includes new features to assist developers and web designers in the distribution of the menu creator with there commercial or non commercial themes. By extending superior menu management features within their themes, designers and developers can provide a truly turnkey blog or micro CMS solutions easily. We have also added a new feature to allow for XHTML compliant links to open in a new window. Since the standard method which uses target=”_blank” is not XHTML compliant, we have opted to include a popular javascript alternative which functions essentially in the same way. In addition, we have expanded some of the javascript code to allow for links that can have the REL=NOFOLLOW along with the new window link. In the next release we will expand this a tad more by providing a few more variables for the REL link option.
So whats next? Well we start publishing a few dozen menu examples and the CSS for your implementation and then we open up the forum for member submitted and third party navigation code to be shared. May 15th is our target date and the new features will be reflected in version 1.1.1 and will likely include an option for making menu items image based. Tutorials have already been scripted and ready for use in just a few days.
Today we wrapped up several key enhancements to our WordPress Menu Manager plug-in that should assist in the implementation and use of the plug-in by non-technical blog users. Many times we have faced tech support issues related to the complexity of making the menu creator work in a vast assortment of WordPress themes by entry level users (those we consider non programmers or designers per se). Although the WP Menu Creator was built initially to assist theme designers, developers and other WordPress professionals in providing exceptional menu control features, individual blogger(s) have demonstrated a substantial interest in implementing this tool in their own sites. From a users perspective given the knowledge they have, it was thought for sure our coders had crossed every “T” and dotted every “i” in making the plug-in easy to use by our target audience. With this new release I think we safely come to such a conclusion which I’ll articulate as I go on.
After hours of tech support, emails, blog posts and discussions, it became clear we really need to include new features in the plug-in to help maximize or should I say broaden the scope of end user friendliness. WordPress, as you may very well know, is the most popular and widely supported blogging solution available anywhere in the world even when compared to popular full blown CMS solutions. Part of its popularity is the ease in which it can be implemented and used by literally any site owner regardless of experience or expertise. When we built this plug-in, we knew that a blog owner would benefit substantially if given the ability to control not only the scope and structure of their navigation elements but the order and frequency in which those elements show on the blog is a feature that can not be understated on any level. With the Menu Creator, blogger(s) have the power to create, organize, and then implement one of the most powerful characteristics of good web design which is to provide “Guided Navigation”. (More on Guided Navigation Later).
This update answers what we came to understand and learn as “still slipping by” for effective implementation by all users. With version 1.0.7 we have implemented new features that provide the menu user with an inventory of code snippets and menu examples, latest updates and news for integration with themes, quick drop in snippets and even video tutorials all accessible from within the WP Menu Creator admin screen. In this release we have also added the Yahoo AJAX Library which will be featured in all our future plugins.
© 2006 - 2010 - UltimateIDX Inc. - All Intellectual Rights Reserved
UltimateIDX is a Leader in RETS and IDX Services and Real Estate Lead Management. Call (702) 335-6580 Today! UltimateIDX, Inc. - 6088 Villa Lante Av., Las Vegas - Nevada - 89113