Skip to main content
WordPress made easy with the drag & drop Total WordPress Theme.Learn More

How to Add SuperFish Dropdown Menus in WordPress

January 2, 2018

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:

superfish-wordpress
Article by AJ Clarke WPExplorer Staff
Published on: June 3, 2011
Last updated on: January 2, 2018
Subscribe to the Newsletter

Get our latest news, tutorials, guides, tips & deals delivered to your inbox.

27 Comments

  1. behzad says:

    hi AJ Clarke, thanks for this post, i want to add class for first , how can i add class :
    ‘primary’,
    ‘sort_column’ => ‘menu_order’,
    ‘menu_class’ => ‘sf-menu’,
    ‘fallback_cb’ => ‘default_menu’
    ));
    }
    ?>

  2. behzad says:

    add class for first li

  3. Darko says:

    You’re talking about the drop-down superfish menu here, not the horizontal right?

    • AJ Clarke | WPExplorer says:

      Correct – the drop-down horizontal or vertical menu. The direction just depends on the CSS you grab from the script’s website.

  4. Ryan S says:

    Nice tut, I need sf-menu for my wordpress new theme just one suggestion in JS side, you can directly use

    jQuery(document).ready(function($){
    // JS code here
    });

    🙂

  5. Abbe says:

    How to make drop down appear only after the parent clicked rather than hover?

  6. Burak Şahin says:

    I made it but there is a problem betwen slider and menu, When I open the menu, it is under the slider but another page without slider, there is no problem. How can I correct the error ? help me 🙂

    • AJ Clarke | WPExplorer says:

      Looks good in chrome. Probably a z-index issue on your browse. Try adding #tema #menu { position: relative; z-index: 99; }

  7. Jivko says:

    Hi there,

    Thanks for the nice tutorial! I have a little problem though. I have followed the steps carefully and I have the menu running but my submenu items do not show properly; only the last submenu item shows up when one hovers the parent. I tried this:

    wp_deregister_script(‘jquery’);

    wp_enqueue_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js’);

    with the hope that swapping the jquery versions would help but the problem still persists.
    Here is link if you are willing to look

    Thanks for your help!

  8. Jivko says:

    You can disregard my previous comment. I figured out the problem.

    Thank you for your tutorial!

  9. Suz says:

    Hello! I am new to WordPress and SuperFish, so forgive my lack of knowledge. I came upon your blog and out of everything I have found, this page is the most clear and helpful.

    My dilemma is that I am trying to simply get my SF drop down menu items (children) to run on two lines, but only if they need to. Right now, they are simply being chopped off.

    I am not sure what I have to code, in what file. I have been staring at the superfish.css file and my eyes burn.

    Any help appreciated. 🙂

  10. Niculae Bucur Ion says:

    Everything works perfectly, thanks for this article.
    A small question: I saw the themes produced by you the small picture in the right page which has drop down menu how to put there?
    Thanks for respond.Good bless you.

    • AJ Clarke | WPExplorer says:

      I’m not quite sure what you mean by the small picture. What URL are you referring to?

      By the way, with CSS3 now I don’t really use SuperFish anymore 😉 I use CSS3 only. You can have a look at the scope theme demo for an example of making dropdowns with CSS only, in my opinion its better.

  11. Urban Viher says:

    Hi there, kaserer.ch/sites/aw/ these is the site that i’m working on, now i will need a menu that you click on it and opens a submenu betwasche these is the menu …. can you please help me out i was trying to use these superfish but you know i’m kind of lame … and my question is can i do it without superfish ?

  12. Go says:

    Hi, AJ

    How to make menu active class when you are in page ex: when you click contact the menu will active in contact menu , for me it works only for HTML version.

    Best regards,
    Go

  13. Nico3189 says:

    I don’t really understand where i have to put the things in step 5. I have not seen this wp_nav_menu anywhere else?

  14. mabuc says:

    Hi,

    Are their any tutorials on how to create a mega menu in superfish? current version of superfish supports megamenu.. that would be cool..

    thanks

    • AJ Clarke says:

      I don’t have any for WordPress. But there are much easier ways to create simple mega menus. You can see how I do it in my Total Theme via a simple classname added to the parent li element, then some simple CSS to style it like a mega menu.

Leave a Reply

Your email address will not be published. Required fields are marked *