Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Widgets

Integrating Superfish Menu Into a Template


This is a short and easy step-by-step guide to using the jQuery menu plugin, Superfish, developed by Joel Birch.

Step 1 Downloading

Download the Superfish pack zip from the official website.

Step 2 File Structure

Copy the CSS and JS to the theme's folder. For our tut, the target is the twentyeleven folder. The directory names are superfish-css and superfish-js.

Step 3 Import Commands

Import the CSS & JS files to header.php with the wp_enqueue_script and wp_enqueue_style WordPress functions.

Step 4 Class Setting

Search the line shown below and change as indicated. This way, we make WordPress to use the Superfish version for the main menu:

Step 5 Creating a Menu

Make and save a menu system in the WordPress admin, then it will show up in the appropriate part of the site. The picture below shows the site before the menu added:

Step 6 Menu Added

After the menu is added:

Step 7 Styling

Modify the Superfish styles to match the Twenty Eleven theme. The file is called superfish.css. Below are the details:

Step 8 Finished Version

Here is how it will look like when it's finished:

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.