WordPress 3.0 came with a quite handy Native menu support that can be easily customized through the wordpress admin. Here, we are about to see how to create a dropdown menu in wordpress using Superfish , a popular Javascript based dropdown solution. CSS styles can make some gorgeous looking, robust menu solutions.

Please note : Do not try this with your blog’s main theme. Always try with any alternative theme or a separate wordpress installation. Better on a Local server in your Mac or windows pc.

Integrating Superfish with WordPress – wp_nav_menu

Superfish is a suckerfish style dropdown menu solution powered by jQuery framework. It is developed by Joel Birch and free (MIT/GPL dual license).

Superfish requires jQuery framework to work. It is better to include the latest jQuery from google code, rather than the wordpress’ built-in one.

If you are not sure about how to include jQuery from Google code, read this excellent article.

Download superfish-1.4.8.zip from here. Unpack it to the Theme’s Root_folder/scripts/ folder. Create the folders if absent. Remember the folder names you unpack into and always name the files and folders in lowercase.

Superfish requires following to work : jQuery , superfish.js and superfish.css. Remaining plugins can be added later for enhanced functionality. Convenience sake, I moved the required files into a single folder “sf”, under theme’s scripts folder. I suggest you do the same.

Organize the superfish folder.

If you choose not to move the files, make sure you use correct paths later.

Including the superfish script

WordPress allows us to include our scripts and styles in a clean way. We make use of the wordpress functions wp_register_script and wp_enqueue_script to help us. This is to be added to the <head> section of the html output by using wp_head hook.

Okay, open the theme’s function.php.

Add the following code to the file, anywhere between the php tags. The Explanation follows!

The explanation

We have created a function here – add_our_scripts() and added it to the wp_head hook. Thus it will be initialized with the theme. Also note the use of is_admin() function(with logical not operator), to exclude our scripts loading in wordpress admin pages.

function add_our_scripts() {
if (!is_admin()) {
// CODE for registering and loading scripts here.
}
}
//Add our function to the wp_head. You can also use wp_print_scripts.
add_action( 'wp_head', 'add_our_scripts',0);

We announce a php variable $scriptdir which returns the absolute path of the scripts directory when echoed. Notice the use of the wordpress function get_bloginfo along with the parameter template_url to get the absolute path to the theme directory. Or, you can use full paths.

//get_bloginfo along with 'template_url' returns the absolute path of the theme directory
$scriptdir = get_bloginfo('template_url')."/scripts/";

Now, please take take a look at the below code. For registering the superfish script and style.

Thanks for wpcoder for pointing this out. Those who use the minified version below need not do this, since the script already inits superfish.

Superfish and wp_nav_menu

Superfish uses the CSS class .sf-menu to apply dropdowns. So we need to pass the CSS class “sf-menu” to wp_nav_menu() arguments. To superfish to work, we need to pass the argument ‘menu_class’ => ‘sf-menu’.

This completes the integration of superfish menu with wordpress. Well done!

Compressing javascript file – Superfish script

In my projects, I always minify the javascript files to reduce the number of requests. loaded in wordpress are a lot of Javascript and CSS files, not to forget about the ones inserted by the plugins. In such case, this definitely helps. I have minified the superfish script along with the plugins hoverIntent by Brian Cherne and bgiframe by Brandon Aaron.

All the credits belong to the respective authors. Thanks for their hard work.

Kavin Gray is an User interface designer/ Web developer. He loves open source, follows occam's razor and is known for his all-consuming passion for Gadgets, Technology and AP. Learn more about him here. You can follow him on - Facebook or Twitter, maybe!

Nice one. It looks great. Now i’ll just have to figure out a way to use it with my blog.. after i finish editing the current theme Let’s save this page for now :p

http://kav.in kavin

Thanks Criss.

Richard

Thanks for this but I’m wondering what the content of the scripts/sf.js file is?

I can see you have both sf.js and a superfish.js files in the scripts directory but only reference the sf.js file in your code.

http://kav.in kavin

Hello Richard, sf.js is just a minified version of the superfish, that include superfish.js, hoverintent.js and bgiframe.js. Either you can include the 3 files or you can just use sf.js.

BTW, sorry for the late reply.

http://sychedelix.tk sychedelix

w00t, nice tuto thank you

wpcoder

just thought i’d let you know that you may have forgot to mention that we need to initialise the plugin as it didn’t show the arrows

jQuery(function(){
jQuery(‘ul.sf-menu’).superfish();
});

http://kav.in kavin

Oh my bad! Thanks

Forgot that on the guide, as i was using the minified version i made(that adds plugins and auto initializes superfish).
Thanks again.

Matthijs

Can you add the correct code as mentioned by wpcoder in your great tutorial? It’s only saying:

%MINIFYHTMLf58fc2f6c9604d5fa834f413ac87aa1038%

Kavin Gray

Done. Thanks for pointing out.

chris

I appreciate your post – can you share where I should do that? New to wp and just starting to understand action hooks/plugins… thanks, chris

http://www.dhtml-menu-builder.com/ Canndy girl

Great post. You seem to have a good understanding that how to create a professional drop down menu. When I entering your blog, I felt this. Come on and keep writing your blog will be more attractive. To Your Success!

jqueryWriter

massive overkill to install all this stuff. Just include a link to jquery and use
$(‘li.topNav’).mouseenter(function() {
$(‘ul’, this).show(0); })
.mouseleave(function() {
$(‘ul’, this).hide(0);
});

vanillacowboy

Awesome. Thank you. Been looking for this.
Going to try this tonight.

http://kav.in kavin

Thanks, You’re welcome.

http://www.logicalit.com Chris

Super !! Thank you for this Superfish menu tutorial!! I’ve been looking for this too.

http://www.fridaymedia.nl Rob

Hi,

I’m trying to get it to work on my wordpress theme but I just can’t get it to work properly.
Everything seems to go right (the loading of the javascripts and css styles) but all I get is a simple dropdown menu with no animation, arrows or shadow. It’s just a plain menu.
I’m trying to figure it out all day now to find out why it’s not working. Is it because I’m working on a local server (MAMP on mac) or is WordPress having conflicts with Superfish?

http://kav.in kavin

Hai rob, Did you initialise the superfish? That is the most probable cause. Like you do elsewhere…

<div id="navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'main-menu', // Location of the main menu. also refer to the article.
'menu_class' => 'sf-menu', // Important- this is the class we refer to in the next code.
)
);
?>
</div>

Last , double check if you have a javascript function named bigmove(). If not or just not sure, delete the line.
Cheerio!

http://www.fridaymedia.nl Rob

Ps. It did work on a non-Wordpress site.

http://www.fridaymedia.nl Rob

Still can not get it to work. I followed the steps you described in this blog so the jQuery is included from http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
If I go to firebug I can see the jQuery listed in the head. So, this is not the problem.
I don’t know what else could be wrong. It is really driving me nuts.
This is what I get in the header:

http://www.fridaymedia.nl Rob

Hmm… I guess the code html tag doens’t work for me here. I made a screenshot of it:

Do you see anything going wrong here?
Sorry for wasting your time with this, but I’m really desperate at the moment.

http://kav.in kavin

Yep, superfish menu should be initialized after jQuery, superfish js are included. That should be problem. Try this – on the add_action('wp_head', 'add_our_scripts') to add_action('init', 'add_our_scripts').

If you would like me to look at the files, you can mail me, or paste it in codepad.

And, absolutely no problem, please let me know.

Vern

I couldn’t get it working so I downloaded Axtra and it doesn’t work either. There’s a blank spot in Axtra where the nav should be, but when I checked it out in firebug I could see this:

instead of wp_nav_menu. Any idea what is going on? I have menu’s working in the dashboard, so that function is on.

I’d rather use the menus section instead of having to go through and label things manually, but am just relieved it’s working.

http://kav.in kavin

Hello vern,
If you just need to show your pages in the menu, wp_page_menu() should be enough.

wp_nav_menu can handle more complex menu needs and customization. But it does require manual input of labels and ordering of menu items. If it is a really a long list, things can get a bit scary. To use the wp_nav_menu with superfish, try this.

Both wp_page_menu and wp_nav_menu accepts the argument “menu_class” . Make sure this has the value “sf-menu”.

Vern

That doesn’t explain why the menu in Axtra wouldn’t work for me. Have you tested it with the latest version of WordPress?

Thanks for replying and for the information!

http://www.trendyblackguy.com TRENDYBLACKGUY

Great article! This definitely helped me figure out why the arrows weren’t showing up in the “Daily” theme for BuddyPress, and it also showed me a lot about the Superfish’s abilities. Thanks again!

I cannot for the life of me get the javascript part of the superfish menu to work either. I noticed this phrase in the wordpress codex by the way,

‘Note: This function will not work if it is called from a wp_head or wp_print_scripts actions, as the files need to be enqueued before those actions are run. See the [#Usage Usage] section for the correct hooks to use.
‘

This is exactly what you suggest doing however. Your ‘add_our_scripts’ function calls the wp_head, which according to the above should not work ?

Or maybe I’m missing something? I hope I am.
Thank you in advance
Otherwise, nice post.

Andreasdlf

The phrase: ‘Note: This function will not work if it is called from a wp_head or wp_print_scripts actions, as the files need to be enqueued before those actions are run. See the [#Usage Usage] section for the correct hooks to use.
‘is from the enqueue_script reference,http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Kavin Gray

You will need to hook add_our_scripts() to init, as hooks to wp_head does not work anymore.

add_action( ‘init’, ‘add_our_scripts’ );

dj zero

Does this work for you in IE6? I’m having an issue where the dropdowns aren’t dropping down at all and I’m trying to troubleshoot it.

chris

I have tried for quite some time now to get this working and have read through the comments here, incorporating suggestions as I went along.
I am using wp 3.2.1, and when I replace the default nav with the above code, it disappears entirely! Can anyone tell me what I’m doing wrong? I have checked to ensure proper inclusion and am not using wp_head… I checked the console and the error I get is this:

$ is not a function(function($){$.fn.hoverIntent=function…tion(){$(“ul.sf-menu”).superfish();});I read that superfish is one of the better ones for accessibility and that is very important for the users of the site I’m developing. Thanks for your help!

Chris

Following up on my previous msg,i disabled the events manager extended plugin and the console error re: the $ is gone but there is still no menu, sadly. I guess I’ll try using the un-minified versions and that intialization code next…

Kavin Gray

Sorry for the late reply, chris. Looks like you’ve got jQuery problems.

$ is not a function – means either jQuery was not included or dollar($) symbol is not available for jQuery.

1) Check the source to find out whether jQuery is being included. Alternatively you can also type jQuery.fn.jquery to confirm the jquery version. If you do not see the jQuery reference, Please use init for the hook functions. As in accordance to the tutorial,,

2) If dollar symbol is not available, then you’d have to use the term jQuery in place of every ($) symbol. Anyway that might not be practical, It should work if you have the previous one working.

http://www.internet-prezentacija.com WEB DiZaJN

Awesome. Thank you, great post and good coding.

Jpatterson2222

Thank you. This helped me to finally get mine working. I’m still having one small problem… When I mouse out, the delay feature is not working. I know I’m hooked up right because I get the slow fade in and everything, it’s just the mouseout forgiveness that’s not working. Any guesses why? Thank you.

pha3z

Did you ever figure this out? I’m having the same problem.

Jpatterson2222

Thank you. This helped me to finally get mine working. I’m still having one small problem… When I mouse out, the delay feature is not working. I know I’m hooked up right because I get the slow fade in and everything, it’s just the mouseout forgiveness that’s not working. Any guesses why? Thank you.

Hey. I’m having similar problems to Chris from 4 months back. I’m noticing that in your demonstration of transferring over superfish files into the sf directory, there is no sign of the sf.js file that appears in your example and that is called in the functions.php script. Any ideas would be appreciated!

Dan

Chris from 3 months back actually, and the similar problem is that the menu doesn’t show at all now. Also, in the Menus screen in WP, Your theme supports 0 menus. Select which menu appears in each location. appears under Theme Locations. Am I screwing this up that badly?

Kavin Gray

Hi Dan, On the screenshot – File is named as superfish.js. But sf.js includes all the needed** files at once.

So you should just enqueue the sf.js, sf style, Init the Menu as in the tut, You’re good to go.

http://www.facebook.com/ShaneWaltersOnline Shane Walters

I rarely comment to say thanks but you are the man! I find it amazing that so many people use sf yet this is the only great tutorial. I had to make a few edits but this paved the way nice and clear.

Hi, Kavin. I managed to sort out the problem there was no problem in the functions.php.

I was making the mistake of copying the text from the site (seems there was some formatting issues between it and my text editor) as soon as I started to type it out manually all the problems where sorted.

Thanks for this great tutorial

Thebil

Hi Kavin. Sorry to keep messaging you but I am hitting a few more problems

Inspect element says sf.js status not found (404) and in header.php area jQuery is not defined.

There is not sf.js file in the superfish 1.4.8 downloaded files there is superfish.js though.
the jQuery is not defined error occurs just before wp_hook( ); where the script was copied to. ( jQuery(function() ) line

and i’m getting the error in firebug
jQuery is not defined
jQuery(function(){can you help me out here ?

Kennyvonbulow

got it to work now. moved the call function in header.php to a few lines below wp_head() but how ever it doenst show me a menu still

Guest

It works great, but it doesnt show up on any other page than the first page.

Amit Wadhwa

Thanks for a great plugin – just onequestion, my arrows indicating that the menu item has a sub-menu dont show up for me. It is a pity that I cant share the site with you as it is adevelopment site on my machine:(

Hi there I am using super fish in my custom WordPress template it was working fine until I dint updated the WordPress but after that there is a weird error as soon as I log into admin section the drop down function stops working and it becomes static where as when admin is not logged in it works as it is supposed to be working could you please help me to solve this