WP Menu Creator with Thesis Theme

Cascading CSS Navigation In Thesis

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.

Thesis Hooks – Replacing Stock Menu with Menu Creator

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.

The default custom_functions.php looks like 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()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;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()); ?>&amp;title=<?php urlencode(the_title()); ?>" onclick="window.open('http://delicious.com/save?v=5&amp;noui&amp;jump=close&amp;url=<?php urlencode(the_permalink()); ?>&amp;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');

Some Final Notes

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.

This entry was posted on Wednesday, February 24th, 2010 at 6:28 pmand is filed under WordPress Menu Creator. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

17 Comments to WP Menu Creator with Thesis Theme

Leave a Reply

Click here to cancel reply.

Name (required)

Email (required)

Website

CommentLuv Enabled

This site uses KeywordLuv. Enter YourName@YourKeywords in the Name field to take advantage.

Notify me of followup comments via e-mail