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.

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.

The code below adds:

• jQuery
• The Nivo Slider .js scripts
• Your custom Nivo Slider settings in a .js file
• Standard and custom Nivo Slider css files
• Post Thumbnail support for WP version 2.9 and higher

function theme_add_scripts() {
 wp_enqueue_script('jquery'); //omit if jQuery already included
 wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
 wp_enqueue_script('nivoslidersettings', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.settings.js');
 wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');
 wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
}
add_action('init', 'theme_add_scripts');

if ( function_exists( 'add_theme_support' ) ) { // Added in 2.9
 add_theme_support( 'post-thumbnails' );
 add_image_size('nivothumb', 85, 85, true);
 add_image_size('nivoslide', 450, 220, true);
}

Creating Nivo Slider’s HTML Markup

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:

<?php // This is the custom query for getting the nivo slide slides
 query_posts(array(
 'post_type'=>'post',
 //'category'=>'news',
 'showposts'=>5,
 ));
 ?>

 <?php if (have_posts()) : ?>
 <div id="slider">
 <?php while (have_posts()) : the_post(); ?>

 <?php if ( has_post_thumbnail() ) { ?>
 <?php
 $image_id = get_post_thumbnail_id();
 $imagethumb = wp_get_attachment_image_src($image_id,'nivothumb');
 $imagethumb_url = $imagethumb[0];
 $imageslide = wp_get_attachment_image_src($image_id,'nivoslide');
 $imageslide_url = $imageslide[0];
 ?>

 <a href="<?php the_permalink(); ?>">
 <img src="<?php echo $imageslide_url; ?>" width="" height="" rel="<?php echo $imagethumb_url; ?>" alt="<?php echo get_the_title(); ?>" title="<?php echo get_the_title(); ?><br /> <span><?php echo get_the_excerpt(); ?></span>" />
 </a>
 <?php } ?>

 <?php endwhile; ?>
 </div>
 <?php else : ?>
 <h2>Not Found</h2>
 <?php endif; ?> <!--End of the Nivo Slider-->

Now we have the code to produce the images and slider in the correct HTML markup you can play with the Nivo slider settings in the appropriate .js file.
You can change the settings as you like. For a full list of parameters go to the Nivo slider website.

Enabling Thumbnailed Navigation

This code has been setup for thumbnails.
See this article for a description of how to set thumbnailed navigation up.

All Done!

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.