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: