Getting jQuery Nivo Slider To Work Inside Your WordPress Theme

Adding Nivo slider to a WordPress theme is a lot easier than adding any other slider I have worked with. It may seem as if there are a lot of steps to it, but it’s fairly easy to follow. Let’s get straight into it.

Yvonne Strahovski & Zachary Levi. Picture © NBC Studios. No infringement intended, used for illustrative purposes only.

Downloading Nivo Slider

Obviously the first thing you need to do is download Nivo Slider. Just click the download button, production is the best option, then a little above that there is a header that says “Style Your Slider Like The One On This Site”. For ease of use we are going to use the style pack provided so click the button to download that & extract both into a folder called ‘js’ inside your theme’s folder.

Installing Nivo Slider

I use the term installing loosely as we are really just including the scripts. A lot of users tend to just hard code script tags into the page & while you can do that, I don’t recommend it. Before we get into any of that though we need to check to your theme to see if it already includes jQuery or not. If you are developing from scratch it probably won’t, if you are adding Nivo to an existing theme open up your front page & check your source code for a script tag including jQuery.

Now that we have determined whether or not you have jQuery included or not you can alter the code as needed. I’ll add a comment next to the line to remove if it is already included.

You will need to add this to your themes functions.php. If your theme doesn’t have one you will need to create it. All we are doing is using a built in WordPress function called wp_enqueue_script() to add the scripts. A very important note is that you need wp_head() to be present in your theme or this will not work.

The parameters for wp_enqueue_script() are simple. The name you want to give to the script, it’s path, it’s dependencies if any, and it’s version number.

Next we need to include the stylesheets needed to style the Nivo slider. We are going to do that in a similar manor except using wp_enqueue_style().

As you can see they are very, very similar. It would probably be best to change the function names to something prefixed with an acronym of your theme’s name. This helps stop conflicts. Just remember to change any reference to the function names. So if your theme is called ‘My Super Awesome Theme’ you could use ‘MSAT’, so theme_add_styles() might become msat_add_styles(). Simplez.

Creating Nivo Slider’s HTML Markup

Now we have included the scripts & stylesheets needed we can finally get this thing working. The HTML markup if fairly simple, but because we are in WordPress it has to be generated by WordPress. That makes it slightly difficult & while I have played around with a few different methods, I am going to show you the one which seems to use the least resources and makes it the easiest for the user.

The method involves creating a category called ‘featured’, but could be named anything you wish, and then using the post thumbnails system to create thumbnails to fit the size you want Nivo slider to be. To do that you will need to enable custom thumbnails in your functions.php file by using the following code:

Please remember you may need to change the width (960) and height (320). These are just the sizes I used when testing. Now when creating a post you will notice that you have a new box on the right hand side under ‘Post Tags’. Just upload the image you want to use on the slider & press the ‘use as featured image’ link. Oh and remember to tick the ‘featured’ category or it won’t show up on the slider. Now all you need to do is create the loop in your index page.

So open up index.php, if that’s where you want the slider, find the location you have chosen for your slider and drop in this code:

Now we have the code to produce the images in the correct HTML markup we need to initialize Nivo slider.

Initializing Nivo Slider

Okay, we are on the final straight now. Let’s get the slider working. All you need to do is either create a .js file and put the following code in & then add a wp_enqueue_script() to the function we created before, or you can just paste it in the head under wp_head() inside script tags. It is your choice.

You can change the settings as you like. For a full list of parameters go to the Nivo slider website.

All Done!

That’s it. Hopefully if you load up your home page you will have a fully working Nivo Slider. There are a lot of steps granted, but it’s easy once you get into the swing of it.

Oh, you may be wondering why I’ve used jQuery instead of the $ well that’s because if you load jQuery using the enqueue script method it is loaded in no conflict mode by WordPress so the dollar sign reference doesn’t exist.

As always if you have any questions about the implementation of Nivo Slider I have given here, feel free to ask. If you have any questions about the Nivo slider script then I probably can’t answer them as I did not write it. You should instead direct those questions to Dev7Studios, who created the Nivo slider script.

FeaturedjQueryNivo SliderThemeWordpress