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

Thx for the article. I’m trying to use this with a custom post type. When I do, it no longer displays the page content. It shows the slideshow and a blog type list of posts – which are the slide posts?

Check it out: http://bit.ly/fOtLvS

Please help! 🙂

author

Hi Andre,

Could you provide me with the code you have in your template using something like pastebin. I can only assume something is happening to do with your post loops, but without seeing the entire template I can’t be sure.

http://pastebin.com/uHsBEauS

Yes, it’s something to do with the: the_post loop I think?

author

It is because your query is being overridden by the one or the slider. You’ll need to add another query_posts just before the if on your second post loop.

I’m on my phone at the minute so can’t really write code. If you are still having trouble key me know and I’ll give you an example tomorrow when I’m back in my computer.

Thx Paul,

I’ll give it a shot, I’m pretty new to writing PHP so I might not do it quite right. I’ll let you know shortly.

Thanks for your help!

like this: query_posts if (have_posts()) : ?

It gave me an Parse error: syntax error, unexpected ‘:’

Andre – I actually prefer using get_posts() b/c then i never have to worry about borking up the main query.

good example at the codex:
http://codex.wordpress.org/Template_Tags/get_posts

Thx Kathy,

Isn’t that what I did?

— SLIDER —

‘slides’)); ?>

Not Found

WordPress Loop:

<?php the_tags( ' Tags: ‘, ‘, ‘, ”); ?>

thanks in advance for the help!

no, b/c Paul’s tut calls for creating a new WP_Query object and your code uses query_posts, both of which monkey with the original query. i almost always use get_posts b/c it doesn’t cause trouble w/ the original query.

but paul accounted for the query shenanigans by storing a copy of the original query

$tmp = $wp_query;

and then when he’s done resets it

$wp_query = $tmp

this part isn’t in your code. since you are using query_posts i think you can just put wp_reset_query(); at the end of your featured loop

http://codex.wordpress.org/Function_Reference/wp_reset_query

i’ve never had much success w/ multiple queries, which is why i rec get_posts so hard

http://pastebin.com/e2EZNKn7

Check this out maybe I’m doing something really stupid.. lol thanks for the help.

see above post. try puting:

wp_reset_query();

right after your endif;

Kathy… You’re awesome. thank you!

Worked like a charm! wow… I’ve spent way to many hours reading and failing on this.. lol I actually read about this kind of option but didn’t think it was what I needed..

Anyway, thanks Paul and Kathy… Big help so excited about using this, especially with custom post types! Super cool!

Yeah that open close thing is sweet! I hate to ask, but one last thing…

How do I up the amount of slides that are displayed? Right now by default it must be only 5?

jQuery(window).load(function() {
jQuery(‘#slider’).nivoSlider({
effect:’fade’, //Specify sets like: ‘fold,fade,sliceDown’
slices:15,
animSpeed:500, //Slide transition speed
pauseTime:6000,
htmlCaptions: true,
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: ‘.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
lastSlide: function(){}, //Triggers when last slide is shown
afterLoad: function(){} //Triggers when slider has loaded
});
});

is in my header.php

lol- that is actually the name of my website (kathyisawesome)… except it never became the portfolio/blog it was supposed to be and is only a sandbox.

you are being limited to 5 b/c that is probably the number you’ve set in your WP settings (reading options > show X number of posts per page)

go back to the codex young jedi-

http://codex.wordpress.org/Function_Reference/query_posts

adjust your query w/ the posts_per_page parameter and you can have it be any number you like

lol! Once again.. awesome.

query_posts(array(‘post_type’=>’slides’,’posts_per_page’ => -1));

worked like a charm

author

Thanks Kathy, I had to get some sleep so thanks for helping out Andre.

No problem Andre. As Kathy said I’d always recommend using WP_Query or get_posts but as long as you remember to reset the query you shouldn’t have any problems.

ps- paul, do you think you could do a tutorial on that open/close thing you have going on w/ your front page? that is pretty neat.

author

I can & I shall. I’ll try and get it done later today for you. 😉

This was a great tutorial. Thanks! I have one question though. Is it possible to have the slider target the most recent post from 4 different categories? I’ve been looking but can seem to find anything on it.

author

Hi Kyle,

I can’t think of an easy way to do it.

I think the only way you can do it is the awkward way. You would have to use 4 different loops. So for example:

<?php
query_posts('cat=1&posts_per_page=1');
//standard WP loop starts & ends here

query_posts('cat=3&posts_per_page=1');
//standard WP loop starts & ends here

<?php

query_posts('cat=1&posts_per_page=1');

//standard WP loop starts & ends here

query_posts('cat=3&posts_per_page=1');

//standard WP loop starts & ends here

and so on. I know it’s a pain, but it’s the only way I know of doing it.

Hope that helps.

It looks easy but somewhere along the line I’ve gone pear shaped. Have a feeling it’s something to do with how I’m calling the scripts in Thematic. Best I’ve been able to do is get the images stacked on top of each other.

define('JS',get_bloginfo('stylesheet_directory') );

// Enqueue Javascripts
function my_scripts() {
if ( !is_admin() ) {//use google's jquery
	wp_deregister_script( 'jquery' );
	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js');
	wp_enqueue_script('jquery');
	wp_enqueue_script('nivoslider', JS .'/js/jquery.nivo.slider.pack.js', 'jquery', '2.1');
	}
}
add_action('template_redirect', 'my_scripts');

//load css nivo styles
function slide_styles(){
if ( !is_admin() ) {
	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('teplate_redirect', 'slide_styles');

define('JS',get_bloginfo('stylesheet_directory') );

// Enqueue Javascripts

function my_scripts() {

if ( !is_admin() ) {//use google's jquery

wp_deregister_script( 'jquery' );

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

wp_enqueue_script('jquery');

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

}

add_action('template_redirect', 'my_scripts');

//load css nivo styles

function slide_styles(){

if ( !is_admin() ) {

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('teplate_redirect', 'slide_styles');

and the calling of the script

function my_script(){ 	?>

	<script type="text/javascript">
	//<![CDATA[

	jQuery.noConflict();
	jQuery(document).ready(function($) {

<?php if(is_front_page()){ ?>
	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

<?php } ?>

	}); //end document ready functions
});

	/* ]]> */
	</script>

<?php }
add_action('template_redirect', 'my_script');

function my_script(){ ?>

//<![CDATA[

jQuery.noConflict();

jQuery(document).ready(function($) {

<?php if(is_front_page()){ ?>

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

<?php } ?>

}); //end document ready functions

});

/* ]]> */

</script>

<?php }

add_action('template_redirect', 'my_script');

and my template page(I put an extra Div in there{slide-wrapper) to stop the images being stacked on top of each other but makes no difference if there or not.

<?php
/*
Template Name: Front Page

*/
?>

<?php get_header(); ?>
	<div id="content" >

         <div id="slider-wrapper">
          <div id="slider">
        	<?php
				$tmp = $wp_query; $wp_query = new WP_Query('posts_per_page=5&category_name=slide');
				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>
	    </div> <!-- /content -->

<?php get_footer(); ?>

<?php

Template Name: Front Page

<?php get_header(); ?>

<?php

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

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

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

</div>

</div>

</div>

<?php get_footer(); ?>

Most is just copied code from you, the other part is following Kathy’s suggestion on ThemeShaper forum. Also tried wp_print_scripts, wp_footer, spent time reading the codex.

author

Hi Derek,

Any chance you have a version live on the web that I can see, it makes debugging a little easier?

The stacking generally means that the Nivo Javascript isn’t being ran. I would say check your paths to the Nivo JS file just in case. Also check your script registration for jQuery. You have a hyperlink inside it when you only need the URL to Google’s jQuery script on their CDN server generally https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js.

If none of that helps let me know & I’ll see what else I can come up with.

Just put this up live on my site, chops the images in funny places…..

Not sure how the hyperlink appeared here as I haven’t used one

wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js')

1	wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js')

Here’s what I have so far live http://drecart.com/contact/client-side/playground/ password is; nivoslider

Looks like a JS issue.

That a href appears when i use the [ php ] here. You can see the combo of yours and Kathy’s code here
http://themeshaper.com/forums/topic/wp_enqueue_scriptjsfunction

author

Well I was going to say that it is because the script to init Nivo is missing, but as you have it inside the is_front_page() conditional it won’t be there because that isn’t the front page.

I take it the script is there when it is the front page? Other than that problem I can’t really see anything wrong other than that you have two versions of jQuery attached.

Nearly forgot, you have some stunning photos on your site. Love them all. Especially the macros & the model photos.

I’ll go back to testing locally as the Playground page did make a slight mess of my site. The only reason I started to learn code(well copy/paste) is due to my Photography. I’ll try and work out the error Kathy has pointed out below.

author

No problem. You have some stunning photos.

Let me know if you still need any help. I’ll try my best to help you out. I’m sure Kathy might be around to help too. 😉

chrome’s dev tools say you have this in your source:

[code] <script type="text/javascript">
//<![CDATA[

jQuery.noConflict();

}); //end document ready functions

});

/* ]]> */
</script>
[/code]

which is producing an “unexpected token” error b/c things aren’t opening and closing correctly. this could be breaking the rest of the scripts on the page.

author

Ahhh yes, just saw that in Firebug… Completely missed it. Thanks for adding that Kathy. 🙂

you also need the nivo CSS unless you have copied it into your own style.css

Thanks Paul, I managed to get this going locally and will have a play with your Custom Captions tutorial now. Now to find a use for this Slider – only downside is it doesn’t like images in the Portrait orientation.

author

Yep, unfortunately I can’t think of many (if any at all) that can cope with both portrait & landscape images.

Good luck. 😉 Let me know if you need any help with that.

Thanks for your help once again Paul, I have a working model running now – http://thegoldcoastcreative.com/ I’ll have to look in to getting it to hide until it’s fully loaded(I did see you reply to that somewhere along the way)

author

No worries Derek. 🙂

Hey all,

First, thx to all the ppl for all the great help form this site!

I’m trying to make wordpress allow for custom linking of slides through wordpress – for example, when I upload a new “featured image” I’ve done this by adding some code to the functions.php.

 // Define Slider Post Type
add_action( 'init', 'create_post_type' );
function create_post_type() {
  register_post_type( 'slides',
    array(
      'labels' =&gt; array(
        'name' =&gt; __( 'Slides' ),
        'singular_name' =&gt; __( 'Slide' )
      ),
	  'menu_position' =&gt; 7,
      'public' =&gt; true,
	  'supports' =&gt; array('title','thumbnail')

    )
  );
}
add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );
add_image_size( 'slider-image', 918, 324, true ); // Slider image. Crop true

// Define Slider Post Type

add_action( 'init', 'create_post_type' );

function create_post_type() {

register_post_type( 'slides',

array(

'labels' => array(

'name' => __( 'Slides' ),

'singular_name' => __( 'Slide' )

'menu_position' => 7,

'public' => true,

'supports' => array('title','thumbnail')

)

);

}

add_theme_support( 'menus' );

add_theme_support( 'post-thumbnails' );

add_image_size( 'slider-image', 918, 324, true ); // Slider image. Crop true

I’m assuming it would be through a custom field of some sort?

Below is my code from home.php

Admin Edit: Your code here went missing as WP stripped it. You need to post it between

tags (without the spaces) so that WP doesn’t remove it.

thanks!

author

Hi Andre,

As I’ve said in your comment WP stripped your code so it’s kinda hard to answer properly.

However it looks like you were creating a custom post type for your slider to show? You would just need to upload an image to your post set it as the featured image & then set the query for your slider to show only posts from your slides custom post type. Something like:

<?php
query_posts('post_type=slides&posts_per_page=5');
if(have_posts()) :
    while(have_posts()) :
        the_post();
?>
        <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('slider-image'); ?></a>
<?php
    endwhile;
endif;
?>

<?php

query_posts('post_type=slides&posts_per_page=5');

if(have_posts()) :

while(have_posts()) :

the_post();

<?php

endwhile;

endif;

Something like that should display only posts from the slides post type as long as you place that in the middle of your targeted slider container all should work fine.

Hey Paul,

Thanks for the help!

That’s exactly right. I’ve used a custom post type to add slides.

Is there a way to add a custom link to each slide? Rather then it linking to the post’s permalink?

For example, one slide might link to google.com

Thoughts? Help? 🙂

thanks in advance! You all are amazing!

author

You would have to use a custom field. You would change the code on line 7 to something like:

if($cLink = get_post_meta($post->ID, 'customLink', TRUE)) :
?>
<a href="<?php echo $cLink; ?>"><?php the_post_thumbnail('slider-image'); ?></a>
<?php
else :
?>
<!-- HTML to show if no custom link is found -->
<?php
endif;
?>

if($cLink = get_post_meta($post->ID, 'customLink', TRUE)) :

<?php

else :

<?php

endif;

Using ‘customLink’ as the field key & changing the HTML comment I’ve added to whatever you’d like to show if no custom link can be found for the post.

Hope that helps & no problem.

When I added this it no longer displays the slider 🙁

Here’s what I did with the addition of your above code:

<!-- START SLIDER -->

<div id="slider-wrapper">
  <?php query_posts(array('post_type'=>'slides','posts_per_page' => -1)); ?>
  <?php if (have_posts()) : ?>
  <div id="slider">
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <?php
				 
            if($cLink = get_post_meta($post->ID, 'customLink', TRUE)) :
?>
    <a href="<?php echo $cLink; ?>">
    <?php the_post_thumbnail('slider-image'); ?>
    </a>
    <?php
else :
?>
    <!-- HTML to show if no custom link is found -->
    <?php
endif;
?>
    <?php endwhile; ?>
    <?php else : ?>
    <h2>Not Found</h2>
    <?php endif; ?>
  </div>
  <?php endif; ?>
  <?php wp_reset_query(); ?>
</div>
<!-- END SLIDER -->

<?php query_posts(array('post_type'=>'slides','posts_per_page' => -1)); ?>

<?php if (have_posts()) : ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php

if($cLink = get_post_meta($post->ID, 'customLink', TRUE)) :

<?php the_post_thumbnail('slider-image'); ?>

</a>

<?php

else :

<?php

endif;

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>

<?php endif; ?>

</div>

<?php endif; ?>

<?php wp_reset_query(); ?>

</div>

original code:

   <!-- START SLIDER -->
          <div id="slider-wrapper">
          <?php query_posts(array('post_type'=>'slides','posts_per_page' => -1)); ?>
            <?php if (have_posts()) : ?>
            <div id="slider">
              <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
              <?php
				if ( has_post_thumbnail() ) {
					
						the_post_thumbnail('slider-image');
					}
							
			?>
              <?php endwhile; ?>
              <?php else : ?>
              <h2>Not Found</h2>
              <?php endif; ?>
            </div>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
          </div>
          <!-- END SLIDER -->

<?php query_posts(array('post_type'=>'slides','posts_per_page' => -1)); ?>

<?php if (have_posts()) : ?>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php

if ( has_post_thumbnail() ) {

the_post_thumbnail('slider-image');

}

<?php endwhile; ?>

<?php else : ?>

<h2>Not Found</h2>

<?php endif; ?>

</div>

<?php endif; ?>

<?php wp_reset_query(); ?>

</div>

author

That’s because none of your posts have the custom field in them yet.

You need to place some alternative code to use inside where I added the html comment. Even if its just the_post_thumbnail again.

genius.

That worked.. lol Now, to learn how to add a custom field… I’m assuming it will be in the same function.php code that I already have?

thanks!

Got it!

thanks for all the help!!! Works like a charm!

Love this site!

author

No worries. Glad to have been able to help.

Hi
Thanks for this post. I am trying to setup NivoSlider but I haven’t got it working yet using your instructions or those from Dev7Studio/G Pellegrom(author/creator). I’m not sure why the instructions are different either-a bit confusing (no mention of adding code to the functions.php from Dev7-but I have tried both methods with no success yet. I am developing the site in MSWebMatrix localhost-I presume it can cope with using jQuery?!-so many variables!). I tried changing size(height) of it & in Firebug I get css lines:
element.style {
background: url(“http://localhost:52047/wp-content/themes/AMWSv1/images/slide_1.jpg”) no-repeat scroll 0 0 transparent;
height: 246px;
position: relative;
}
#slider {
background: url(“images/loading.gif”) no-repeat scroll 50% 50% transparent;
float: right;
height: 146px;
width: 618px;
}
style.css (line 1436)
.nivoSlider {
position: relative;
}

I cannot see a style rule for element.style in my csss file-something WordPress/jQuery has added-& why is the height at the original size-not to 146px I changed it to!?

Maybe oneday I’ll get this working
Best wishes 🙂

author

Hi Richard,

The instructions are different because I like to attach JS files the way the WordPress dev’s recommend via the enqueue system. Also my example shows how to use the new WP thumbnail system to display the images.

The element.style is used in FireBug to show that it is an inline style. It’s how Nivo displays it’s images.

You have changed it’s height, but you also need to change the height written in the #slider CSS.

Hi Paul
Thanks for your prompt reply.
I had actually changed the css height value but I copied & pasted from firebug into the comment area here & the strike thru lines were not displayed (enter code here in tags?-ha-I just noticed the comment instruction above:
Please enclose code in [lang] tags. For example

 echo 'hello world';

1	echo 'hello world';

-that should work

Anyway I looked at WP codex add jQuery & as ever didn’t understand it. I have difficulty fully understanding lots of PHP/WordPress code-thankfully I get most of the general idea and can usually put the right code in the right place to work! But so far I cannot with NivoSlider, which still is not working despite my spending hours to try to get it working! (It took a while to get it to display in a static demo.html file but I got it going-now why can’t I get it working in my WP theme?).

Best wishes

author

I’m not sure why it isn’t changing height. Normally I just throw in some images (preferably all the same dimensions) and it works, lol. I’m not even sure you need a height in there.

Wow. I added Thematic Child theme this Nivo. This is Categorized solution. How to create 2 option
1: Choose post category.
2: Add Image Url, Caption, Link etc…

Like a Premium theme? Any idea guys.

author

I was going to say “errrm. Pardon?” but if I understand you correctly then it’s outside the scope of this tutorial.

To create a theme admin page is complicated, there is one or two tutorial here on Return True but some things may have changed a little & I haven’t had time to venture into theme development again to check.

😀 ok i understood. Thanks your tutorial give me direction. I will make myself like premium. Thanks.

Uranbold

Great Tutorial. helping me out a lot with a project I’m working on.

One issue I’m coming across is that while there are only 3 possible images that the slider can pull from it’s including a blank 4th slide.

Sorry I’m currently on a localhost test so I don’t have a live example at the moment.

author

Hi Don,

The only thing I can think of is that you are getting an empty post in your loop.

You could try a little debugging and see if you get a empty 4th result in your posts array.

You you add this:

print_r($wp_query);

1	print_r($wp_query);

just after:

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

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

it will look a mess, but if you view your source code it will look a little neater. Look for the array/object item called posts and check to see if the array inside counts to 3 (as the computer counts from 0 instead of 1) instead of 2.

You’ll be able to see what that mystery entry contains too, hopefully it might turn out to be a mis-categorized post or something like that. I say hopefully as it’s the only explanation I’ve ever come across for strange blank items when I’ve been setting up Nivo, lol.

Really wierd, it shows only two arrays but there’s still an extra dot in the slider. here’s my php and the array that was spit out.

[code]
<?php
$tmp = $wp_query;
$wp_query = new WP_Query(‘post_type=slides&posts_per_page=5&order=ASC’);
print_r($wp_query);

if(have_posts()) :
while(have_posts()) :
the_post();
?>
<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(450,350)); ?></a>
<?php
endwhile;
endif;
$wp_query = $tmp;
?>
</div><!– close #slider –>
[/code]

[code]
[request] => SELECT SQL_CALC_FOUND_ROWS wp_2_posts.* FROM wp_2_posts WHERE 1=1 AND wp_2_posts.post_type = ‘slides’ AND (wp_2_posts.post_status = ‘publish’ OR wp_2_posts.post_status = ‘private’) ORDER BY wp_2_posts.post_date ASC LIMIT 0, 5
[posts] => Array
(
[0] => stdClass Object
(
[ID] => 109
[post_author] => 1
[post_date] => 2011-05-25 18:50:30
[post_date_gmt] => 2011-05-25 18:50:30
[post_content] =>
[post_title] => test2
[post_excerpt] =>
[post_status] => publish
[comment_status] => closed
[ping_status] => closed
[post_password] =>
[post_name] => test2
[to_ping] =>
[pinged] =>
[post_modified] => 2011-05-25 18:50:30
[post_modified_gmt] => 2011-05-25 18:50:30
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://localhost/wordpress/tradewinds/?post_type=slides&p=109
[menu_order] => 0
[post_type] => slides
[post_mime_type] =>
[comment_count] => 0
[filter] => raw
)

[1] => stdClass Object
(
[ID] => 116
[post_author] => 1
[post_date] => 2011-05-27 20:12:25
[post_date_gmt] => 2011-05-27 20:12:25
[post_content] =>
[post_title] => Containers
[post_excerpt] =>
[post_status] => publish
[comment_status] => closed
[ping_status] => closed
[post_password] =>
[post_name] => containers
[to_ping] =>
[pinged] =>
[post_modified] => 2011-05-27 20:12:25
[post_modified_gmt] => 2011-05-27 20:12:25
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://localhost/wordpress/tradewinds/?post_type=slides&p=116
[menu_order] => 0
[post_type] => slides
[post_mime_type] =>
[comment_count] => 0
[filter] => raw
)

)

[post] => stdClass Object
(
[ID] => 109
[post_author] => 1
[post_date] => 2011-05-25 18:50:30
[post_date_gmt] => 2011-05-25 18:50:30
[post_content] =>
[post_title] => test2
[post_excerpt] =>
[post_status] => publish
[comment_status] => closed
[ping_status] => closed
[post_password] =>
[post_name] => test2
[to_ping] =>
[pinged] =>
[post_modified] => 2011-05-25 18:50:30
[post_modified_gmt] => 2011-05-25 18:50:30
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://localhost/wordpress/tradewinds/?post_type=slides&p=109
[menu_order] => 0
[post_type] => slides
[post_mime_type] =>
[comment_count] => 0
[filter] => raw
)

)
[/code]

Sorry about starting a new thread. Didn’t mean to.

author

Very strange. If you check your HTML source is the HTML for another item there? That’s the only reason I can think Nivo would think there is an extra item.

Got it. For some reason the third dot was caused by the Disqus comment plugin. Guess I’ll go without that plugin for now it seems.

Thanks for the help.

author

Wow? Really?! I have no idea why that would be.

The only thing I can suggest (if you need, or still want to use the plugin) is to see if you are able to get any support from the author of the Disqus plugin as I doubt that should be happening.

Thanks & Good Luck. 🙂

Don’t need it. just thought it might be nice to have. Yea I’ll hit up Discus to see if they have a solution. Maybe it’s cause I’m set up using custom post type rather than just a normal post stream but anyway.

I shall post here again if I figure out the solution so others can benefit.

Thanks

author

Hope you manage to find something out. I’m not sure how it interacts with custom post types so can’t say for sure.

Thanks. I’m sure a lot of people will find it helpful. 🙂

Got in touch with Disqus and they said to enable the ‘Comment Counts’ checkbox under Advanced Options in the Disqus plugin and low and behold it worked and cleared up the “extra slide” problem

author

Wow. Very strange problem. Thanks for coming back with the solution. 🙂

Ok, here’s a thought… How would I go about being able to add a video in the nivo slider? For example two slides are images, and one is a vimeo video with some text to the left…

So basically like this: http://demo.woothemes.com/kaboodle/ – scroll through the slides.. I want to do something like this using nivo and wordpress. 🙂

thanks in advance!

author

Unfortunately Andre there isn’t a way to get videos in with Nivo. Nivo is, as far as I’m aware, was only designed to be used with images as it splits them up using a clever mixture of CSS & Javascript. That wouldn’t be possible with a video.

I believe the script that the WooThemes theme uses is jQuery Cycle which can be used to make a slider out of images, text, videos, even a combination of them.

thx!

author

No problem Andre.

Hi there. I have done all of this, but nothing is showing up. Gutted. Is there any help with what may be going wrong?

Near the end of this tutorial you say:

“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”

Can you please give the exact code that is needed to do that, as I’m easily confused, and doing it the other way doesn’t seem to be working.

Hope you can help,

author

Hi Andrew,

if the code doesn’t work by pasting it on the page inside <script type=”text/javascript”></script> tags then there isn’t much chance it will work in an external file either.

If you want to try though it would look something like:

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');
    wp_enqueue_script('nivosliderinit', get_bloginfo('stylesheet_directory').'/js/nivo.init.js', array('nivoslider','jquery'), '1.0');
}
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');

wp_enqueue_script('nivosliderinit', get_bloginfo('stylesheet_directory').'/js/nivo.init.js', array('nivoslider','jquery'), '1.0');

}

add_action('init', 'theme_add_scripts');

Assuming the JS file you create is called nivo.init.js.

If you are still having trouble let me know & I’ll do what I can to help. If you can provide a URL so I can debug it helps a lot.

Thanks Paul. I now have it working, but it doesn’t begin scrolling through the slides until I click next. Unless I do that, it remains static on the first slide.

Do you have any ideas what the problem could be?

Thanks again,

Andrew.

The site is dev with a password at the moment, so don’t want to post password publicly

author

Without the ability to use a dev console like FireBug or Chrome Dev tools, I haven’t a clue what it could be, sorry.

You can always contact me via the contact form if you’d like me to take a look, but without being able to debug I can’t think of anything off the top of my head.

The only thing I know that stops the slider (other than an error) is hovering over a slide. 🙁

Thanks, have sent a message via the contact form

There is just nothing showing at all now 🙁

author

I’ve replied to your email, as you know, so hopefully we can figure out what is going on. 😉

I love this slide and I’m happy you made a tutorial on integrating it into WP. I have one question — say for instance I want to not use ‘featured’ images for the slides but rather have a section in the dashboard where I can enter the html for the images and essentially have more ‘control’ over what goes in the slide. Would this be difficult to achieve? If you can point me in the right direction, I’d really appreciate it.

I followed the directions and set this up. However, sometimes when the slides transition to the next, the new slide shifts down a bit. I took a screenshot to clarify my point. Any ideas on what can be wrong?

Sorry, I forgot the screenshot.

http://i.imgur.com/jAF8w.jpg

I fixed this by repositioning (position:absolute) the control nav.

author

Hi,

I wasn’t sure why the slide problem would have been happening (not without a link to debug with anyway) so glad you found a solution.

As for the dashboard page, it would be difficult without knowledge of how to create your own WordPress admin page.

I’m assuming by HTML you just mean the image path, as Nivo isn’t able to accept HTML, jQuery Cycle is more suited to that sort of thing.

Normally you would have posts or pages provide the data for Nivo (images + link) but it is an interesting idea to use a dashboard to set up a sort of static slider that you change manually.

Hey nice tutorial!

I used your method for beta version of http://www.dekeeg.net and it worked like charm.

I had some issues about image sizes, when you upload an image of 400 x 300 at featured image to slider which is 978 x 320, it looks cropped as bad image.

my function is

add_image_size('nivothumb', 978, 320);

1	add_image_size('nivothumb', 978, 320);

I tried to experiment with TimThumb… well it gaves me a lot of questions because the original thumbnails at this slider without “add_image_size” function, every images are originated by 150 x 150 and the scaled image at slider looks horrible…

tl;dr version:

Do you have an idea to resize images for this slider?

My regards!

author

Hi Ivan,

It’s an extremely bad idea to scale smaller images up. WordPress will not do it & TimThumb is a resource hog that will try to do it, but it won’t work very well as GD’s resize algorithm isn’t the best.

The best advise I heard came from my sister who is a graphic designer. She said: “Don’t use images smaller than your slider.” It’s a good idea, I guess. 😆

Ah! i exactly tought about this, my friend is too lazy to scale images using photoshop before to upload the images.

Thanks for reply!

author

Unfortunately there is no way to get around it. As long as the images are too large it’s fine and you don’t need to scale them in photoshop.

Anyone find a way to do 100% browser width with nivo?

author

Hi Andre,

since Nivo only uses images for it’s slides I’m not sure you could.

Something like jQuery Cycle could work as you could have a 100% div with an image inside. The div would have a repeatable background image & the image would be of a certain width that blends with the background. It would give the illusion of being full width, while staying accessible across many resolutions. You can see a version of a full width slider I did with jQuery Cycle or a full width Slider with jQuery Tools Scrollable.

I am revisiting NivoSlider again (see my earlier comments-I did eventually get NS html/css code working).
This time I am trying the free WordPress plugin version & it installed but failed to activate saying no valid header present. I’ve had that error before & it has been due to wrong directory structure before. I will now try & fix this but I may resort to using another jquery slider as NivoSlider seems just to have too many problems for me!

I realise now the NivoSlider I have downloaded for free is not the WordPress plugin!
It is the JQuery version I have already battled with.
The WordPress NivoSlider plugin version is not free.
I apologise for this & I will now try & hard code NS into my WPtheme & hope I can remember how I did it before!

author

Hi Richard,

It can be a little difficult to get Nivo to work in WordPress, that is why I created this tutorial to help those who are having trouble understanding & don’t want to pay for a plugin when it can be done for free.

If you do have any problems at all getting it to work please feel free to leave a comment or drop me an email via the contact form & I’m happy to help out as much as I can.

Hi,

I was wondering if you could help me get my featured slider working on my homepage. I’m using a theme which has a built-in slider. Only 1 of the posts i tagged appears on the slider, but the slider doesn’t move to the remaining tagged posts. Thanks

author

That depends on what slider it is and what theme you are using. All sliders work differently so without the name of it I’m afraid I can’t help you.

Hello Paul. As everyone have mentioned here – great post/tutorial indeed. I found this really handy and is working like a charm for what I want to do. And I have another project where I want to change the slider to this set up. There is one thing though…
For the caption I noticed you used the get_the_excerpt() function. What is the reason behind this?
Basically, when I add text for the caption (WP post) I want the hyperlinks to show that is added in the post. As far as I understand, the excerpt function strips tags.
If I replace get_the_excerpt() in your example code with the_excerpt() or the_content(), the slider doesn’t work anymore.
Do you know how to go about to have hyperlinks showing in the caption?
Thanks again!

Sorry :/ its going all red because I meant to say that I need [a] tags to work for the caption. Thanks.

author

Hi there,

You would probably want to use get_the_content instead of get_the_excerpt that should pull back all the HTML such as hyperlinks.

The reason that I don’t use the normal function is they output the result, we want to return it to PHP for later use. That’s why it fails if you try the normal functions.

Thank you for the quick response, amazing!! That did the trick.
I don’t know anything about the difference (yet) of the 2 functions, with and without get_ – need to check that out!

author

Glad that worked.

The main difference is simply that the_ outputs to screen, and get_ returns to a variable for use in code.

Aaah ok. Is that why you need [.nivo-html-caption { display:none; }] ?
This is great, something new I am aware of in WordPress. Thanks for that too!

author

The CSS style is used by Nivo Slider to hide all slides on page load. They are later made visible by the Javascript as each slide is shown.

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.