Setting Up the Nivo Slider in WordPress

Posted

April 9, 2010

Comments

201 Comments

Update: Check out the official Nivo Slider WordPress Plugin

Setting up the Nivo Slider in WordPress is a fairly similar process to setting it up on a normal HTML page. However to do it properly there are a few small differences and methods you should use that are WordPress specific.

Download and Setup

First off download the Nivo Slider and put it in your WordPress theme folder somewhere (for instance in “scripts/nivoslider”). You can put the CSS file in a separate folder if you wish but for simplicity I am just going to leave the contents of the download in the same folder. I’m also assuming here that you have your images in the “images” folder in your theme.

The HTML

Setting up the HTML for the slider is almost exactly the same as doing it in a normal HTML page. Something like the following:

<div id="slider">
	<img src="<?php bloginfo("template_url"); ?>/images/slide_1.jpg" alt="" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_2.jpg" alt="" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_3.jpg" alt="" title="This is an example of a caption" />
	<img src="<?php bloginfo("template_url"); ?>/images/slide_4.jpg" alt="" />
</div>

Note that images can have links and captions come from the images “title” attribute. We use the WordPress bloginfo() function to make sure we have the proper path to our images.

The PHP & Javascript

On to the fun part. Here is the code first for you “copy & pasters”.

<!-- Include jQuery -->
<?php wp_enqueue_script('jquery'); ?>
<?php wp_head(); ?>
<!-- Include the Nivo Slider CSS file -->
<link rel="stylesheet" href="<?php bloginfo("template_url"); ?>/scripts/nivoslider/nivo-slider.css" type="text/css" media="screen" />
<!-- Include the Nivo Slider JS file -->
<script src="<?php bloginfo("template_url"); ?>/scripts/nivoslider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<!-- Set up the Nivo Slider -->
<script type="text/javascript">
jQuery(window).load(function() {
	jQuery('#slider').nivoSlider();
});
</script>

First off we are going to include jQuery the right way by using the WordPress wp_enqueue_script() function. Note that this has to be done before the wp_head() function.

Next we include the Nivo Slider CSS and JS files using the bloginfo() function to ensure the correct paths are used. Remember to alter the paths if the folder structure is different in your theme.

Finally we set up the jQuery script to load the Nivo Slider. Note that we need to use “jQuery” rather than just “$” as jQuery is in “no-conflict” mode. Now you should have a lovely slider on your WordPress site.