WordPress Themes Blog Oh! Blog

Share on Facebook1Tweet about this on Twitter26Share on Google+4Pin on Pinterest0Share on LinkedIn0

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 :-

[html]
<div id="content" role="main">
[/html]

Paste the following piece of code :-

[php]
<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" />
[/php]

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 :-

[html]
<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>
[/html]

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 :-

[css]
/* 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;}
[/css]

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!

Share on Facebook1Tweet about this on Twitter26Share on Google+4Pin on Pinterest0Share on LinkedIn0
  1. Marmaris Excursions left a comment on March 4, 2015 at 4:47 am |

    Why it is so difficult ? Is there any easy way to use nivo slider in post ? or custom page ?

  2. Besem Travel left a comment on January 21, 2015 at 6:18 am |

    good artcile and more here …

  3. Kitty left a comment on August 16, 2014 at 10:24 pm |

    Ask the roofing school bus contractors who took over from his house.
    When you’re ready, able, and finding the best project management software
    must be sold to Pakistan if Mr.

    my web page :: homepage (Kitty)

  4. shannon left a comment on September 26, 2013 at 3:56 am |

    very, very neat!!! great function

  5. web development resources left a comment on June 10, 2013 at 4:18 pm |

    Thank you very much. I am creating a wordpress theme for my client. I will add this nivo slider into the theme.

  6. useful Source left a comment on May 3, 2013 at 3:42 am |

    Thanks to my father who told me about this webpage, this webpage is
    genuinely remarkable.

  7. Telecharger left a comment on April 29, 2013 at 10:24 pm |

    i want to do it through a plugin from the admin

  8. guide left a comment on March 30, 2013 at 5:29 pm |
  9. Hostgator Discount Coupon Codes left a comment on January 23, 2013 at 12:17 am |

    Nice site i like it, check this one for getting hosgator discount coupon codes.

  10. The Great American Fruit Tree Campaign left a comment on January 22, 2013 at 4:34 pm |

    I’m a bit new to web design, so I’m a little slow on the pickup. I am looking for a nicer slider than the one that I have, but one that will pick up the latest post from each of my 6 categories. Does this one do that?

  11. proxy left a comment on January 21, 2013 at 12:09 pm |

    “Magnificent goods from you, man. I have understand your stuff previous to and you are just extremely excellent. I actually like what you have acquired here, certainly like what you’re saying and the way in which you say it. You make it entertaining and you still care for to keep it sensible. I cant wait to read far more from you. This is really a tremendous web site.”

  12. proxy left a comment on January 21, 2013 at 12:08 pm |

    “Im incompetent at view this web site properly on opera I am there is a problem”

  13. futera? do gitary basowej left a comment on January 18, 2013 at 5:39 am |

    “Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is excellent, as well as the content!. Thanks For Your article about Quen Somos ? | grupo de consumo responsable .”

  14. Squishface left a comment on December 16, 2012 at 5:32 pm |

    This broke my site. The code doesn’t work if you follow the instructions. It prevents the page from loading.

    I would consider this code malicious until it is fixed.

  15. henk left a comment on December 8, 2012 at 9:16 am |

    Your code is bad and you should feel bad.

    Use another tut rather, this one throws up an unexpected error on step 1. Fuck doing tutorials where you first have to clean up their code.

  16. ali left a comment on December 1, 2012 at 2:31 am |

    fuck your codes

  17. neosplash left a comment on November 30, 2012 at 5:34 am |

    Parse error: syntax error, unexpected ‘=’ in line 3 of the code placed in index.php. Using Twenty Twelve theme. Any help?

  18. jgbNeatDesign left a comment on November 29, 2012 at 10:15 pm |

    Hello There ! I really like your tutorial. It is nice and easy to read and understand. I just went to read a similar on another site. almost the same magic. I appreciate your help. Really thank you ! visit my website at http://tikwenpam.com , I’m using the graphene theme as a framework and it has a native slider that work really good. See yOu !

  19. jgbNeatDesign left a comment on November 29, 2012 at 10:14 pm |

    Hello There ! I really your tutorial. It is nice and easy to read and understand. I just went to read a similar on another site. almost the same magic. I appreciate your help. Really thank you ! visit my website at http://tikwenpam.com , I’m using the graphene theme as a framework and it has a native slider that work really good. See yOu !

  20. melvin left a comment on November 23, 2012 at 11:00 pm |

    Thanks a lot for this tutorial, I am wordpress newbie trying to create my own theme. this was easy helpful

    thanks

  21. eric left a comment on October 11, 2012 at 1:37 am |

    Thank for this tut. This might help me in building my own theme with custom post type and using nivo to display featured items. Anyone who have successfully integrate the nivo slider please share your site. ty

  22. Tony left a comment on September 11, 2012 at 8:26 pm |

    The php will crash the page. Fix it by replacing the open and close quotes with single quotes around | showposts=5&category_name=featured | and | nivoimage like this ‘nivoimage’

  23. Abhishek left a comment on August 11, 2012 at 4:10 pm |

    Thanks for the tut. Though I am a bit reluctant to edit the files myself. Is there any plugin available for it?

  24. Best Magazine Wordpress Themes left a comment on August 6, 2012 at 7:44 am |

    Great tutorial . Thanks Jai

  25. muzammil left a comment on August 4, 2012 at 2:40 am |

    Its working but how could we control the speed and number images in this slider

  26. Phil left a comment on July 31, 2012 at 11:29 am |

    Meant to say

    On 3.4.1 when opening up the index.php it gets lost from there. ie
    div id=”content” role=”main” isn’t there.

  27. Phil left a comment on July 31, 2012 at 11:24 am |

    On 3.4.1 when opening up the index.php it gets lost from there. ie
    isn’t there.

  28. Amin left a comment on July 29, 2012 at 4:20 pm |

    thank you! helped a lot!
    Regards!

  29. Ahmed left a comment on July 22, 2012 at 8:59 pm |

    Sir, how to show 5 random posts instead of category “featured”? :)

  30. graham left a comment on June 17, 2012 at 11:34 am |

    cheers for tute m8 a much needed insight into installing the nivo slider as been struggling a little bit to place it on my web design. its working now :).thanks

  31. Tim left a comment on June 13, 2012 at 12:33 pm |

    Hi Jai!

    Thanks for posting the tutorial. This really helped me a lot understand how to incorporate a JQuery slider into my site. However, I did run into a problem. I followed the tutorial down to every detail but my image content is not showing up – only the loading icon. I haven’t been exposed to Custom Fields before reading through this tutorial – did a ton of research about them but can’t seem to understand how to use them properly in this tutorial. I think this is the only problem I am having from getting it to work. I tried doing 1 post with 3 custom fields, and also 3 different posts each with its own unique custom field – both don’t appear to work. I used category ‘featured’ for the post and custom field name ‘nivoimage’ as well.

    If you could do a walk through of that step, I would really appreciate it!

  32. Stef left a comment on May 14, 2012 at 6:02 pm |

    Am I the only one that gets an error when adding the PHP? I mean I see no one else complaining. Is it just me?

    • Luis Angel left a comment on May 17, 2012 at 10:41 am |

      Stef, I have the same problem. Review the code because when I paste it the ‘ character was ´.It would be ‘template_directory’ and no ´template_directory´. It also occurs in the script code.

  33. Wordpress help left a comment on May 2, 2012 at 3:35 pm |

    Nivo slider is not so good slider for me :(

  34. Gopal Aggarwal left a comment on April 28, 2012 at 12:59 am |

    Thanks a lot! Have been trying to integrate a slider into WordPress. Though it is not yet complete, but with your tutorial (especially putting the code in footer), I’ve made some progress.

    Will do some attempts and get it to work.

    Thanks again.

    Warm regards
    Gopal

  35. Allen left a comment on April 13, 2012 at 4:47 am |

    you are great, thanks for sharing this to all of us, but i use jsp, do you have the tutorial applied in jsp web page? that would be more appreciated.

  36. Artful Dodger left a comment on March 25, 2012 at 1:49 am |

    Wouldn’t it be easier to grab the featured image of the post and stick it in there?

  37. s left a comment on March 23, 2012 at 11:57 pm |

    i want to do it through a plugin from the admin

  38. Load Pull left a comment on March 6, 2012 at 3:13 am |

    This is such an important topic, thank you so much for sharing.

  39. britain left a comment on February 27, 2012 at 12:33 pm |

    Hello,
    with this tutorial, we can add the slider with thumbnails on the demo as 4? Thank you
    http://nivo.dev7studios.com/demos/4/
    thank you

  40. Adhitya Fernando left a comment on February 6, 2012 at 9:14 am |

    great post, jai.
    How to use nivo slider in a page?
    I want to display an image slider on my page.
    I’m using empire elegant themes 1.3 on my web, http://www.adhityafernando.com. Shortcode to insert nivo slider image already included in that theme. i have tried to insert the code and choose the category for the image. The image succesfully displayed, but just single image without slider. The slider won’t wor
    Please help me jai.
    I’m stuck with this problem.
    Thanks for your kindness.

  41. Yogesh left a comment on February 1, 2012 at 5:16 am |

    Hi really great tutorial. I am currently working on a website based on a WordPress theme. Theme has a built in Nivo slider feature. Posts are displayed as slides. But in my design i want to change the bullets design below the slider. I wanted some text related to a slider image instead of bullet for that image. So that when user click on that text then the image related to that slide should be shown. Basically list of text instead of bullets below the slider. Your help will be greatly appreciated.

  42. Brandon left a comment on January 25, 2012 at 5:16 pm |

    Great tutorial. Just wanted to give people an easier way to retrieve the post featured image without adding custom fields.

    Use:
    <img src="ID) ); ?>

    Instead of:
    <img src="ID, ‘nivoimage’, true); ?>

    • Brandon left a comment on January 25, 2012 at 5:20 pm |

      Oops. Let me try removing some tags to get this to display properly. Don’t forget to add the quotes and proper tags back to get this working correctly.

      Use:
      img src=?php echo wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); ?>

      Instead of:
      ID, ‘nivoimage’, true); ?>

  43. vaibhav left a comment on January 22, 2012 at 8:24 am |

    Nivo slider is working well. al the effects and image location is perfect,,
    but bullets and arrows are not showing there
    even i place border to navigation and prev and next navigation.
    thees fields are there, but bullets and arrows images not displaying.
    please help me

  44. camikat left a comment on January 9, 2012 at 1:57 pm |

    I use worpress with twentyeleven theme and when I look my blog on smartphone (iPhone), I can’t see the entire nivo image slider.

    I would like to adjust the image in width 100% to see the entire image on my smarphone.
    Coudd somebody please give some help to set JS or other files ?

    Thanks to help

  45. Sarah left a comment on December 24, 2011 at 11:55 pm |

    Im using your tutorial but in /jquery.nivo.slider.js is currently injected by attacker. Could you tell me how could resolve the problem. Now, I just re-upload /jquery.nivo.slider.js with the one

  46. Sunil Sharma left a comment on December 16, 2011 at 3:23 am |

    Hi Jai,

    Your tutorial is awesome. I tried to do it successfully on my blog. But I have one question that can I change bullets (showing under slider) with menu items like newscast theme (available in themeforest) does perfectly. If it is possible please guide how I can connect it to my website’s menu items.

    Regards n thanks

    Sunil

    • Sunil Sharma left a comment on December 16, 2011 at 3:31 am |

      Sorry to comment again. but I forgot to mention that I tried nivo slider in elemin theme (by themify) and wordpress default 2011 theme. I don’t know if it is possible to add one theme’s functionality in another theme like news cast. Is there any method to add such functionality in 2011, kindly also write an article on how we can do.

      Thanks,

      Sunil

  47. Alfredo left a comment on December 13, 2011 at 11:01 am |

    Hi Jai, love your tutorial!
    Is it possible some tweak to do the same thing with pages?

  48. Drizzy left a comment on October 16, 2011 at 4:09 pm |

    I’ve using your tutorial above and work. but the images slide was drop down, how to solve this error. (I’m changing image size to 460 – 220 from the default 618 – 246), thanks

  49. Braid Hair Extensions left a comment on July 7, 2011 at 12:21 am |

    Useful information, was just looking something similar for the company blog to give it a fresh look. Let’s see how best we can implement this.
    Emily

  50. alimas left a comment on July 1, 2011 at 12:31 pm |

    well the jquery magic worked for me and you have compiled some of great work han keep it cool and nice

  51. Christopher Neetz left a comment on June 13, 2011 at 4:32 pm |

    Hi, love your post. I have one issue though. No matter what category I select, there is always an extra slide that holds nothing. Do you know what this could be from?

  52. Köpük Sabun Dispenseri left a comment on April 13, 2011 at 6:57 am |

    Thank you so much for this tutorial…

  53. Köpük Sabun left a comment on April 13, 2011 at 6:56 am |

    Thanks for this. I was wondering..

  54. Köpük Sabun Bayilik left a comment on April 13, 2011 at 6:55 am |

    nice tutorial, thank you..

  55. Pis osse left a comment on March 28, 2011 at 1:23 pm |

    Any suggestions on how to get captions from a custom field into Jquery?

  56. Asep left a comment on March 24, 2011 at 8:35 am |

    Definitly, clear and straighforward useful tutorial !

  57. werbefotograf left a comment on March 18, 2011 at 4:05 pm |

    This tutorial is a great postc. My new Website – 4 days old – with the nivo slider looks fantastic. THANK YOU JAI. Take care and regards from cologne

  58. wanville left a comment on March 9, 2011 at 4:35 pm |

    it works… thnx

  59. Daniel Berkas left a comment on March 2, 2011 at 9:14 pm |

    thanks, just use this for one of my site :)

  60. LaCursiva left a comment on February 19, 2011 at 7:02 pm |

    something does not work for me, I’ll try again, thanks!

  61. Mail House left a comment on January 31, 2011 at 9:47 pm |

    Really a great tutorial it is easily understandable by anyone new to wordpress as well.

    Thank You.

  62. David Gómez left a comment on January 31, 2011 at 3:12 pm |

    I can’t make ir work, i already double check the code and everything is fine, im also using the Twenty Ten theme.

    I tried the wp-nivo-slider plugin and is working ok, but the CSS from that plugin sucks and makes the script look really ugly.

    My problem is the slider doesn’t appear, the code is generated at the right position but the slider never shows, can you help me?

    • David Gómez left a comment on January 31, 2011 at 5:16 pm |

      Found the error…

      In the code you give to put in the footer, you call the jquery.nivo.slider.js file, but is the jquery.nivo.slider.pack.js file. I just had to correct this line and everything worked perfectly, thank you for the tutorial.

      <script src="/jquery.nivo.slider.jsjquery.nivo.slider.pack.js” type=”text/javascript”>

  63. nachitox left a comment on January 17, 2011 at 11:45 am |

    nice tutorial, i will put in my blog.

  64. outlet left a comment on December 20, 2010 at 5:30 am |

    there be an easier way to implement Nivoslider into themes using the post thumbnails introduced in WordPress 3.0?

  65. Eugene Gordin left a comment on December 17, 2010 at 9:20 am |

    Thank you so much for this tutorial – it is quite helpful.

    I cannot seem to find a way to have Nivo load the content of the post using the nivo-html-caption class (since the content has HTML).

    The instructions to Nivo explain how to have html in the captions, but require that the div with the html be outside the slider div. This doesn’t work for wordpress however because the loop needs to be inside the slider div.

    Any suggestions?

  66. Ajinkya left a comment on December 16, 2010 at 10:56 pm |

    Thanks for super cool slider n tut. I have embeded it in my homepage of my website (click on my name above), but problem is IMAGES are not showing up on sldier.. only text is coming & image space is coming as a box. Please advise :)

  67. Daniel left a comment on December 16, 2010 at 12:16 pm |

    Tried to apply the nivo slider to my twenty ten header, but the slider doesn’t work… Followed every step in this tutorial

    • daniel left a comment on December 16, 2010 at 1:20 pm |

      aah, got it working… path in the given script wasn’t correct. Can I also put some images in the code? just like the nivo slider demo?

  68. Erwin left a comment on December 16, 2010 at 2:24 am |

    Agree with Keenan. With a few modifications you can easily use the Featured Image feature so you don’t have to muck around with custom fields. Still a great tut!!

  69. fever18 left a comment on December 14, 2010 at 5:36 am |

    Is there any easy way to use this Nivo slider.
    I dont want to play with the coding of my wordpress files..
    Please help me with some plugin to use this functionality.

  70. Lukman left a comment on November 27, 2010 at 11:28 am |

    Very useful tutorial Jai.

    But please check this out:

    ..copy the file called jquery.nivo.slider.pack.js and paste it into your WordPress theme folder.

    <script src="/jquery.nivo.slider.js” type=”text/javascript”>

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    see the script path?

    • Jai left a comment on November 27, 2010 at 12:26 pm |

      What’s wrong with the path?? I don’t see an issue. It is < ?php bloginfo('template_directory'); ?>/jquery.nivo.slider.js and that’s what is there in the tutorial

      • Lukman left a comment on November 28, 2010 at 12:29 am |

        Yes, but here is what you say:

        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

  71. Keenan Payne left a comment on November 25, 2010 at 10:02 pm |

    Great tutorial Jai, but wouldn’t there be an easier way to implement Nivoslider into themes using the post thumbnails introduced in WordPress 3.0?

  72. Jason Loucks left a comment on November 21, 2010 at 10:32 pm |

    Great post. Thanks for this. I was wondering if you could recommend a automatic image resizer script? Thanks.

  73. chris left a comment on November 18, 2010 at 2:24 pm |

    nice tutorial, or you could use the nivo slider wordpress plugin which makes it easier for novices 😉

    http://wordpress.org/extend/plugins/wp-nivo-slider/

    • Jai left a comment on November 18, 2010 at 2:46 pm |

      Yes. I have knowledge of the plugin. This tutorial is for bloggers and developers who want to integrate the slider into the template without the use of an extra plugin. :)

Leave a Comment

Your email address will not be published. Required fields are marked *

What Others Say

BannerJai was awesome to work with. A port of an ASPX/HTML site to Wordpress went seamlessly, and his recreation of our look and feel were fantastic - Kevin Webster

BannerJai is a talented, creative and an enthusiastic web developer who has worked consistently to deliver high quality websites for my businesses - James Eccles

  Have Questions?   Hire Me

Send Me Your Questions

Tell Me About Your Project