Wordpress JQuery Slide Show | How To Add A Wordpress Jquery Slide Show | Wordpress JQuery Nivo Slider

So finally you reached here in search of adding a slide show in your wordpress site. Why to use flash if jquery can help you.

In this tutorial I am using the NIVO SLIDER.

So lets get started, just follow these simple steps:-

First mainly decide where you want to display this slide show in your blog or site? For this example we will use this slide show in the header, as an image banner.

So first you need to add some files in your theme, just that they don't get mixed up with your other files, we will create a folder in your theme directory, name it as slider, in that folder we will place some css files and images.(Download)
So after completion, your folder structure should be like the below image.

After this you need to add some js files in your folder js, if you don't have any folder named as js, then you can create one and place files into it.(Download)

The two js, files are:

• jquery.nivo.slider.pack.js


• jquery-1.6.1.min.js

Then you need to open your theme's header.php file, and paste the following code before wp_head();

[html]
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/slider/style5.css" type="text/css" media="screen" />

<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery('#slider').nivoSlider();
});
</script>
[/html]

In the above code we are just telling the wordpress theme to pick the necessary style sheets, js files and JQuery.

So here we complete major part of the tutorial, now finally we will just paste some html code to appropriate section in the site.

As in this tutorial I am making a header banner so I ll paste this code in header.php.

[html]
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider">
<img src="<?php bloginfo('template_directory'); ?>/images/header1.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header2.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header3.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header4.jpg" alt=""/>
<img src="<?php bloginfo('template_directory'); ?>/images/header5.jpg" alt=""/>
</div>
</div>
[/html]

Just in img src tag give your appropriate images location, in this tutorial I have kept the images into images folder of my wordpress theme directory.

You can paste the JQuery code in footer.php file just to avoid the conflict of javascripts.

In This tutorial I am using the header banner size, that is 995X288, so if your slider goes off screen, then you can customize our css files.
This Slider is IE7 compliant.