• Home
  • Services
  • Facebook
  • Privacy Policy

TricksDaddy

  • Home
  • Services
  • Facebook
  • Privacy Policy

How To Add Multi Level jQuery Navigation Menu To Thesis WordPress Theme

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.

Thesis - Best SEO Optimized WordPress ThemeNote: 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.

  1. 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 –
  2. 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>
  3. Click on the Save Button.
  4. Now go to Thesis -> Custom File Editor and select custom_functions.php file.
  5. 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');
  6. 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.

Share On
 Previous Article How To Add Tabbed Widget To Thesis WordPress Theme Sidebar
Next Article   How to Add Floating Social Media Buttons to WordPress Blog without any Plugin

20 Comments

  1. SQL Training
    July 15, 2010 at 11:47 am

    But I do not think that the Navigation bar will be automatically updated with the categories? or will it?

  2. Jitendra
    July 15, 2010 at 12:35 pm

    Why do you have to add jQuery from google repository?? Thesis has built in jQuery which can be enabled from thesis options..

    • Simrandeep
      July 16, 2010 at 5:11 pm

      I don’t know about the default jquery function of thesis theme. Can you pls tell me where it is ?

  3. Chethan
    July 17, 2010 at 10:11 am

    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

    • Simrandeep
      July 19, 2010 at 11:33 am

      @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.

  4. Doug
    July 19, 2010 at 2:25 am

    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!

    • Simrandeep
      July 20, 2010 at 6:39 pm

      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 ?

  5. SQL Training
    July 20, 2010 at 4:35 pm

    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

  6. Doug
    July 22, 2010 at 1:10 am

    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.

    • Simrandeep
      July 22, 2010 at 8:10 am

      I’ll update the post with thesis’s baked-in architecture 🙂

      • Doug
        July 22, 2010 at 6:30 pm

        Excellent! I look forward to it.

  7. CatalystOne
    September 2, 2010 at 3:14 am

    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.

  8. CatalystOne
    September 2, 2010 at 4:37 am

    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.

  9. CatalystOne
    September 2, 2010 at 5:17 am

    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

  10. Joseph C. Pham
    December 6, 2010 at 9:06 pm

    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

    • Simrandeep
      December 7, 2010 at 6:25 pm

      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.

      • comancsm
        December 25, 2010 at 5:30 am

        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?

      • crinthia
        February 12, 2011 at 7:00 pm

        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.

  11. Raj @ Social Media News
    August 19, 2011 at 11:21 pm

    the demo link is not working…

  12. Pingback: Tweets that mention How To Add Multi Level jQuery Navigation Menu To Thesis Wordpress Theme -- Topsy.com
© Copyright. Theme by BloomPixel.