How to use Nivo Slider as Image Slideshow in WordPress

On 3 Mar, 2012 By With 6 Comments

Image slideshow is one of the feature for every website, as a theme developer you should take advantage of this to make your theme stand out. There are countless of jquery slideshow libraries on the wild waiting for you to use it, one of my favorite is Nivo Slider by Dev7Studios.

Today we will create a image slideshow and we will put it into our theme template, we will also use post attachments. This way our users can upload images and publish it and it will automatically go on the slideshow.

Our Image Slideshow

footscrayarts.ptest .tv 2012 3 3 15 18 1 How to use Nivo Slider as Image Slideshow in Wordpress

I’ve learned this through troychaplin.ca, and for this tutorial we will use some of his code 🙂 You can also head out to his site to learn it.

First thing is to download the Nivo Slider, put it on your js folder inside your WordPress Theme. Now open your footer.php and paste this code below.

Now we will paste this code onto our functions.php

Now to call the image slideshow on our template, just paste this on your index.php or home.php (depending where you want it to be).

Couple of things that you can do is to customize image sizes to ‘large’, ‘medium’, and ‘thumb’. You can change that on the functions

and on the

Next is the css of the slideshow, paste this on your style.css.

Custom Image size

Here is the part where I needed a different size for the images, medium is too small for me, while large was way too big. This is where I found out Add Image Size, you can learn more about that here. Basically the size I am after is 490px 275px, since I am already using

on my theme thumbnail, I want to add more sizes. I did add this on my functions.php (make sure to check your functions.php before pasting this)

home-slideshow is what we will use on the slideshow, so I will just change the ‘large’ on functions.php and we have this

on our page.
Couple of notes, your CSS may vary on the theme that you are using, try to play with the functionality of Nivo slider on your footer. Try changing them to true / false until you’re satisfied with the result.
footscrayarts.ptest .tv 2012 3 3 15 18 1 How to use Nivo Slider as Image Slideshow in Wordpress

Usage

If you paste it on your single.php you can try and create a post and add image on media, click save all changes and hit publish. You can check the page after that.

If you put it on index.php, the process is the same, just upload images on the homepage and you’re good to go. 🙂

I hope you learned something new today, as I have. Keep on reading about this topic and try different jquery slideshow so you can learn new trick. If there’s really cool slideshow that you know, and we can use put it in the comments below!

6 Responses to “How to use Nivo Slider as Image Slideshow in WordPress”