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:
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’
));
}
?>
add class for first li
You can add a class with javascript. Would be easiest. But also, you shouldn’t really need a class for first li, because you can use li:first-child{}
Thanks 🙂
You’re talking about the drop-down superfish menu here, not the horizontal right?
Correct – the drop-down horizontal or vertical menu. The direction just depends on the CSS you grab from the script’s website.
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
});
🙂
How to make drop down appear only after the parent clicked rather than hover?
Have a look at the following thread on Stack Overflow it might help you out.
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 🙂
Looks good in chrome. Probably a z-index issue on your browse. Try adding #tema #menu { position: relative; z-index: 99; }
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!
You can disregard my previous comment. I figured out the problem.
Thank you for your tutorial!
Sorry no one ever got back to you! Glad you got it working 😉 What was the issue?
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. 🙂
Sounds like you might have a fixed height on your sub-items. Check in firebug.
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.
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.
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 ?
You can do it with superfish, but will require some custom JS on your part. I used this script before on a few projects and it works really well.
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
In WordPress when you are using the WP menu function the current classes are added automatically. Have a look at Highlighting The Active Menu in WordPress.
Thank you AJ I will take a look at the link.
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?
The code would go wherever you want the menu to appear, in most cases this would be header.php
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
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.
New link for superfish (https://superfish.joelbirch.design/)
Thank you!!!!