Add A SuperFish Drop-Down Menu To Your WordPress Theme

When it comes to drop-down menu’s I’ve always been a huge SuperFish fan. Not only is the SuperFish jQuery plugin super easy to use and customize, but everything is given to you so you pretty much just have to copy and paste the code into your design.

Adding SuperFish to WordPress is actually a very simple task, but for those just starting out it can be a bit more difficult or you may end up doing it the wrong way (such as calling the script in your header.php file). So the following post will walk you through all the steps in adding the drop-down menu to your theme.

Step 1: Download The SuperFish Plugin

The first step is to simply visit the SuperFish download page and download your code. I suggest just downloading the .ZIP file that includes everything you need.

Step 2: Add The CSS & JS To Your Theme Folder

Next you’ll want to extract the contents from the zip folder and upload them to the theme’s folder you are working on.

• Copy the contents of superfish.css to your style.css
• Copy the contents of the superfish-navbar.css file to your theme’s style.css file – this will give it the style which you can edit after
• Drag the superfish.js and supersubs.jps files to your theme – I prefer to put them in a folder called “js”

Step 4:  Call The JS In Your Functions.php & Start The Script

Now that you have all the CSS and JS added to your theme you’ll want to call the JS and start up the script. I will first show you how to call your scripts the right way (see Adding jQuery to your WordPress theme for more info) in your functions.php file as well as how to include the Google hosted jQuery instead of the one found in your WordPress installation. Last I’ll give you the code that should go in your header.php to start up the script.

a. Add To Your Functions.php File

// scripts function
add_action('wp_enqueue_scripts','wpexplorer_scripts_function');
function wpexplorer_scripts_function() {

// use Google JS Library
 wp_deregister_script('jquery');
 wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"), false, '1.5.0');
 wp_enqueue_script('jquery');

 // SuperFish Scripts
 wp_enqueue_script('superfish', get_stylesheet_directory_uri() . '/js/superfish.js');
 wp_enqueue_script('supersubs', get_stylesheet_directory_uri() . '/js/supersubs.js');
}

b. Add To Your Header.php File anywhere below the wp_head() hook

<script type="text/javascript">
jQuery(function($){
    $(document).ready(function(){
      // superFish
       $('ul.sf-menu').supersubs({
       minWidth:    16, // minimum width of sub-menus in em units
       maxWidth:    40, // maximum width of sub-menus in em units
       extraWidth:  1 // extra width can ensure lines don't sometimes turn over
     })
    .superfish(); // call supersubs first, then superfish
     });
});
</script>

Step 5: Add SF-Menu Class To Your WP_Nav_Menu Function

Now all you have to do is add the “sf-menu” class to your navigation ul. If you previously had a navigation bar in your theme you will want to remove all they styling and just leave the main UL container, since you’ve added all the style needed for the drop-down menu in step 2.

a. Add the sf-menu class to your wp_nav_menu function array:

'menu_class' => 'sf-menu',

b. Full Sample:

<?php
if ( function_exists('wp_nav_menu') ) {
     wp_nav_menu( array(
         'theme_location' => 'primary',
         'sort_column' => 'menu_order',
         'menu_class' => 'sf-menu',
        'fallback_cb' => 'default_menu'
       ));
     }
 ?>