Getting jQuery Nivo Slider To Work Inside Your WordPress Theme

September 29, 2010 / Javascript, jQuery, Wordpress / by Paul Robinson / 275 Comments

This post was published back on September 29, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

Adding Nivo slider to a WordPress theme is a lot easier than adding any other slider I have worked with. It may seem as if there are a lot of steps to it, but it’s fairly easy to follow. Let’s get straight into it.

Yvonne Strahovski & Zachary Levi. Picture © NBC Studios. No infringement intended, used for illustrative purposes only.

Downloading Nivo Slider

Obviously the first thing you need to do is download Nivo Slider. Just click the download button, production is the best option, then a little above that there is a header that says “Style Your Slider Like The One On This Site”. For ease of use we are going to use the style pack provided so click the button to download that & extract both into a folder called ‘js’ inside your theme’s folder.

Installing Nivo Slider

I use the term installing loosely as we are really just including the scripts. A lot of users tend to just hard code script tags into the page & while you can do that, I don’t recommend it. Before we get into any of that though we need to check to your theme to see if it already includes jQuery or not. If you are developing from scratch it probably won’t, if you are adding Nivo to an existing theme open up your front page & check your source code for a script tag including jQuery.

Now that we have determined whether or not you have jQuery included or not you can alter the code as needed. I’ll add a comment next to the line to remove if it is already included.

function theme_add_scripts() {
    wp_enqueue_script('jquery'); //omit if jQuery already included
    wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
}
add_action('init', 'theme_add_scripts');

function theme_add_scripts() {

wp_enqueue_script('jquery'); //omit if jQuery already included

wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');

}

add_action('init', 'theme_add_scripts');

You will need to add this to your themes functions.php. If your theme doesn’t have one you will need to create it. All we are doing is using a built in WordPress function called wp_enqueue_script() to add the scripts. A very important note is that you need wp_head() to be present in your theme or this will not work.

The parameters for wp_enqueue_script() are simple. The name you want to give to the script, it’s path, it’s dependencies if any, and it’s version number.

Next we need to include the stylesheets needed to style the Nivo slider. We are going to do that in a similar manor except using wp_enqueue_style().

function theme_add_styles() {
    wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');
    wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
}
add_action('init', 'theme_add_styles');

function theme_add_styles() {

wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');

wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');

}

add_action('init', 'theme_add_styles');

As you can see they are very, very similar. It would probably be best to change the function names to something prefixed with an acronym of your theme’s name. This helps stop conflicts. Just remember to change any reference to the function names. So if your theme is called ‘My Super Awesome Theme’ you could use ‘MSAT’, so theme_add_styles() might become msat_add_styles(). Simplez.

Creating Nivo Slider’s HTML Markup

The WordPress Featured Image Meta Box... Now we have included the scripts & stylesheets needed we can finally get this thing working. The HTML markup if fairly simple, but because we are in WordPress it has to be generated by WordPress. That makes it slightly difficult & while I have played around with a few different methods, I am going to show you the one which seems to use the least resources and makes it the easiest for the user.

The method involves creating a category called ‘featured’, but could be named anything you wish, and then using the post thumbnails system to create thumbnails to fit the size you want Nivo slider to be. To do that you will need to enable custom thumbnails in your functions.php file by using the following code:

add_theme_support('post-thumbnails');
add_image_size('nivothumb', 960, 320, true);

1 2	add_theme_support('post-thumbnails'); add_image_size('nivothumb', 960, 320, true);

Please remember you may need to change the width (960) and height (320). These are just the sizes I used when testing. Now when creating a post you will notice that you have a new box on the right hand side under ‘Post Tags’. Just upload the image you want to use on the slider & press the ‘use as featured image’ link. Oh and remember to tick the ‘featured’ category or it won’t show up on the slider. Now all you need to do is create the loop in your index page.

So open up index.php, if that’s where you want the slider, find the location you have chosen for your slider and drop in this code:

<div id="slider">
<?php
//WordPress Query updated to meet correct style for WP 3.5+ - 18th November 2014
$nivo = new WP_Query(array('posts_per_page' => 5, 'category_name' => 'featured'));
if($nivo->have_posts()) :
    while($nivo->have_posts()) :
        $nivo->the_post();
?>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>
<?php
    endwhile;
endif;
wp_reset_postdata();
?>
</div><!-- close #slider -->

<?php

//WordPress Query updated to meet correct style for WP 3.5+ - 18th November 2014

$nivo = new WP_Query(array('posts_per_page' => 5, 'category_name' => 'featured'));

if($nivo->have_posts()) :

while($nivo->have_posts()) :

$nivo->the_post();

<?php

endwhile;

endif;

wp_reset_postdata();

</div>

Now we have the code to produce the images in the correct HTML markup we need to initialize Nivo slider.

Initializing Nivo Slider

Okay, we are on the final straight now. Let’s get the slider working. All you need to do is either create a .js file and put the following code in & then add a wp_enqueue_script() to the function we created before, or you can just paste it in the head under wp_head() inside script tags. It is your choice.

jQuery(window).load(function() {
    jQuery('#slider').nivoSlider({
        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500, //Slide transition speed
        pauseTime:5000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        captionOpacity:0.8, //Universal caption opacity
    });
});

jQuery(window).load(function() {

jQuery('#slider').nivoSlider({

effect:'random', //Specify sets like: 'fold,fade,sliceDown'

slices:15,

animSpeed:500, //Slide transition speed

pauseTime:5000,

startSlide:0, //Set starting Slide (0 index)

directionNav:true, //Next & Prev

directionNavHide:true, //Only show on hover

controlNav:true, //1,2,3...

keyboardNav:true, //Use left & right arrows

pauseOnHover:true, //Stop animation while hovering

captionOpacity:0.8, //Universal caption opacity

});

You can change the settings as you like. For a full list of parameters go to the Nivo slider website.

All Done!

That’s it. Hopefully if you load up your home page you will have a fully working Nivo Slider. There are a lot of steps granted, but it’s easy once you get into the swing of it.

Oh, you may be wondering why I’ve used jQuery instead of the $ well that’s because if you load jQuery using the enqueue script method it is loaded in no conflict mode by WordPress so the dollar sign reference doesn’t exist.

As always if you have any questions about the implementation of Nivo Slider I have given here, feel free to ask. If you have any questions about the Nivo slider script then I probably can’t answer them as I did not write it. You should instead direct those questions to Dev7Studios, who created the Nivo slider script.

Featured jQuery Nivo Slider Theme Wordpress

Paul Robinson

WordPress plugin & theme developer, user of Laravel and learner of React.js. Can usually be found listening to Japanese, and Korean Pop or Vocaloid music while developing.

275 Comments

Very Nice Tut One question can you explain how to add option admin page that control the category width , height and number of posts to show?

author

Thanks Ahmad.

That’s a whole new tutorial. I have done a tutorial on how to add a admin page to a plugin/theme before but it’s a little outdated now. I’ll see if I can make an updated one some time in the coming weeks.

Sorry if that’s not much help. I’ll try & get that updated version of the tutorial done soon.

Thanks for your fast reply i will read this tut may be it help

Great Blog keep it coming

Regards

author

Thanks, will do. Hopefully it will help a little until I can get the updated version done.

Hello,

I have installed 5 sliders on my page and they function and are styled well, but there is one lingering issue. Right now I just have 2 sample pictures rotating for testing, and the .nivo-controlNav counts 3 images, and on when the slider starts it lingers on the 1st image for several seconds and then flashes off before going to the 2nd image and finally crossfading (the desired effect) to the 1st image.

Basically how do I cut out all the extra steps and have it just crossfade between the two images?

Thanks,
Paul

author

Well to just have only the fade effect you just change effect: 'random' to effect: 'fade'.

The flickering first image though is strange, I’ve never encountered that problem before. You say you have 5 sliders on the same page? It may just be that the JS engine is struggling to cope. JS has a limitation allowing it to use only one processor core so that many sliders may cause flickering or juddering for the first few seconds. Have you tried a browser with a super fast engine like Chrome?

The slider nav normally counts too many items if there are other elements (non images) in the silder area. If that is the case you can use the filter to only select images, more on the Nivo Slider site.

Paul, thanks for your reply.

I don’t think it’s a JS engine coping issue, as even when i have only one of the sliders on the page the slider behaves identically. I’m actually developing in Chrome and Firefox, and happens in both browsers, as well as Safari.

Here is an example of the code I’m using to populate the slider on-page:

     <div class="slider">
		  <a href="http://localhost:8888/dest1"><img src="http://localhost:8888/images/scroll-1.png" alt="" /></a>
        <a href="http://localhost:8888/dest2"><img src="http://localhost:8888/images/scroll-2.png" alt="" /></a>
     </div>

</div>

As you can see, there are only two items in there. Any thoughts?

Here’s the script for it:

$(window).load(function() {
	$('.slider').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
                slices:1,
		animSpeed:500, //Slide transition speed
		pauseTime:3000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next &amp; Prev
		directionNavHide:true, //Only show on hover
		controlNav:false, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
                controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.png', //Replace this with...
		controlNavThumbsReplace: '_thumb.png', //...this in thumb Image src
		captionOpacity:0.8, //Universal caption opacity
		pauseOnHover:false, //Stop animation while hovering
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});

$(window).load(function() {

$('.slider').nivoSlider({

effect:'fade', //Specify sets like: 'fold,fade,sliceDown'

slices:1,

animSpeed:500, //Slide transition speed

pauseTime:3000,

startSlide:0, //Set starting Slide (0 index)

directionNav:true, //Next & Prev

directionNavHide:true, //Only show on hover

controlNav:false, //1,2,3...

controlNavThumbs:false, //Use thumbnails for Control Nav

controlNavThumbsFromRel:false, //Use image rel for thumbs

controlNavThumbsSearch: '.png', //Replace this with...

controlNavThumbsReplace: '_thumb.png', //...this in thumb Image src

captionOpacity:0.8, //Universal caption opacity

pauseOnHover:false, //Stop animation while hovering

beforeChange: function(){},

afterChange: function(){},

slideshowEnd: function(){} //Triggers after all slides have been shown

});

author

I honestly have no idea what’s going on there. I’ve only ever seen the juddering problem on badly coded sliders (which Nivo isn’t), and when there is too much for the JS engine to handle. If you have tried with only 1 slider then it can’t be that.

I’m so sorry, I’ve honestly no idea what is going on… 🙁

Paul – OK, thanks for trying.

Still having problems with the ‘flickering’ issue from the two comment series above – anyone have any ideas?

Thanks for that post!!!!!!! I was having issues getting my featured image to size correctly. I tried going into the css, but could only get the slider to resize and not the image. I know I was missing something. Thanks again.

author

No problem Gary. Glad the tutorial helped you out. 🙂

thanks babe

hi,thanks it best tutorial,
can i just want show the images without the caption, how to write for this?

author

As far as I’m aware to remove the captions you have to empty the title attribute of the image tag used. As that is provided by WordPress you will need to empty the title field when uploading the images to the WP media uploader.

You could just set the caption opacity to 0.0 so it will be completely transparent.

author

You could but some people do not like the fact, that it could be classed as hidden content by Google.

Personally I don’t think it would matter, but some people are more SEO conscious than I am.

Hi Paul,

I’m glad I found my way back to your site. Some awesome content here. I think the Nivo slider is one of the nicest sliders I’ve seen in a while and look forward to implementing it in one of my next themes.

author

Thanks Kathy & welcome back. 🙂

It is one of the nicest sliders I’ve ever worked with, and despite the length of this tutorial, actually works well within a WP theme.

Good luck, and as always feel free to bug me via email or here in the comments if you need any help. 😉

Hi Paul,

Thanks for this tutorial. For some reason I can’t get the Nivo Slider working.

I tried enqueing the inline js like this and something tells me this is where my problem lies:

wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1', true);
wp_enqueue_script('nivosliderinline', get_bloginfo('stylesheet_directory').'/js/nivo-inline.js', 'jquery', false, true);

1 2	wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1', true); wp_enqueue_script('nivosliderinline', get_bloginfo('stylesheet_directory').'/js/nivo-inline.js', 'jquery', false, true);

Does jQuery need to be an array? I would rather load all javascript through functions.php. I’m lost.

Thanks for your help,
Dustin

author

Nope if the script only has one script dependency then you don’t need you use an array.

I’m not sure why it wouldn’t work. Everything looks okay from what I can see. Have you checked the source code to make sure the path to the inline script is correct? It’s about the only thing I can think of at the moment. 🙁

One last test you could try. I know you don’t want to have any Javascript written outside of a script, but if you try it on the page in script tags, does it work okay?

Thanks for your quick response Paul. You are what the open source comunity is all about and I appreciate your help.

I got the code to work adding it like this to my function.php file and adding the inline javascript in the footer following

<?php wp_footer ?>

1	<?php wp_footer ?>

define(THEM_TEMPLATEURL, get_bloginfo('template_directory'));
function my_init() {
	if (!is_admin()) {
		wp_deregister_script('jquery');
		wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', false, '1.4.3', true);
                wp_enqueue_script('jquery');
wp_enqueue_script('nivoslider', THEM_TEMPLATEURL.'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1', true);
	}
}
add_action('init', 'my_init');

define(THEM_TEMPLATEURL, get_bloginfo('template_directory'));

function my_init() {

if (!is_admin()) {

wp_deregister_script('jquery');

wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', false, '1.4.3', true);

wp_enqueue_script('jquery');

wp_enqueue_script('nivoslider', THEM_TEMPLATEURL.'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1', true);

}

add_action('init', 'my_init');

The only problem is the transitions don’t work. I would like to load javascript in the footer. I did test the code in the head and transition were still not working. Do you think I need to optimize/smush my images or could it be in conflict with a jquery colorbox I am using on my site?

I’m gonna turn off my plugins and see what happens. I’ll keep you posted.

author

I’m not sure I would say try removing all other jQuery plugins etc just in case. If that doesn’t help I’m afraid I’m at a loss. Do you have FireBug installed? It’s normally a great help with finding errors to do with Javascript.

Thank you for this tutorial, as I’m a big Nivo fan and have used it a bunch. I only very recently started getting into WordPress, and as such I was grateful for the clear and detailed instruction.

However, noob that I am, looks like I struck out. I followed all the steps – which were clearly laid out and made complete sense to me – but all I get is the standard static gallery with thumbnails that link to a full–size image.

I suspect the issue lies in the HTML markup, since I was careful to track whether the functions were successful in finding all the necessary js/css files in the document head – when viewing the source, all files are there and correctly linked, including jQuery (only once), the Nivo script, the css and the init script – even though I had to change the paths. For a second there I felt smart.

Since I am working with a child theme of twentyten, I moved a copy of index.php into my child theme folder and added the required html in the appropriate place within the content div in that file. I presume this is the correct file to edit. I noticed that on this page, it says (commented out):

“If you want to overload this in a child theme then include a file called loop-index.php and that will be used instead.”

I tried that, but still no dice. When I view the source of the home page, there is no evidence that I at the very least placed the new tag in there. Maybe I’m using the entirely wrong file to begin with?

I should mention that I’m trying to add this to a static home page, not to a post. It seems you cannot categorize this page, so using the “featured” category won’t work anyway, but even if I try putting the slider on a test post, I get the same, static-gallery result. Though my tiny brain is at its limits, so…

So, happily I have all the necessary files working in the background, I’m just failing at getting the correct (or any) html generated. Which index.php file specifically am I to be adding the html to, particularly since I’m using a child theme? Can this be done on a static wordpress page?

One mistake I made during this process was attempting to use an older version of JQuery.

This plugin is only compatible with 1.4.3.

As for the category vs. page issue, I’ve thought about that before myself. Seems like most developers focus on post categories instead of pages when it comes to featured content sliders. In the html I’m sure you could re-work the php to use certain page ids instead.

author

Hi Matt.

I’m afraid I’m unfamiliar with Child Themes so I don’t know if I can be much help there. 🙁

I’m not sure what you mean about the ‘featured’ category. You use the featured category to hold the posts that will be shown by the nivo slider.

Do you have a link or something that shows the problem you are having? It’s kind of hard to debug without being able to see what is going on.

Thanks to Dustin for helping out too. I wasn’t aware nivo required jQuery 1.4.3 to run, so thanks for that.

damn- just lost my whole comment.

@Matt – if you are using a static page then you need to copy page.php into your child as index.php creates the BLOG loop. or if your parent theme supports hooks and filter (like Thematic- which I use to build everything!) then you could also add the markup to a hook.

However, in the interest of simplicity I think your easiest approach would just be to create a page template. Copy page.php into your child folder. Rename it to something else and put

<?php
/*
Template Name: Snarfer
*/
?>

<?php

Template Name: Snarfer

at the top. see:
http://codex.wordpress.org/Pages#Page_Templates

@Paul- In lieu of categories and tags for featured items I am itching to try a custom taxonomy… as described here:
http://justintadlock.com/archives/2011/01/14/rethinking-how-news-themes-work

author

Been having a few server issues so sorry if that’s why you lost your comment. I think everything should be okay now.

I would suggest a page template too, it’s the easiest way to create a static home page. Thanks for providing the code. 🙂

A custom taxonomy does work well, I’ve tried it and everything seems to work just as if you had used a category. I think the main advantage is simply that your featured posts are separate from your normal ones.

Oops! Kathy, same thing just happened to me. Must fill in the required fields…

But hot dog! Kathy, that was the solution I was looking for. In fact, this Page Template thing will open up whole new WP worlds to me.

Thanks for the tutorial, the help and the discussion. Geniuses, the lot of you. I’m coming back and I’m bringing friends. 😉

Cheers!

author

Thanks Matt. I’m glad you’ve been able to find help. I’d just like to say thanks to everyone for helping out too. 🙂

hi paul- it wasn’t your server. i forgot to put in my name and email! .

do your featured posts have to be separate? Couldn’t you modify your query to include them?

author

Oh right. Had a little problem with the server so thought it may have been that.

If you mean separate from the main blog then generally, but I believe there is a small snippet of code (can’t for the life of me remember where) floating around that allows taxonomies to be shown in the main blog stream.

well damn- that didn’t work out quite like i had hoped.. nivo’s js, jquery and nivo’s css are all showing up in source. but even the simplest nivo function is throwing errors about something being undefined (n is undefined and c=undefined… wth?), even though the following bit of code that changes the background color works just fine.

jQuery(window).load(function() { jQuery('#slider').nivoSlider(); jQuery('#slider').css('backgroundColor','red'); });

gonna have dinner and let this one marinate.

author

Hmmm. Let me know if you find a solution. I’ve had similar problems before, but not with nivo and never manage to figure out the cause. 🙁

Kathy,

I just ran into the same problem yesterday but was able to figured it out. Since I was trying to alert the non-JavaScript users that the slider required JS, I put a

<noscript />

1	<noscript />

tag inside the slider itself. This seems to be what caused the error.

Make sure to check your slider contents to ensure the right markup is present.

Hope this helps.

author

Never thought about that, thanks for the tip Enom. 🙂

This is a great tutorial, but I am completely lost at this point 🙂

I have done everything as you listed, but when I go to the page it is showing me all five images at once.

I have checked and jquery is loading properly.

I have this code in my functions.php file:

function ahd_add_scripts() {
	wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
}
add_action('init', 'ahd_add_scripts');

function ahd_add_styles() {
    wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');
    wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');
}
add_action('init', 'ahd_add_styles');

function ahd_add_scripts() {

wp_enqueue_script('nivoslider', get_bloginfo('stylesheet_directory').'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');

}

add_action('init', 'ahd_add_scripts');

function ahd_add_styles() {

wp_enqueue_style('nivoslider', get_bloginfo('stylesheet_directory').'/js/nivo-slider.css', false, '2.1');

wp_enqueue_style('nivoslider-custom', get_bloginfo('stylesheet_directory').'/js/custom-nivo-slider.css', 'nivoslider', '1.0');

}

add_action('init', 'ahd_add_styles');

Then I put this code in my header.php just above wp_head:

	<script>
    jQuery(window).load(function() {
        jQuery('#slider').nivoSlider({
            effect:'random', //Specify sets like: 'fold,fade,sliceDown'
            slices:15,
            animSpeed:500, //Slide transition speed
            pauseTime:5000,
            startSlide:0, //Set starting Slide (0 index)
            directionNav:true, //Next & Prev
            directionNavHide:true, //Only show on hover
            controlNav:true, //1,2,3...
            keyboardNav:true, //Use left & right arrows
            pauseOnHover:true, //Stop animation while hovering
            captionOpacity:0.8, //Universal caption opacity
        });
    });
    </script>

jQuery(window).load(function() {

jQuery('#slider').nivoSlider({

effect:'random', //Specify sets like: 'fold,fade,sliceDown'

slices:15,

animSpeed:500, //Slide transition speed

pauseTime:5000,

startSlide:0, //Set starting Slide (0 index)

directionNav:true, //Next & Prev

directionNavHide:true, //Only show on hover

controlNav:true, //1,2,3...

keyboardNav:true, //Use left & right arrows

pauseOnHover:true, //Stop animation while hovering

captionOpacity:0.8, //Universal caption opacity

});

</script>

Any suggestions?

author

There doesn’t seem to be anything wrong with the code there. Could you post the PHP code from your template that generates the HTML too? It’s the only place I can think there is an error.

This is the template code

<?php
/*
Template Name: Nevo Slider
*/
?>
<?php get_header(); ?>
	<div id="content" class="fullwidth">
    	<h1 class="pagetitle"><?php the_title(); ?></h1>

        <div id="slider">
        	<?php 
				$tmp = $wp_query; $wp_query = new WP_Query('posts_per_page=5&category_name=featured');
				if(have_posts()) : while(have_posts()) : the_post(); 
			?>
            	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>
        	<?php endwhile; endif; $wp_query = $tmp; ?>
        </div><!-- close #slider -->        

	</div> <!-- /content -->

<?php get_footer(); ?>

<?php

Template Name: Nevo Slider

<?php get_header(); ?>

<?php

$tmp = $wp_query; $wp_query = new WP_Query('posts_per_page=5&category_name=featured');

if(have_posts()) : while(have_posts()) : the_post();

<?php endwhile; endif; $wp_query = $tmp; ?>

</div>

</div>

<?php get_footer(); ?>

I am running this off my localserver using XAMPP, not sure if that would cause anything? I am getting other slides to work using XAMPP though.

I just created a very quick site on my server and added the files, functions code and header script. I also created a quick page template using the same code from my localserver. The same thing is happening on this. Maybe seeing it in action will allow you to see where I am screwing up 🙂

I really appreciate you help.

http://sandbox.ahansendesign.com/?page_id=19

author

I’ll certainly investigate for you. Thanks for uploading it to a server so I can see it in action.

I feel like such an idiot. I have been working for two full days on a barebones starter theme to use for client projects and am lacking a ton of sleep.

I realized moving the call for the jquery to AFTER wp_head along with the animation script is what was needed.

It is working on my localserver now. Thank you for offering to help. I came across your site today and have found a ton of articles that I am looking forward to reading.

author

Ahh that would explain it. I was just going to have a look as I’m on my phone at the min.

Thanks I hope you find the tutorials helpful and let me know if you need any help.

Paul,

While I thought it was working fine it will not display at all in Internet Explorer. In IE8 it shows the black title bar (and shows it rotating). In IE7 I see nothing. If you get a moment could you take a look and see if anything jumps out at you.

Again, I appreciate it!
http://sandbox.ahansendesign.com/about/

author

Hi,

I’ll certainly take a look for you. Give me an hour or so though as I’m not at my computer at the minute and I can’t look at the source on my phone. 😉

author

Well I can’t see anything obvious wrong from a quick look at it. I’ll take a proper look & debug it properly soon. I know Nivo works in IE7, 8 & 9 so it’s not that. I’ll get back to you later tonight though. 😉

Thanks Paul.

I added display:block to #slider a and it made it work in IE8. Still not working in IE7 though.

I have display:none for #slider img to stop it from stacking on page load (according to the nivo sitie). When I remove that then IE7 shows the first image but it does not rotate and it does not show the title bar.

I am going to continue looking into this and will update the files on my server in about an hour. If you get a chance to look tonight or this week even that would be great.

author

I’ll definitely get a look a little later tonight. Off the top of my head I can’t think of why ie7 wouldn’t work properly. I don’t have ie7 so I’ll have to figure out how to get around that.

I really appreciate your help Paul.

I use Compatibility Mode from IE8 to test IE7. It seems like the jquery is not loading or something because it only shows the image (no transition or title bar).

http://sandbox.ahansendesign.com/about/

It loads but on the bottom says “Done, but with errors on page”. The error is:

“Expected identifier, string or number or number”
Code: 0, Line: 14, Char: 1
in file: nivo-wordpress.js

This is the js file I created with the settings. It is referencing the last line. It was copied directly from your blog so I doubt there is an error there.

jQuery(window).load(function() {
jQuery('#slider').nivoSlider({
    effect:'random', //Specify sets like: 'fold,fade,sliceDown'
    slices:15,
    animSpeed:500, //Slide transition speed
    pauseTime:5000,
    startSlide:0, //Set starting Slide (0 index)
    directionNav:true, //Next & Prev
    directionNavHide:true, //Only show on hover
    controlNav:true, //1,2,3...
    keyboardNav:true, //Use left & right arrows
    pauseOnHover:true, //Stop animation while hovering
    captionOpacity:0.8, //Universal caption opacity
});
});

jQuery(window).load(function() {

jQuery('#slider').nivoSlider({

effect:'random', //Specify sets like: 'fold,fade,sliceDown'

slices:15,

animSpeed:500, //Slide transition speed

pauseTime:5000,

startSlide:0, //Set starting Slide (0 index)

directionNav:true, //Next & Prev

directionNavHide:true, //Only show on hover

controlNav:true, //1,2,3...

keyboardNav:true, //Use left & right arrows

pauseOnHover:true, //Stop animation while hovering

captionOpacity:0.8, //Universal caption opacity

});

The above code is exactly what I have in the .js file – should there be anything else?

Again – thank you and sorry to take up all this room in the comments.

author

Internet Explorer 7 is the arse (excuse the french) end of all browsers. It’s complaining about the comma on the last line of the options:

captionOpacity:0.8, <--- This one

1	captionOpacity:0.8, <--- This one

Remove it and it works.

I don’t know whether to blame the other browsers for forgiving it or to blame IE7 for being picky. 😆

Give it a go & let me know if it fixes it, it seems to have on my sisters website which you have just helped reveal the same problem on (thank you for that). 😉

Paul.

Thank you so much, it worked perfect! What a waste of a day when it is something I should have noticed right away. Again, thanks for your help.

Now off to read the rest of your articles, I have a feeling that things will go much smoother the rest of the way 🙂

Adam

author

No problem. I hate it when little problems like that stop you from working for ages.

Hope you enjoy the tutorials and let me if you need any help. 🙂

Hey Everyone. I was wondering if anyone might be able to help me out.

I have been able to get the Nivo Slider to function and I’m able to load everything from my functions.php file which is great.

Question I have involves the ability to switch between either the Nivo Slider or the customer header function native to WordPress 3.0. Here’s my code.

<?php

$tmp = $wp_query;
$wp_query = new WP_Query('posts_per_page=5&category_name=featured');
if(have_posts()) :
    while(have_posts()) :
        the_post();
?>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('post-thumbnail'); ?></a>
<?php
endwhile;
endif;
$wp_query = $tmp;

				// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() &&
							has_post_thumbnail( $post->ID ) &&
							( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&
							$image[1] >= HEADER_IMAGE_WIDTH ) :
						// Houston, we have a new header image!
						echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
					else : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>

<?php

$tmp = $wp_query;

$wp_query = new WP_Query('posts_per_page=5&category_name=featured');

if(have_posts()) :

while(have_posts()) :

the_post();

<?php

endwhile;

endif;

$wp_query = $tmp;

// Check if this is a post or page, if it has a thumbnail, and if it's a big one

if ( is_singular() &&

has_post_thumbnail( $post->ID ) &&

( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'post-thumbnail' ) ) &&

$image[1] >= HEADER_IMAGE_WIDTH ) :

// Houston, we have a new header image!

echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );

else : ?>

<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />

<?php endif; ?>

So right now if I have an image setup it loads and then disappears. Something tells me this has something to do with If Else, but I’m not sure. My php skills are iffy.

Thanks in Advance,

Dustin

author

Hi Dustin,

I think it might have a little more to do with the fact that your header checking code is outputting inside the HTML for the nivo slider. So it disappears because nivo slides it off the page.

You would need to place your If Else would need to be around the nivo HTML & PHP code.

I hope that makes sense.

Back again 🙂 Everything is still working great, but had a quick question. Do you know how we would go about changing the title that appears on the slider? Instead of having the photo title appear I would like to have either

1) The blog post title or
2) Text from a custom field

Just wondering if it is possible. Thanks again.

Adam

author

Hi Adam,

For some reason WP has stopped sending me comment received emails… Gonna have to get that sorted. 🙁

It should be possible. You would to quite heavily modify the code though. I’d try something like this, although I haven’t had time to test it:

<div id="slider">
        <?php
	$captions = array();
	$tmp = $wp_query;
	$wp_query = new WP_Query('posts_per_page=5&category_name=featured');
	if(have_posts()) :
		while(have_posts()) :
			the_post();
			$captions[] = get_the_title($post->ID);
			$image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'nivothumb');
	?>
		<a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" class="attachment-nivothumb wp-post-image" title="#caption<?php echo count($captions)-1; ?>" alt="<?php the_title_attribute(); ?>" /></a>
	<?php
		endwhile;
	endif;
	$wp_query = $tmp;
	?>
</div><!-- close #slider -->
<?php
foreach($captions as $key => $caption) :
?>
	<div id="caption<?php echo $key; ?>" class="nivo-html-caption">
		<?php echo $caption; ?>
	</div>
<?php
endforeach;
?>

<?php

$captions = array();

$tmp = $wp_query;

$wp_query = new WP_Query('posts_per_page=5&category_name=featured');

if(have_posts()) :

while(have_posts()) :

the_post();

$captions[] = get_the_title($post->ID);

$image = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'nivothumb');

<a href="<?php the_permalink(); ?>"><img src="<?php echo $image[0]; ?>" class="attachment-nivothumb wp-post-image" title="#caption<?php echo count($captions)-1; ?>" alt="<?php the_title_attribute(); ?>" /></a>

<?php

endwhile;

endif;

$wp_query = $tmp;

</div>

<?php

foreach($captions as $key => $caption) :

<div id="caption<?php echo $key; ?>" class="nivo-html-caption">

<?php echo $caption; ?>

</div>

<?php

endforeach;

That should work. Nivo requires that you use a set of div elements outside of your slider to show custom captions. If you wanted to use custom fields you would replace the get_the_title() with get_post_meta($post->ID, 'fieldkey', TRUE); and that should do the trick. Remember to change fieldkey to the name of the key you have used for your custom field.

Let me know if it works, as I said I haven’t had a chance to try it & it’s just off the top of my head. 😉

Thanks. I did not get the custom field working but I did get it to show the post title. That is great – thanks! I did not see clients naming the photo files correctly prior to upload so having the post title appear is much better.

Thanks again for the quick help!

author

Yeah It’s unlikely your client is going to name the images correctly, be nice if they did though, lol.

Glad everything is working though. I didn’t have time to test the code so I wasn’t sure if it would work or not.

Thanks for this, it helped me add it to the header image of Twenty Ten theme.

author

No problem, glad it was useful.

Hi paul, thanks for this tutorial, seems to be working great for me, just one question – how can I remove the image captions?

author

Hi ben,

You could possibly cheat with this one. You could try reducing the captionOpacity option in the Nivo jQuery code to 0. If that doesn’t work though try the longer suggestion below.

You’d have to produce an image tag without a title attribute as that’s where Nivo is getting the caption from. If you are having your image tags generated by WordPress then you’ll have a few problems with that.

You could try following the tutorial I wrote about using Nivo with custom captions but only taking notice of how the image tag is generated so that you can write your own without a title attribute in.

I’m hoping that made sense. If not let me know & I’ll try and put something together for you. Also don’t worry about not having a title attribute effecting your SEO, having an alt attribute should be enough.

Hi Paul, thanks for your quick response, the captionOpacity is working just fine at the moment so think I’ll leave it at that! Thanks again!

author

I figured that might work okay. No problem and glad the tutorial was helpful. 😉

Great tutorial! Is there any way to add the link to the slide (better wording: to make a slide link to some URL)?

author

Hi Max,

I’m not sure what you mean? I’ve already added a link using the_permalink() so that the slides go to the post when clicked.

Have I gotten confused & you meant something different?

Sorry man, saw your next post and got all the answers I needed 🙂 Thanks for the tutorial!

author

Ahh okay. No problem. 😉

Paul, great tutorial. Just what I was looking for. Here’s a couple fun questions for you:

1.) My site *has* to be built for iphone and ipad. Is there any way to allow people to scroll through the images on these devices? I’m still learning to understand safari’s capabilities.

2.)What would be the best way to not allow these images to be linkable. I just want them to scroll for info, not to link to the post.

Thanks again for the effort. I’m glad I found your site. Suggested from Kathy through Thematic.

author

Hi,

No worries. Glad you liked it.

I honestly have no idea. Sorry. I think that would be one for the guys/gals who built Nivo. Although Nivo doesn’t use Flash so I would imagine that it would work okay on iPad/iPhones although I am an Android guy so can’t confirm that.

To remove the link you just need to take out the hyperlink from the code so:

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>

1	<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb'); ?></a>

Would become:

<?php the_post_thumbnail('nivothumb'); ?>

1	<?php the_post_thumbnail('nivothumb'); ?>

I think that would work okay.

yeah, not really sure why I had to ask that. I think I was losing it at that point… works pretty well on the iphone/ipad. I’ll post the site when it launches. thanks again!

author

No worries. Good to know it works well on the ipad/iphone too. 😉

i’m starting to look more at iphone/ipad ready development too (also difficult b/c i don’t have any sort of web phone). i believe nivo works w/ safari just fine. the problem (imo) would be serving up large images and lots of scripts/styles to a mobile site… will make it hella slow to load. i haven’t figured out how to mitigate that yet.

author

Can’t speak for the iphone/ipad but Safari on a android phone is insanely fast even with multiple scripts. It obviously depends on the phone (I have a HTC Desire HD with a 1Ghz Snapdragon processor) but it seems to handle things suprisingly well for such a little device.

good to know, paul! currently being abroad i’m def not doing any web phone stuff, but i am pretty resistant to the idea. when i can finally manage to drag myself away from the computer i want to actually be AWAY! 🙂

author

I know what you mean. I guess I’m just addicted. 😛

Older Comments

Newer Comments

Downloading Nivo Slider

Installing Nivo Slider

Creating Nivo Slider’s HTML Markup

Initializing Nivo Slider

All Done!

Follow Me

Categories

Recent Posts

Recent Comments

I'll keep your WordPress site up-to-date and working to its best.