All About Blog Design, Short Reviews, Tips and Make Money Online

How to Integrate Nivo Slider into WordPress

Posted: 18 Nov 2010 10:39 AM PST

Integrate Nivo Slider with WordPress

I am sure many of you have already heard or read about the sleek NIVO Image Slider built using jQuery and HTML. If you haven’t, you can go to the website and check it out for yourself. The slider allows you to display images and HTML text via 9 unique transition effects.

This slider serves as a static slider using only CSS/HTML and jQuery. Today, I am going to show you how you can integrate this nifty looking slider component into your WordPress theme effectively (a much easier way than what you have already known). Read on!

1. First Steps First

Download the NIVO slider files to your desktop and extract them to a folder. Copy the files called arrows.png, bullets.png and loading.gif from the nivo-slider/demo/images folder and paste them into your WordPress Theme /Images folder.

Now in your WordPress theme, decide an appropriate place where you want the slider to show up. For this particular example, I will be using the WordPress theme – “Twenty Ten (2010)” that comes with a default installation of WordPress (3.0+).

I want my slider to show up on the main page, so I will open up the index.php file for editing.

2. A Custom LOOP for the Slider Posts

To bring WordPress content into the slider, we will be defining a custom query loop into the index.php file. This loop will pull up posts from a particular category and display them into the slider. To do this, in the index.php file, after the following line :-

 <div id="content" role="main">

Paste the following piece of code :-

 <div id="slider">  <?php $my_query = new WP_Query('showposts=5&category_name=featured'); while ($my_query->have_posts()) : $my_query->the_post(); ?>  <a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">  <img src="<?php echo get_post_meta($post->ID, 'nivoimage', true); ?>" alt="" title="<?php the_title(); ?>" />  </a>  <?php endwhile; ?> </div> <br clear="all" />

The above code will pull 5 posts (showposts=5) from the category called “featured” (category_name=featured) from your WordPress blog. So make sure that you have a category by that name or change the name accordingly in the above code.

For the images to show up, you will have to use custom fields. To do that, while creating the post/s in the aforementioned category, just upload an image and copy its upload path. After that, create a new custom field called “nivoimage” (without quotes) and paste the copied path of the image into its value. Read more about the Usage of Custom Fields if you are not so sure about them.

3. The jQuery Magic

Now open up the extracted NIVO slider folder on your desktop, copy the file called jquery.nivo.slider.pack.js and paste it into your WordPress theme folder. After doing this, open up the footer.php file of your theme and just above the ending </body> tag, paste the following lines :-

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="<?php bloginfo('template_directory'); ?>/jquery.nivo.slider.js" type="text/javascript"></script>  <script type="text/javascript">  $(window).load(function() {  $('#slider').nivoSlider();  });  </script>

The above code will include the jQuery library and the NIVO script that you had put in your theme folder to your applied WordPress theme.

4. The CSS

The last step is to include the NIVO slider’s CSS code into your theme stylesheet. So, open up the file called style.css from your theme folder and paste the following code at the end of file :-

 /* The Nivo Slider styles */ .nivoSlider {position:relative;} .nivoSlider img {position:absolute;top:0px;left:0px;} .nivoSlider a.nivo-imageLink {position:absolute;top:0px;left:0px;width:100%;height:100%;border:0;padding:0;margin:0;z-index:60;display:none;} .nivo-slice {display:block;position:absolute;z-index:50;height:100%;} .nivo-caption {position:absolute;left:0px;bottom:0px;background:#000;color:#fff;opacity:0.8;/* Overridden by captionOpacity setting */ width:100%;z-index:89;} .nivo-caption p {padding:5px;margin:0;} .nivo-caption a {display:inline !important;} .nivo-html-caption {display:none;} .nivo-directionNav a {position:absolute;top:45%;z-index:99;cursor:pointer;} .nivo-prevNav {left:0px;} .nivo-nextNav {right:0px;} .nivo-controlNav a {position:relative;z-index:99;cursor:pointer;} .nivo-controlNav a.active {font-weight:bold;} /*============================*/ /*=== Custom Slider Styles ===*/ /*============================*/ #slider {position:relative;width:618px;height:246px;background:url(images/loading.gif) no-repeat 50% 50%;} #slider img {position:absolute;top:0px;left:0px;display:none;} #slider a {border:0;display:block;} .nivo-controlNav {position:absolute;left:260px;bottom:-42px;} .nivo-controlNav a {display:block;width:22px;height:22px;background:url(images/bullets.png) no-repeat;text-indent:-9999px;border:0;margin-right:3px;float:left;} .nivo-controlNav a.active {background-position:0 -22px;} .nivo-directionNav a {display:block;width:30px;height:30px;background:url(images/arrows.png) no-repeat;text-indent:-9999px;border:0;} a.nivo-nextNav {background-position:-30px 0;right:15px;} a.nivo-prevNav {left:15px;} .nivo-caption {text-shadow:none;font-family: Helvetica, Arial, sans-serif;font-size:14px;} .nivo-caption a {color:#efe9d1;text-decoration:underline;}

Concluding Instructions

If you have followed the above steps carefully, your NIVO slider should start working flawlessly. Some points to note if things aren’t working the way they should :-

Make sure you have a category by the name “featured” or anything else if you changed the code in the custom loop (Step 2)
Check that you have only one Unique Identifier called #slider in your CSS file. Also see to it that none of the CSS classes overlap with any of your existing styles.
When uploading images to your posts, make sure that they are of same dimensions so that there is no inconsistency during transitions (or, if you are experienced enough, try and integrate some automatic image resizer script into this on your own)

If you liked this tutorial, please don’t forget to leave a comment. I will appreciate that!