When it comes to creating a drop-down menu for your website, SuperFish is a popular jQuery plugin that many developers swear by. Not only is it easy to use and customize, but it also provides you with everything you need to create a professional-looking menu. If you’re using WordPress, adding SuperFish to your site is a straightforward process. However, if you’re new to WordPress development, you may find it challenging to get started or end up doing it the wrong way. In this post, we’ll guide you through the steps of adding a drop-down menu to your WordPress theme using SuperFish.
Step 1: Download the SuperFish Plugin
The first step is to download the SuperFish plugin from the official website. We recommend downloading the .ZIP file that includes all the necessary files. Additionally, you can bookmark the plugin’s Github page for extra help or if you encounter any issues with the script.
Step 2: Add the SuperFish CSS & JS to Your Theme Folder
Once you’ve downloaded the plugin, extract the contents of the zip folder and upload them to your theme’s folder. Copy the contents of superfish.css to your style.css file and the contents of the superfish-navbar.css file to your theme’s style.css file. This will give your menu its style, which you can edit later. Next, drag the superfish.js and supersubs.jps files to your theme’s “js” folder.
Step 3: Start up the SuperFish Script
Now that you’ve added all the necessary CSS and JS files to your theme, it’s time to start up the SuperFish script. First, call your scripts correctly in your functions.php file using the following code:
// 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 if you’re using a child theme, you’ll need to change the code to use get_stylesheet_directory_uri() instead of get_template_directory_uri().
Next, add the following code to start up the SuperFish script:
function myprefix_start_superfish() { ?>
add_action( ‘wp_footer’, ‘myprefix_start_superfish’ );
Step 4: Add the “sf-menu” Class to the WP_Nav_Menu Function
Finally, all you need to do is add the “sf-menu” class to your navigation ul. This class is used to turn your menu into a SuperFish dropdown menu. If you previously had a navigation bar in your theme, remove all the styling and leave only the PHP code for the menu. Locate the “wp_nav_menu” function for the menu you want to modify and edit (or add if it doesn’t exist) the “menu_class” parameter to include the “sf-menu” class, as shown below:
wp_nav_menu( array(
‘theme_location’ => ‘primary’,
‘sort_column’ => ‘menu_order’,
‘menu_class’ => ‘sf-menu’,
‘fallback_cb’ => ‘default_menu’
) );
If you’re creating a theme from scratch and haven’t defined any menu regions yet, refer to the WordPress Codex for documentation on how to do so.
In conclusion, adding a SuperFish dropdown menu to your WordPress theme is a simple process that can be accomplished in just a few steps. By following the instructions outlined above, you’ll be able to create a professional-looking menu that enhances your website’s user experience.
