How to Add SuperFish Dropdown Menus in WordPress

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. There is also a Github page I recommend you bookmark in case you need any extra help or you have any issues with the js script you can post them over there.

Step 2: Add the SuperFish 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 3: Start up the SuperFish 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 in your functions.php file. Last I’ll give you the code that should go in your header.php to start up the script.

Add To Your Functions.php File to Enqueue the scripts

// Load superfish scripts
function myprefix_load_superfish_scripts() {

	// load jquery if it isn't
	wp_enqueue_script( 'jquery' );


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

}
add_action( 'wp_enqueue_scripts', 'myprefix_load_superfish_scripts' );

Note that we are using get_template_directory_uri() which links to your parent theme. If you are using a child theme be sure to change this to get_stylesheet_directory_uri() instead which points to your child theme.

Add the following code to start up the SuperFish Script

You can either add the code below to the functions.php file which will start up the superFish script by adding the javascript to the site footer before the closing body tag. Or you can of course place your javascript in it’s own file and load it via the previous function.

function myprefix_start_superfish() { ?>
	
	<script type="text/javascript">
		jQuery( function( $ ) {
			$( document ).ready( function() {
				$('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();
			} );
		} );
	</script>

<?php }
add_action( 'wp_footer', 'myprefix_start_superfish' );

Step 4: Add sf-menu Class to the WP_Nav_Menu Function

Now all you have to do is add the “sf-menu” class to your navigation ul. This is the class used to turn your menu into a SuperFish dropdown menu. If you previously had a navigation bar in your theme you will want to remove all they styling and just leave the php code fort he menu (since you’ve added all the style needed for the drop-down menu in step 2).

Somewhere in your theme’s header or if you can’t find it in the header do a quick search of the theme files with whatever text editor you are using to modify the theme code and locate the “wp_nav_menu” function for the menu you want to alter. Once located simply edit (or add if it doesn’t exist) the “menu_class” parameter so it includes the sf-menu class such as in the example below:

wp_nav_menu( array(
	'theme_location' => 'primary',
	'sort_column'    => 'menu_order',
	'menu_class'     => 'sf-menu',
	'fallback_cb'    => 'default_menu'
) );

Now, if you are making a theme from scratch and you haven’t yet defined any menu regions and added them to the site and you aren’t sure how, have a look at the following 2 helpful documentation pages in the WordPress Codex:

• Register Nav Menus
• wp_nav_menu