After moving my blog to Thesis WordPress theme, I realized that the default navigation menu of thesis theme is not so good and it’s not much attractive. I have seen few blogs are using jQuery based navigation menu these days. jQuery based navigation menu gives the smooth effect and it looks great on a blog. In this tutorial I’m going to share tutorial on adding a jQuery smooth navigation menu to thesis WordPress theme.
Note: Please take backup of your custom.css and custom_functions.php file before making any changes to your theme.
How to add jQuery Navigation Menu to Thesis theme
In this tutorial I’m going to use the script provided by DynamicDrive called as Smooth Navigation Menu. Smooth Navigation Menu is a multi level, CSS list based menu powered using jQuery that makes website navigation a smooth affair.
Demo: Click here for a demo.
- First of all download the following 4 files and upload these files to the root directory of your WordPress blog.
- ddsmoothmenu.js
- ddsmoothmenu.css
- 2 images –
- Now go to Thesis -> Design Options and paste the following code in Embedded Scripts under JavaScript tab.
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <link rel="stylesheet" type="text/css" href="ddsmoothmenu.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="ddsmoothmenu.js"> /*********************************************** * Smooth Navigational Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Provided for Thesis WordPress Theme users by TricksDaddy (www.tricksdaddy.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ </script> <script type="text/javascript"> ddsmoothmenu.init({ mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) ddsmoothmenu.init({ mainmenuid: "smoothmenu2", //Menu DIV id orientation: 'v', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu-v', //class added to menu's outer DIV //customtheme: ["#804000", "#482400"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] }) </script>
- Click on the Save Button.
- Now go to Thesis -> Custom File Editor and select custom_functions.php file.
- Copy and paste the following code in custom_functions.php file.
function jquery_menu() { ?> <div id="smoothmenu1" class="ddsmoothmenu"> <ul> <li><a href="http://www.dynamicdrive.com">Item 1</a></li> <li><a href="#">Folder 0</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Folder 1</a> <ul> <li><a href="#">Sub Item 1.1</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> <li><a href="#">Sub Item 1.2</a></li> <li><a href="#">Sub Item 1.3</a></li> <li><a href="#">Sub Item 1.4</a></li> </ul> </li> <li><a href="#">Item 3</a></li> <li><a href="#">Folder 2</a> <ul> <li><a href="#">Sub Item 2.1</a></li> <li><a href="#">Folder 2.1</a> <ul> <li><a href="#">Sub Item 2.1.1</a></li> <li><a href="#">Sub Item 2.1.2</a></li> <li><a href="#">Folder 3.1.1</a> <ul> <li><a href="#">Sub Item 3.1.1.1</a></li> <li><a href="#">Sub Item 3.1.1.2</a></li> <li><a href="#">Sub Item 3.1.1.3</a></li> <li><a href="#">Sub Item 3.1.1.4</a></li> <li><a href="#">Sub Item 3.1.1.5</a></li> </ul> </li> <li><a href="#">Sub Item 2.1.4</a></li> </ul> </li> </ul> </li> <li><a href="http://www.tricksdaddy.com/category/thesis-customization">Thesis Customization</a></li> </ul> <br style="clear: left" /> </div> <?php } add_action('thesis_hook_after_header', 'jquery_menu');
- Save your page.
That’s all for adding a smooth jQuery navigation menu to thesis WordPress theme.
I hope you enjoyed this tutorial. I’m waiting for your feedback on this tutorial. If you have any query related to it, do not hesitate to leave your comments.
But I do not think that the Navigation bar will be automatically updated with the categories? or will it?
Why do you have to add jQuery from google repository?? Thesis has built in jQuery which can be enabled from thesis options..
I don’t know about the default jquery function of thesis theme. Can you pls tell me where it is ?
Dude! I was looking for this.. even i was very much bored with thesis same old nav bar… ppl identifies the theme as thesis cos of its own kind nav bar… nice that u did something for changing it… Thanks.. will give a try
@Chethan
I’m glad that you find this post useful.
People don’t like the default look of thesis theme. Most of the thesis users do not customize it and use it with the default look. So visitors do not like to visit the sites with same look. You must customize it before using it on your blog.
I love the look of this menu but am unclear on how to execute. Two big questions are:
1. Loading ddsmoothmenu.js and ddsmoothmenu.css to root director? I’ve already got JS activated through the Design Options and are you saying to load the .css to the WP root or can I add it to Custom CSS for Thesis?
2. I’ve already got the Thesis drop-down menu built out so do I simply translate existing menu labels to this code?
Sorry for the dumb questions but I’m still learning the ropes. Thanks!
I’m not very much clear about your question. I think you should do what ever is written here. Can you pls give me your blog URL so that I can look at your navigation menu ?
You are right bro, people at once can come to know that one is using thesis by loving at the default navigation bar. Thanks for the tutorial bro
I think my main question is this: The beauty/power of Thesis is in using the custom php and css files and thereby managing easy and continuous updates. So I’ve already got a multi-level menu; I’ve coded in opacity, style, etc., and really just want jquery for a more sophisticated menu. Is there a way to do that using Thesis’ baked-in architecture? If not, no worries, I’m probably in over my head anyway. Just curious. Thanks.
I’ll update the post with thesis’s baked-in architecture 🙂
Excellent! I look forward to it.
OK, I’m really new at this.
I followed your directions exactly. It seems there is something that I am missing.
Now I have the Thesis menu above the site name.
And your cool jquery menu below the site name.
How do I make the JQuery my main navigation menu?
How do I link my pages to the new nav bar?
Thanks for posting this instruction.
At this page:
The entire menu list shows up on the page. Instead of as a men,
it is just a vertical list of words at the top of my page. How do I make that list appear on the page as the nav bar?
Also, please explain the difference in an item and a folder, and why some some folders are labeled 1 or 3 and others are labeled 3.1.1.
Thanks. It is really a cool menu, if I can just get it to work.
Hi, Can you also tell me how to customize you nav bar? I need to be able to use my site colors for background, hover and text. Thanks
Dear mate,
Thank you very much for your instruction and help. I’ve already follow the steps and successfully got it. But I wonder why the menu doesn’t keep the same as in the homepage when I enter the archives or single post. You can check my page to see what happen. So, please tell me how to keep the menu as in the homepage?
Thanks & Regards,
Joseph C. Pham
Hey Joseph
I visited your site and it is opening fine both on archives as well as single pages. I think you should try clearing the cache or try to open it in other browser.
I have the same issue. The menu loads only for my homepage. And at first, all the links appear vertically… Do you have the fix for this?
I am having the same problem, I was wondering if the code was missing something or maybe a url problem. It works on the main page but as soon as you go to another it is all messed up.
the demo link is not working…