You are Viewing : HomeWeb DevelopmentAdd a Superfish Dropdown menu to wordpress

Add a Superfish Dropdown menu to wordpress

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

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! ;-)

function add_our_scripts() {

	if (!is_admin()) { // Add the scripts, but not to the wp-admin section.
	// Adjust the below path to where scripts dir is, if you must.
	$scriptdir = get_bloginfo('template_url')."/scripts/";

	// Remove the wordpresss inbuilt jQuery.
	wp_deregister_script('jquery');

	// Lets use the one from Google AJAX API instead.
	wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
	// Register the Superfish javascript file
	wp_register_script( 'superfish', $scriptdir.'sf/sf.js', false, '1.4.8');
	// Now the superfish CSS
	wp_register_style( 'superfish-css', $scriptdir.'sf/superfish.css', false, '1.4.8');

	//load the scripts and style.
	wp_enqueue_script('jquery');
	wp_enqueue_script('superfish');
	wp_enqueue_style('superfish-css');
	} // end the !is_admin function
} //end add_our_scripts function

//Add our function to the wp_head. You can also use wp_print_scripts.
add_action( 'wp_head', 'add_our_scripts',0);

Skip the below explanation.

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);

On dissection, our function add_our_scripts() reveals a number of wordpress functions. Particularly  wp_register_script() , wp_enqueue_script()wp_register_style() and wp_enqueue_style(). The scripts and styles are to be registered via wp_register_script/style, and then loaded with wp_enqueue_script/style.

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.

// Remove the wordpresss inbuilt jQuery.

wp_deregister_script('jquery');

// Lets use the one from Google AJAX API instead.
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
// Register the Superfish javascript file
wp_register_script( 'superfish', $scriptdir.'sf/sf.js', false, '1.4.8');

// Now the superfish CSS
wp_register_style( 'superfish-css', $scriptdir.'sf/superfish.css', false, '1.4.8');

wp_deregister_script() removes the inbuilt jquery with wordpress.

wp_register_script() and   wp_register_style() register the scripts and styles. If you are not sure of their syntax, Click the respective functions names above for reference.

Likewise, wp_enqueue_script() and  wp_enqueue_style() load the registered objects.  So, code would be

//load the registered scripts and style.
wp_enqueue_script('jquery');
wp_enqueue_script('superfish');
wp_enqueue_style('superfish-css');

This finishes our custom function add_our_scripts() . Now, this function needs to be initialized with wordpress. To do so, we can use  wp_head hook. wp_print_styles works too.

//Add our function to the wp_head.
add_action( 'wp_head', 'add_our_scripts',0);
//Remember, You may also use wp_print_scripts.

This loads the superfish for use. To make sure it’s loaded, we can do so with Firefox’s “Firebug->NET panel->JS’ or Chrome’s “Inspect Element->Scripts”.

Update : You need to initialize the Superfish menu before use. So, open your theme’s header.php and locate the wp_head() hook (or </head> if the former does not exist) and add the below code.

<script type="text/javascript">
// <![CDATA[
    jQuery(function(){
         // This initializes the Superfish menu.
         jQuery('ul.sf-menu').superfish();
     });
// ]]>
</script>
<? php wp_head(); ?>
</head>

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’.

So open header.php and proceed to change the wp_nav_menu() arguments.

<div id="navigation">
<?php
     wp_nav_menu( array(
		'theme_location' => 'main-menu', // Setting up the location for the main-menu, Main Navigation.
		'menu_class' => 'sf-menu', //Adding the class for dropdowns
		'container_id' => 'navwrap', //Add CSS ID to the containter that wraps the menu.
		'fallback_cb' => 'wp_page_menu', //if wp_nav_menu is unavailable, WordPress displays wp_page_menu function, which displays the pages of your blog.
		)
	);
?>
</div>

Now reload the page and take a look. Superfish menu appears with it’s default style.


Styling Superfish

Dropdown menu is quite not what we were expecting.  Let’s style the things up a bit.

superfish_default_style

Superfish shows up with default style.

Browse to the superfish directory. We are going to play with the main style file, superfish.css. Always backup the file before editing.

As you can see, styles are neatly divided into 4 major sections using comments.

  1. /*** Essential Styles ***/
  2. /*** Demo Skin ***/
  3. /*** arrows ***/
  4. /*** Shadows for all but IE6 ***/

Leaving the rest for now, we are toying only with the /** Demo Skin ***/.

Comment out or carefully delete the Demo skin section. Now reload the browser and take a look. Yes! Dropdown menu is working. but oops! it looks like a skeleton.

Superfish dropdown with no style

Superfish menu with no background/border styles.

After applying a some basic styles (CSS – background, border properties) as in below code, Now the menu appears as in below picture.

/* The container wrapping .sf-menu */
#navwrap {
	float:				left;
	width:				100%;
	background: 		#600;
	font: 				1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;

}
.sf-menu {
	float:				left;
	width:				100%;
}
.sf-menu li {
	background:			transparent;
}
.sf-menu a {
	color:				#eee;
	padding:			9px 15px;
	text-decoration:	none;
}
.sf-menu ul li a {
	color:				#eee;
	padding:			9px 15px;
	text-decoration:	none;
	border:				1px solid #777;
}
.sf-menu li li {
	background:			#444;
}
.sf-menu li li li {
	background:			#444;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:			#900;
	outline:			0;
}

Superfish with some basic style

Superfish menu, after applying basic CSS properties

As you can see, the arrows and shadows are missing! . Trust me. Fixing this is a piece of cake!

Scroll to the bottom of superfish.css and find the element styles for .sf-sub-indicator and .sf-shadow . Now look under it’s properties for the background. Change the paths like this.

.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}

.sf-shadow ul {
	background:	url('images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}

So the entire superfish.css and the preview of the menu!

Superfish - The Ultimate dropdown menu

Final Superfish menu with Shadows,arrows and some CSS3

Entire content of superfish.css.

/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin:			0;
	padding:		0;
	list-style:		none;
}
.sf-menu {
	line-height:	1.0;
}
.sf-menu ul {
	position:		absolute;
	top:			-999em;
	width:			10em; /* left offset of submenus need to match (see below) */
}
.sf-menu ul li {
	width:			100%;
}
.sf-menu li:hover {
	visibility:		inherit; /* fixes IE7 'sticky bug' */
}
.sf-menu li {
	float:			left;
	position:		relative;
}
.sf-menu a {
	display:		block;
	position:		relative;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	left:			0;
	top:			2.5em; /* match top ul list item height */
	z-index:		99;
}
ul.sf-menu li:hover li ul,
ul.sf-menu li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li:hover ul,
ul.sf-menu li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}
ul.sf-menu li li:hover li ul,
ul.sf-menu li li.sfHover li ul {
	top:			-999em;
}
ul.sf-menu li li li:hover ul,
ul.sf-menu li li li.sfHover ul {
	left:			10em; /* match ul width */
	top:			0;
}

/*** Custom Styles ***/

/* The container wrapping .sf-menu */
#navwrap {
	float:				left;
	width:				100%;
	background: 		#600;
	background: 		-moz-linear-gradient( top, #600, #300); /* CSS 3 */
	background:			-webkit-gradient(linear, left top, left bottom, from(#600), to(#300));
	font: 				1.0em "Segoe UI", "Lucida Grande", Verdana, Arial, sans-serif;
	border-top:			1px solid #999;
	border-bottom:		1px solid #000;
}
.sf-menu {
	float:				left;
	width:				100%;
}
.sf-menu li {
	background:			transparent;
}
.sf-menu a {
	color:				#eee;
	padding:			9px 15px;
	text-decoration:	none;
	border-bottom:		1px solid #000;
	border-left:		1px solid #333;
}
.sf-menu ul li a {
	color:				#eee;
	padding:			9px 15px;
	text-decoration:	none;
	border-bottom:		1px solid #000;
	border-top:			1px solid #777;
	border-left:		1px solid #333;
	border-bottom:		1px solid #111;
}
.sf-menu li li {
	background:			#444;
}
.sf-menu li li li {
	background:			#444;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
	background:			#900;
	background:			-moz-linear-gradient(top, #200, #600);
	background:			-webkit-gradient( linear, left top, left bottom, from(#200), to(#600));
	outline:			0;
}

/*** arrows **/
.sf-menu a.sf-with-ul {
	padding-right: 	2.25em;
	min-width:		1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
	position:		absolute;
	display:		block;
	right:			.75em;
	top:			1.05em; /* IE6 only */
	width:			10px;
	height:			10px;
	text-indent: 	-999em;
	overflow:		hidden;
	background:		url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
	top:			.8em;
	background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
	background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
	background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/*** shadows for all but IE6 ***/
.sf-shadow ul {
	background:	url('images/shadow.png') no-repeat bottom right;
	padding: 0 8px 9px 0;
	-moz-border-radius-bottomleft: 17px;
	-moz-border-radius-topright: 17px;
	-webkit-border-top-right-radius: 17px;
	-webkit-border-bottom-left-radius: 17px;
}
.sf-shadow ul.sf-shadow-off {
	background: transparent;
}

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.

Download : Minified Superfish JS and Plugins.

Feel free to check out finished theme with Integrated superfish dropdowns

Download : Axtra with Superfish


If something is not working, then?

  • Double check the name of the files and folders you created. Case-sensitivity may be the issue. When you use multiple OS, there is a definite possibility.
  • Check the Paths. If you use variables for echoing paths, then double check the variables. Firebug’s Net panel, Chrome’s “Inspect Element” can be very helpful for these purposes.
  • Check the opening and closing quotes/tags/braces.
  • Check the file is saved under the right name/attributes.

Related posts

WordPress Dropdown menu with wp_nav_menu and Little CSS.

Comments/Questions are welcome. :-)

Kavin.

  • http://halooglasi.com vector

    thanks for the help… :-)

    • http://kav.in kavin

      @vector, You’re always welcome. :)

  • Pingback: wp-popular.com » Blog Archive » Add an awesome dropdown menu to wordpress with Superfish | Capability

  • http://cristimirt.ro DrCriss

    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…

      jQuery(document).ready(function() {
           jQuery('#access').superfish();
      });
      

      If its still not working, try it through firebug or chrome inspector. That will make sure the superfish is included.

      //  IN firebug or any console.
      //  If you get "Superfish is not a function", 
      //  then superfish is not properly included. 
      jQuery('#access').superfish();
      

      It should work 100% on a local server. Please let me know your progress. :)

      • http://www.fridaymedia.nl Rob

        Hi Kavin,

        Thanks for your quick reply.
        I’m not sure if I get exactly how to initialise Superfish. Should I put the code below in the header?


        jQuery(document).ready(function() {
        jQuery('#access').superfish();
        });

        I did it, but it still doesn’t work.
        How can I try it through Firebug? I normally only use the html and css tabs in firebug.
        When I check the “Console” tab I get this feedback:


        jQuery is not defined
        bigmove()
        jQuery(document).ready(function() {

        Where “BigMove” is the title of the page. Could this be the problem?

        • http://kav.in kavin

          That answers our question. “jQuery is not defined.” – jQuery is not included. Here is an example to do so properly.

          In theme’s functions.php.

          add_action('init', 'add_scripts_styles');
          
          function add_scripts_styles() {
          	// Let's assume we have the superfish files
          	// in path/to/theme_directory/js/superfish/
          	$sf_folder = get_bloginfo('template_url') . '/js/superfish/';
          		
          	if ( ! is_admin() ) {
          		// Include jQuery first.
          		wp_enqueue_script( 'jquery' );
          		// Now the superfish.js script.
          		wp_enqueue_script( 'superfish', $sf_folder . 'superfish.js' );
          		// Now the superfish stylesheet.
          		wp_enqueue_style( 'superfish', $sf_folder . 'superfish.css' );
          	} //  END if ( !is_admin() )
          	
          } // END function add_scripts and styles.
          

          This goes on header.php, where you want the dropdown menu.

          <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>
          

          And this goes on header.php, above </head> tag.

          jQuery(document).ready(function() {
                // sf-menu ul we defined in previous step.
                 jQuery('ul.sf-menu').superfish();
          }); // END document ready.
          

          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:

    Screenshot

    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:

    Fourth

    Links

    So it’s doing something. Just doesn’t show up.

    Any idea what the issue here is? I’m working in wordpress 3.1.3

  • Vern

    So I can get it to show up if I use

    ?php wp_list_pages(‘sort_column=menu_order&title_li=’); ?

    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!

    • http://kav.in kavin

      You’re welcome.

  • Pingback: Creating An Awesome Dropdown Menu for WordPress 3 Custom Menus | whatanicepost

  • http://seokamrul.com/ Kamrul Hasan

    Wonderfully explained. Thank you so very much.

  • Pingback: How to center a superfish menu in wordpress (in IE7) | SeekPHP.com

  • Andreasdlf

    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,,

      add_action( ‘init’, ‘add_our_scripts’ ); // replace add_action( ‘wp_head’

      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.

  • Pingback: wordpress superfish dropdown menu | web technical support

  • Dan

    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.

  • http://www.camperauctions.co.uk/ CamperAuctions

    Hi, great article thanks.
     
    What dictates the width of the drop downs? I am having a problem making these wide enough on my website http://www.camperauctions.co.uk

    • kavin

       @CamperAuctions Check out line number 013   in the final code snippet ( One labeled Entire contents of superfish.css ). It’s 10em ( 140px if base font size is 14px ). Change it to your preference.

      • CamperAuctions

         Many thanks, this looks great

  • Thebil

    Hi, I am trying to get this working but I am hitting a error. At the first stage (functions.php)

    Parse error: syntax error, unexpected T_STRING in F:xampphtdocswordpresswp-contentthemesCash2SwitchThemefunctions.php on line 5

    Line 5 is 
        if (!is_admin()) { // Add the scripts, but not to the wp-admin section.

    Please can you help me identify the problem. Thanks

    • Kavin Gray

      Please make sure the snippet is within php tags. Also check if the quotes are properly closed. :)

      • Thebil

        Hi, Thanks for your reply. I have already made sure its is between and quotes. I still cant get passed that error. :(

        • Thebil

          between php tags* and

        • Thebil

          Thanks. 
          http://pastebin.com/1XyZramM 

          I have tried using _( ) around menu aswell no luck

        • Kavin Gray

          Please post the entire contents of functions.php  on pastebin or pastie and link here. Let us check that.

        • Thebil

          Thanks. 
          http://pastebin.com/1XyZramM 

          I have tried using _( ) around menu aswell no luck

        • Thebil

          I still haven’t been able to sort it, could you help?

        • Thebil

          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

  • Fandi Akhmad

    Hy Kavin, thanks for your tuts, you solve my problem  :D

  • Mimetismo Web

    That’s amazing!  You’re the man!  Thanks a lot!
    []s

  • http://www.mimetismo.com.br/ Mimetismo Agência Web

    That’s amazing!  You’re the man!  Thanks a lot!
    []s

  • Kennyvonbulow

    http://pastebin.com/xCvNuxXY
    http://pastebin.com/exTpp8rD

    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:(

  • Trabukodelrey

    mine worked but I loaded the superfish.js from the header.php. http://idd7d.net84.net.

  • Alex

    Hi. What`s the best way to add two menus with different styles?

  • Kirsty Harris1985

    Ive done all this and it doesnt seem to work at all!

    Can you help?

  • Gojak

    Does this works only in Firefox? Script doesn’t load in Chrome and IE .

  • Abbe

    How to make it that drop down appear on click rather than hover?

  • Jack

    Great article. The menu works great! Is there a way to create a vertical menu? I’ve tried different substitutions using superfish-vertical.css but the menu always stays horizontal. Thanks in advance!

  • http://www.facebook.com/RevChuckSmith Chuck Smith

    Very nice tutorial but it appears that I am frustrated and stuck… any chance you can look at it?

    http://pvumc.net.onlinestructural.com

    • http://www.gojak.in.rs/ Gojak

      Chuck, as far as I can see your menu doesn’t call superfish css, so try to add it to your style.css file.
      If you are still confused visit this article and follow instructions. http://www.gojak.in.rs/add-superfish-to-wordpress-theme/

      There you can find detailed css with explanations
      Cheers!

  • Arpita

    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