Show me the menu! (or How to put a vertical Superfish menu in WordPress)

edited on 28 December 2012: I have been having the worst trouble getting Superfish to work in WordPress so came back to this. There is one major edit, you need to change the wp_nav_menu parameter ‘theme_location’ to ‘menu’ – I’m now using WordPress 3.5, so this might have to do with one of the recent upgrades. Please note, that you don’t have to use the vertical menu, just take out sf-vertical in the wp_nav_menu menu_class bit.

=====

Doesn’t everyone want a vertical slidey (according to my spellchecker, “slidey” is not a word. Really? Weird.) menu?  No?  Ok then, stop here.

If you do want a slidey (I’m just going to keep using the word, that’ll teach ’em) menu and have figured out that the one you want is J Birch’s excellent jQuery plugin Superfish (it is the one you want btw) and have read Kavin’s excellent tutorial but still need a bit of help and want it vertical, then here you go.

Oh damn, I meant to add in that thing that makes code show up properly.  Hang on.  Ah – the Syntax Highlighter plugin by Alex Gorbatchev should work.  It does!  Excellent.

Here are the steps you want to take, in plain-ish English:

  1. Download the Superfish plugin.
  2. Upload the plugin to your template directory (it needs to be unzipped either before or after upload obvs) – I renamed the folder “Superfish-1.4.8” to “superfish”.
  3. In your wp_nav_menu bit (in header.php or wherever), use ‘menu_class’ => ‘sf-menu sf-vertical’ eg:
    wp_nav_menu( array( ‘sort_column’ => ‘menu_order’, ‘menu_class’ => ‘sf-menu sf-vertical’, ‘theme_location’ => ‘primary-menu’ ) );  — this is what needed to be edited. Change ‘theme_location’ to ‘menu’ to get the right menu. Below is correct sample code.

    wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'sf-menu sf-vertical', 'menu' => 'primary-menu' ) ); 

    I’m using a custom nav menu, ‘primary-menu’ – don’t just copy and paste the above.

  4. Make a file with the following – mine is named jqsf.js (taken from this support thread) – and upload to your superfish (or whatever you’ve named it)/js directory
    $(document).ready(function(){
    $("ul.sf-menu").superfish({
    animation: {height:'show'},   // slide-down effect without fade-in
    delay:     1200               // 1.2 second delay on mouseout
    });
    });

    This initialises Superfish and is where you can change the animation options and various bits and bobs.  It’s good fun to play with these.

  5. In your template’s style.css file, disable / delete any and all styles relating to the navigation lists – you can add them back later when it’s working.  (Setting a width on the ul caused mine to break which is easy enough to fix but took a while to figure out.)
  6. Add the following to your functions.php file – this assumes you’ve named the directories and files the same as I did.  This is, in large part, taken from Kavin’s tutorial mentioned above. He goes through it more thoroughly, so have a look there if you have questions.
    //jQuery Insert From Google - via http://digwp.com/2009/06/use-google-hosted-javascript-libraries-still-the-right-way/
    if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
    function my_jquery_enqueue() {
    $scriptdir=get_bloginfo( 'template_url' );
    wp_deregister_script('jquery');
    wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);// Register the Superfish javascript file
    wp_register_script( 'superfish', $scriptdir.'/superfish/js/superfish.js', false, '1.4.8');// Register the file you made that initialises Superfish
    wp_register_script( 'jqsf', $scriptdir.'/superfish/js/jqsf.js', false);// Now the superfish CSS - you need superfish.css AND superfish-vertical for the vertical menu
    wp_register_style( 'superfish-css', $scriptdir.'/superfish/css/superfish.css', false, '1.4.8');
    wp_register_style( 'superfish-vertical-css', $scriptdir.'/superfish/css/superfish-vertical.css', false);//Put all the scripts and styles in the header where they belong
    wp_enqueue_script('jquery');
    wp_enqueue_script('superfish');
    wp_enqueue_script('jqsf');wp_enqueue_style('superfish-css');
    wp_enqueue_style('superfish-vertical-css');
    }
    

And that’s it.  You should have a working vertical menu.  You’ll need to style it – just edit the superfish.css style.  It’s well annotated, so you shouldn’t have any trouble.  The site I used this on is not yet ready for public consumption, but I will update this post when it is.

1 comment

  1. Looks like this blog may be forgotten, but I just want to say thanks for this post. Helped me get suckerfish menus working in WordPress. There are many tutorials on doing this, but this one is one of the easiest to follow.

Leave a Reply

Your email address will not be published. Required fields are marked *