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.
This is great but I would say it would be better to put the image within a loop so the content can be managed from the backend via posts
No luck getting this to work on my blog.
Does it have to be outside the loop?
Script queue can and should be used for third party scripts as well. You register your script with wp_register_script() and set jQuery as dependency. Then queue your script and jQuery will be loaded automagically before it.
I think there is similar set of function to queue CSS as well.
By the way glad to see links option added, I believe I inquired about it at early version. Off to try it.
Works perfectly on WordPress 2.9.2
Thank you so much for this wonderful plugin.
I love this slider, very cool. I managed to get it working in WordPress, but I’m not sure where to include my modifications (no nav, only fade, no next/prev buttons, etc.). It worked fine in static html, but I must be missing a bit of php somewhere.
It sounds like it’s the options in the actual script your trying to include:
Ah, that’s where it goes. Thanks!
Wordpress seems to delete the ” from the HTML when I publish the page. Am I missing something?
Sorry the code item was removed the post. WordPress seems to remove the php code block from the HTML when I publish the page. I am using version 2.9.2. Is this something to do with my server?
Hi Jared. WordPress doesn’t let you publish php blocks in your posts. It’s better to just put the HTML in your post or simply hard code the script.
Found an obvious solution… I put the setup code in the header rather than the blog post.
I’m having problems setting this up…
I have put the PHP & Javascript code in my header.php, before my “php wp_head()” finction
Then I pasted the HTML code in my post….
I’m sure I have missed something here…
If you could give me some tips that would be great!
Hi Rachelle
If you look at the above code closely only the
wp_enqueue_script()function should go before thewp_head()function. Everything else can come afterwards.Also make sure your paths match up with your actual files. One more thing to check is that the HTML in your post is outputted the same way as WordPress sometimes cleans up and adds extra HTML.
Thanks…is there a way to use this in different pages, with different photos for each? I have installed php widget from wordpress…but doesn’t seem to be working.
Thanks so much!
[...] Nivo-Slider: Einbau des Sliders in WordPress [...]
is it possible use ul li rather img?
I’m afraid not. The slider is set up to work with links and images only.
ok, thanks for confirmation. but it would be great if we could. have any plan for the future version?
I’m trying to incorporate your slider into a personal project in WordPress. Everything works fine, except 2 things:
1. Peformance of the Slice Effects under Firefox is terrible. Works fine on Chrome or Opera.
2. I can’t get to display the captions for some strange reasons, even tho they are selected to show in the scrip options.
Hi Greven. In IE set the following rule to get your slides to show in IE:
For the captions are you using the nivo-slider.css file?
Hi Gilbert! Thanks a lot for your fast answer! That indeed fixed it! Oh you’re a visitor to my little blog? That’s awesome.
Since I integrated your slider into the WordPress Loop and automized it with the WordPress Thumbnails I’m thinking in publishing in the near feature a little tutorial explaining it.
By the way, great work man. Thanks!
Nuno.
No probs man. I’ll be keeping an eye out for the tutorial.
I’ve figured it out why the caption wasn’t showing. I’ll leave if here for future reference. The problem was I was using a tooltip jQuery Extension, normally this type of plugins hide the title attribute so the default browser tooltip doesn’t show. That was the problem. Disabling the Tooltip extension enables the caption on nivo Slider. It had to be the only conflict since I inspected the code and I was not hidding the caption anywhere but on the Page Source the Title in the Links appeared with Display:none.
I wonder if there is a tooltip extension compatible with nivos, that is, that doesn’t hide the title.
Great slider, Gilbert! Can’t say how much i like it.
I would love to see a future release that would make it work with DIVs or LIs so we could use it to display featured posts in wordpress installations. Or maybe just some hints in that directions…
Will donate as soon as I’m able and everyone that appreciates this kind of work should donate too!!!
Best regards,
pffmihai
Does there is any wordpress plugin created with this script. I will help if you want to create a plugin using this script.
i am a bit of a noob at this and would really appreciate some help! could u please tell me where exactly are we supposed to add the html code which uve specified above ?
The Nivo Slider really is awesome. Thanks so much!
Is it possible to reduce the speed between the changing images? It would be great to see them a little longer.
Thanks. To show the images for longer simply increase the
pauseTimesetting remembering that 1000 is one second.Hi, I want to edit the time settings so that the images change along with another script I am running to change the text beside it.
Where would I go to edit the time as the only place I can find ‘pauseTime’ is in the .js file and there are currently no numbers.
I’m not used to editing Javascript files so any assistance will be great. Thanks.
Is this already tested with wordpress 3.0 beta?
Can´t get it to work….
[...] here: Setting Up the Nivo Slider in WordPress | dev7studios Tags: jquery, nivo, slider, slideshow, [...]
I ran across a couple of issues while implementing this excellent script, so I thought I’d share what I learned to help others.
The jQuery library included in WordPress as of v2.9.2 is jQuery 1.3.x. This version is not compatible with multiple Nivo Sliders. Since it is necessary to load in jQuery 1.4 or higher to get multiple sliders working, in order to play it safe by WordPress jQuery standards, instead of using wp_enqueue_script(‘jquery’); in the header, refer to the “Load a default WordPress script from a non-default location” section of http://codex.wordpress.org/Function_Reference/wp_enqueue_script
When implementing your various sliders, change the ID of each DIV to a unique name, and then update your header Nivo setup script and CSS file accordingly.
Love this! I replaced AnythingSlider with this. I felt it suited my site better.
Check it out in action at my band’s site:
http://www.findingcore.com
Something odd happens once in a while though. After it cycles through a couple times, the images break-up and pieces of other images can be seen through the others.
Any ideas?
Love it though!
Just tried implementing this on a WrodPress side for some homepage marquee images, but found that it interferes with the PixoPoint Menu system, which is an automated SuckerFish menu. The menus initially drop, but then partially disappear when you try to navigate down them. I didn’t have this problem with SlidePress which I used initially, of vSlider, which I replaced it with to go non-flash. I was hoping to use Nivo Slider, which I liked better with it’s navigation and transition options.
Any idea how to avoid the conflict?
Thanks,
Michael
I found a z-index conflict. Oddly the PixoPoint Menus had a low z-index of 20, which Nivo was also using z-index settings up to 99. I set PixoPoint’s to 200 and all seems fine now.
-mpm
Yes the answer is to up the z-index of the dropdowm menu.
Is there a way to make it not blank out at the end, before cycling to the first image again, and use the last image as the basis for transitioning to the first? It would also be nice if there was a transition to the first image at the beginning, which just seems to blink on rather than fade in or something.
The blanking out at the end for a sec was an HTML error in my image list, so that’s not an issue, but a transition into the first image would be great.
-mpm
How did you get fix the blanking before 1st image error. ?
Is there a way to randomize the images in the slideshow?
I set this up in WordPress. Works fine in FF and Safari, but images don’t show up in IE. I added your conditional comment {display:block}, although I set it on #slider img as I don’t have the pics linked. Any help is appreciated.
Hi there,
First of all thanks for this great slider
But I have a problem with the category selection… Can’t we select all the category?
Well I actually don’t need to specify a categorie, can’t the slideshow feature the thumbnails regardless of the category?
Thanks for your help!
Saw the comments on z-index .. but i just tried to get a dropdown menu over nevoslider … it simply doesnt work …. i played with increasing the z-index but the dropdown doesn’t shows in front
.. it would be a great help if somebody figures what went wrong.
I used jquery to set up drop down
jQuery(document).ready(function() {
// Opera Fix
jQuery(“.menu li”).hover(function(){
jQuery(this).find(‘ul:first’).css({visibility: “visible”,display: “none”}).show(268);
},function(){
jQuery(this).find(‘ul:first’).css({visibility: “hidden”});
});
});
and made the style
.menu ul ul li
{
z-index:200;
}
does anybody know what would have gone wrong
[...] the last statement, the simple yet fantastic slider from the aptly named Nivo Slider Plugin is an simple thing of beauty. With jquery being the standard JavaScript used by WordPress, it is [...]
[...] Slider with Wordpress you can follow this tutorial which explains how it to set it up or use the Nivo Slider [...]
Hi Gilbert,
I’v send you an e-mail with my problem. Could you please read it and help me.
Thank you.
Thanks for the slider. I am using a theme that came with the Nivo Slider. Works great in FF but in IE the images do not show up. I tried adding the [slider a{ display:block;}] coding but it did not solve the issue. Any help is appreciated.
btw the theme I am using is the Estrada theme and my website is adaviddance.com
Figured out the IE fix. Had to modify it a little for the theme I was using.
Hi all,
So I am trying to implement the slider in wordpress theme. Everething is ok, the css and jquery seams to be redden… but the only problem is that images are not displayed.
To display images I am using the timthumb script that get the first image from the post, this is the code :
have_posts()) : $my_query->the_post();$do_not_duplicate = $post->ID;
?>
<a href="”>
Images are being displayed just when I am deleting this divs but they are displayed just normally without any effect.
So where could be the problem? Could someone help me?
Hi,
I have implemented all the slider dynamically using wordpress, fetch the images from featured category and its working fine. Now what I want to do is the images thumbnail of images is generated dynamically.Please help me..How I can generate slider image as a thumbnail dynamically?
Thank you..
Hi Saurav. Have a look at this tutorial to see how to use thumbnails.
How do I add all of the controls? using the above code works, but when I try to customize the slider, I break it. What am i missing? ALso the code entered this way breaks my jquery menu.
Help!
$(window).load(function() {
$(‘#slider’).nivoSlider({
effect:’random’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:500,
pauseTime:3000,
startSlide:0, //Set starting Slide (0 index)
directionNav:true, //Next & Prev
directionNavHide:true, //Only show on hover
controlNav:true, //1,2,3…
controlNavThumbs:false, //Use thumbnails for Control Nav
controlNavThumbsFromRel:false, //Use image rel for thumbs
controlNavThumbsSearch: ‘.jpg’, //Replace this with…
controlNavThumbsReplace: ‘_thumb.jpg’, //…this in thumb Image src
keyboardNav:true, //Use left & right arrows
pauseOnHover:true, //Stop animation while hovering
manualAdvance:false, //Force manual transitions
captionOpacity:0.8, //Universal caption opacity
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){} //Triggers after all slides have been shown
});
});
I’m running into conflicts with my menu jquery,
Don’t you have to add the nivoslider class somewhere?
[...] you would like to use the Nivo Slider with Wordpress you can follow this tutorial which explains how it to set it up or use the Nivo Slider [...]
Hi.. I successfully implemented nivo slider onto my header, but the images are flashing all at once before the plugin loads.
I read somewhere that inserting this code would solve it:
[sourcecode]
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
[/sourcecode]
I found a text file in under nivo plugin where it has ‘jQuery’ instead of the $ sign, so what I did is replace it with the dollar sign but it didnt fix the problem. How can I remove having my images flash all at once.
By the way, the plugin is now working and configured on my site. I placed this code in my index-top.php:
[sourcecode][/sourcecode]
Thanks in advance for any help and awaiting your reply
Sorry, second code I inserted in my index-top.php is the one I found here: http://wordpress.org/extend/plugins/wp-nivo-slider/installation/
[...] developers actually came up with a tutorial on how to setup Nivo Slider to WordPress, but it lacks the how to actually use the Nivo Slider within the WordPress loop, which you’ll [...]
Thanks!!! this is exactly what I was looking for
I’ve already integrated it.
Hi, I have this installed on a clients website and was seemingly working perfect until we tried in IE 7+ It appears for a second then disappears completely? Any ideas? http://www.sherrislawfirm.com
[...] de ser instalado. Si desea utilizar el control deslizante de Nivo con WordPress puedes seguir este tutorial que explica cómo configurarlo o utilizar el plugin para WordPress Nivo Slider. Descargue el Slider [...]
It seems I can get Nivo to work fine in Firefox, Chrome, etc,. but when the images load in IE they stack vertically down the page as if they were all on the same z-index.
Any ideas?
I thought I’d share an alternative method I used in installing Nivo Slider. I installed this as a text widget on WordPress 3.0 while avoiding having images flash all at once before the plugin loads. You can check it out here http://z3olyte.com/2010/06/30/use-nivo-slider-in-wordpress-as-a-text-widget/
Finally got it to run in IE8 by copying the css and html from the Nevo site source verbatim.
Unfortunately, the only way it will run is if the customization arguments are left blank in the window).load script.
A bit funky. Entering any option or effect parameter breaks IE.
Hi, really lovely this script, keep up the good work!
I’m trying to integrate this in a website and already managed to get it to work – almost. Look at this:
http://new.schoneweg.de/2010/07/06/test-20100706/
If you like at the example you see the the caption does “blink” always two times – the transition between the images – well, it blanks out in between.
It seems to me that this issues are related to each other – but after searching for several hours… I don’t have an idea why this happens.
Does anybody have a little hint? Any help would be greatly appreciated…
Thank you!
Hm, checking with firebug before the transi. the css looks:
element.style {
background:url(“wp-content/uploads/2010/07/slide_3.jpg”) no-repeat scroll -195px 0 transparent;
bottom:0;
display:block;
height:0;
left:195px;
opacity:0;
top:0;
width:39px;
}
and after the blinking the one element changes to:
background:url(“undefined”) no-repeat scroll -195px 0 transparent;
Ok, how to find out why the captions “blinks” (shows two times)
I thought I make another nivo slider tutorial… This seems to be my favorite plugin for my header
http://z3olyte.com/2010/07/08/set-up-nivo-slider-in-thematic-feature-site/
Hey,
It is possible to make/put instead of prew & next button – little images of prev & next articles ?!
Just let me know.
[...] mouse over it, among other things. Not only that, but there’s a WordPress plugin (or check out this tutorial), a Joomla module, and two Drupal modules: Nivo Slider and Views Nivo [...]