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

I’m desperately trying to stop the Nivo js writing the height into the as an inline style. It seems to take the height of the biggest image and use that which overrides the css set height.

I’ve read that you just comment out the auto resizing lines of the js but, if I do that, it doesn’t work at all.

Any ideas?

Many thanks in anticipation.

author

Hi Tim,

As far as I’m aware Nivo slider can only take images of consistent heights. I know Malup’s jQuery Cycle & the Anything Slider allow different height images, but as far as I’m aware Nivo only allows a fixed height.

Hi Paul

I agree that it works best with fixed size images but it also works (ish) if you throw in variable sizes. I think it looks for the biggest and tries to adjust.

This seems to be the code:

//Get img width & height
            var childWidth = child.width();
            if(childWidth == 0) childWidth = child.attr('width');
            var childHeight = child.height();
            if(childHeight == 0) childHeight = child.attr('height');
            //Resize the slider
            if(childWidth > slider.width()){
                slider.width(childWidth);
            }
            if(childHeight > slider.height()){
               slider.height(childHeight);
            }
            if(link != ''){
                link.css('display','none');
            }
            child.css('display','none');
            vars.totalSlides++;

//Get img width & height

var childWidth = child.width();

if(childWidth == 0) childWidth = child.attr('width');

var childHeight = child.height();

if(childHeight == 0) childHeight = child.attr('height');

//Resize the slider

if(childWidth > slider.width()){

slider.width(childWidth);

}

if(childHeight > slider.height()){

slider.height(childHeight);

}

if(link != ''){

link.css('display','none');

}

child.css('display','none');

vars.totalSlides++;

The end result is a height written into the inline style in the wrapper div. This is what is a tad frustrating.

Cheers

Tim

author

Hi Tim,

That’s what I mean. The code of Nivo Slider is designed to work with the largest image available., that’s why I tend to choose a different slider should I need a slider capable of different heights.

Hi Peter

I’ve started to play with Coin Slider. Nice tidy code. But the same issue with fixed size images. I’ve decided to spend the time resizing/cropping rather than hacking code. If you can’t beat them, join them!

Thanks for your interest.

Tim

author

Hi Tim,

the only other slider I know capable of variable sized slides is jQuery Cycle with the slideResize option set to false.

If you need a slider though I’d recommend using fixed heights & just use the WordPress thumbnail system to crop your images. Using a variable height slider can cause all sorts of problems with document reflow as I found out recently when trying to make a one for a client. We eventually gave up as it looked awful.

Having massive conflicts when activating wordpress plugins.. my slider stops working soon as any plugins are activated.. any way to resolve this issue.. it’s driving me mad something so simple is taking up so much of my time.

Thanks in advance

author

Hi,

I’m afraid that could be anything. Best thing to do is narrow down which plugin causes it by disabling them all and activating them one, by one, until the problem occurs.

Got this method working on a WAMP WP installation on windows 7 machine, then I copied the theme folder to my MAMP WP installation at home and the slider is inactive.

author

Hi Vlad,

That really could be anything to be honest. Although as far as I know WordPress should take care of the differences between WAMP and MAMP. I developed the code for this on my WAMP local install & then moved it to my server which is a LAMP install.

Funny enough this morning I went to work on my WAMP WP install theme, and now its not working here either. I keep getting this error. “jQuery(‘#slider’).nivoSlider is not a function”. Ive scoured the interwebs for a solution, but no luck. jQuery is there and running version 1.6.1. I can do a jQuery alert call, and it responds.

Hello Paul
As mentioned before, excellent tutorial. I made great use of this at the following website: http://www.forsythgroup.com – everything works like a charm.
There is one thing though… when the homepage, where the slider is load, it loads all the images of the slider first before showing only the top one in the slider only.
Is that to do of the placement of the jQuery and/or the size of the images that could be to big. Or any other ideas?
Thanks.

author

Hi Semblance,

The best way to fix that problem is to set the overflow of your #slider element to hidden. It’s just caused by jQuery not having loaded the slider yet. It’s unavoidable so the best solution is to hide the visual effect using overflow hidden. 😉

Also, don’t know if you know, but when you hover over the slider there is a small ‘prev next’ appears in the corner. Looks like the next & previous links are enabled but haven’t yet been styled. I realize you may still be busy, but thought I’d better mention it just in case. 🙂

Aaah yes, of course! That did the trick.
Once again, thank you for your (very) quick response!
And… also for pointing out the other little thing…

author

No problem. 🙂

Hey Guys,

Posed this question a while back, found a fix on my own, but then i lost it. Trying to do a if-elseif-else statement with Nivo and wordpress header-image. to allow for switching between slider and static header.

Here’s my code. Any help would be greatly appreciated!

	<?php
					// Check if this is a post or page, if it has a thumbnail, and if it's a big one
					if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&
							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 );
					elseif ( get_header_image() ) : ?>
						<img src="<?php header_image(); ?>" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" alt="" />
					<?php endif; ?>
<div id="slider">
<?php
$tmp = $wp_query;
$wp_query = new WP_Query( array ('post_type'=>'page','post__in'=>array(1814)));
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 -->

<?php

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

if ( is_singular() && current_theme_supports( 'post-thumbnails' ) &&

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 );

elseif ( get_header_image() ) : ?>

<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( array ('post_type'=>'page','post__in'=>array(1814)));

if(have_posts()) :

while(have_posts()) :

the_post();

<?php

endwhile;

endif;

$wp_query = $tmp;

</div>

Right now it replicates the first image in my slider array as a banner. Pretty sure i have to wrap the nivo code in an Else statement, but not too sure how to do that.

author

You would indeed just wrap them in an if-else, but it all depends on what the variable is that will be part of the conditional & determine what action it is to take?

Is it a custom field? or something like that?

Hi. Thanks for posting this article. I am learning how to create wordpress themes and this has been helpful.

Unfortunately I am not getting the slider to load at all. It just displays the pictures from the post, but looks like the jquery is not functioning? Not sure.

Could you please help. Here is my code

Admin Note: Cleaned up as the code went a little pear shaped.

I am so sorry for emailing so much. Could not figure out how to put script in tags. I also figured out what was going on. Not sure why but needed to add this jquery

“http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”

thanks again!!

author

Hi Josh,

It looks, from what I could see of the code before WordPress chewed it up, as if you didn’t have jQuery linked to your page. That would explain why adding the jQuery from the Google JS API solved your problem.

Excuse me, but how can I specify a maximium number of characters for get_the_excerpt() ?

@up I’m refering to this http://return-true.com/2011/02/using-nivo-slider-in-wordpress-with-custom-captions/ Sorry for wrong topic.

I did it with:
function new_excerpt_length($length) {
return 20;
}
add_filter(‘excerpt_length’, ‘new_excerpt_length’);

in the function.php. Sorry for disturbing 🙂

author

Hi Kaven,

no worries. I’m always here to help, well unless I’m asleep. 😉

Yep, that’s the simplest way to do it. 🙂

Well, if you are helpful so much ^^ I have another question. It’s about Post Topic get_the_title($post->ID) . Can I somehow add link to it? Like this one?

@Edit: Oh, forgot to add lang tag… (being newb)
________
Add link, like this one:

<?php echo get_permalink(); ?>

1	<?php echo get_permalink(); ?>

author

Do you mean add the permalink to the title? You would do it like this:

<a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a>

1	<a href="<?php echo get_permalink($post->ID); ?>"><?php echo get_the_title($post->ID); ?></a>

And the caption is not showing up

author

Hi Felipe,

I can’t really help without more information. Have you tried using this tutorial along with my other explaining how to show captions with Nivo?

I got the error, but it shows the name of the image, how to show the post title? And there’s something weird, I put it to display a thumbnail of 620×280, but is not generating images of 620. Someone has notion than can be error? My codes http://pastebin.com/V1e0U5CX
Thanks

author

I’m not sure why the images would be missing. The images may not be the correct size if you added the thumbnail size after the images were uploaded. If that’s the case you’ll need to reupload them, or use a thumbnail rebuild plugin to regenerate them.

Also, as stupid as it sounds, don’t forget to pick the image as a featured image in the post edit screen.

As for showing the title in the caption, that is also covered in the tutorial I liked to.

I tried to use the rebuild thumbnail and nothing. In functions.php :

if ( function_exists( 'add_theme_support' ) ) {
  add_theme_support( 'post-thumbnails' );
  add_image_size( 'homethumb', 260, 304, true );
  add_image_size( 'sliderthumb', 620, 280, true );
}

if ( function_exists( 'add_theme_support' ) ) {

add_theme_support( 'post-thumbnails' );

add_image_size( 'homethumb', 260, 304, true );

add_image_size( 'sliderthumb', 620, 280, true );

}

Really Strange :/ Thanks

author

I’m not sure, I’ve never really come across anything like that before.

Normally I just add those lines to my functions.php file (as you have), then if I already have images uploaded run a regen thumbnails plugin like Viper007Bonds.

If you upload a new image does it create the extra thumbnails?

Hi Paul,
Great tutorial but I’ve done something terribly wrong and lost my whole index page. Can you possibly tell me where I mis-followed your directions?

I’m working in a theme through wordpress and have no access to the actual .js files (long story) I have to fix this please!

thank you so much,
Christina

author

Hi Christina,

It honestly could be anything, if you don’t have a backup your best bet would be to go back through each line that you have changed as part of the tutorial, and try to make sure it looks correct.

Normally though if you lose your entire site it’s because there is an error in your functions.php file, however it depends on your servers settings for dealing with php errors.

after breaking my head all day, I stumble upn this and you just saved my life, THANKS!!!

author

No problem Rene, glad you found the tutorial helpful. 🙂

Does the code in functions.php change when you are using a child theme?

author

Hi Andy,

I’m not one for using child themes so I can’t be sure, but I don’t think it does change. I believe enqueue scripts works regardless of if you are using a child theme or not.

thank you for the tutorial.
What is custom-snow and slider.css?
is it possible to have thumbnails next to the slider?
http://www.dynamicwp.net/wp-content/uploads/2010/12/Nivo-Slider-Demos.jpg
thank you

author

Hi,

I’m not sure what you mean by ‘custom-snow’? slider.css would be the file containing the CSS styles for the slider, although in this case they were called nivo-slider.css & nivo-slider-custom.css.

To enable thumbnails you’d use the thumbnail from rel attribute feature. So you’d change the Nivo slider call to:

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...
		controlNavThumbs:true,
		controlNavThumbsFromRel:true,
		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...

controlNavThumbs:true,

controlNavThumbsFromRel:true,

keyboardNav:true, //Use left & right arrows

pauseOnHover:true, //Stop animation while hovering

captionOpacity:0.8, //Universal caption opacity

});

to the options when you call Nivo Slider, like in the tutorial. Then in your code for generating the images would be this:

<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();
$aid = get_post_thumbnail_id($post->ID);
$ainfo = wp_get_attachment_image_src($aid, 'thumbnail');
//change thumbnail to registered size you wish to use.
?>
            <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb', array('rel' => $ainfo[0])); ?></a>
<?php
    endwhile;
endif;
$wp_query = $tmp;
?>
</div><!-- close #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();

$aid = get_post_thumbnail_id($post->ID);

$ainfo = wp_get_attachment_image_src($aid, 'thumbnail');

//change thumbnail to registered size you wish to use.

<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('nivothumb', array('rel' => $ainfo[0])); ?></a>

<?php

endwhile;

endif;

$wp_query = $tmp;

</div>

Something like that should work, I think.

thank you I’ll test.
to return to custom-snow.css or mistake or error with the google translator, I was talking about nivo-slider-custom.css, where is this file?
thank you

author

Ahh, makes sense now. 🙂

It’s taken from Nivo’s website. I don’t know if they still provide it with their download now, it’s not essential though if you are adding your own styles. As long as you attach the main Nivo CSS all should run fine.

okay, I see, when downloading nivo jquery slider was in the folder demo (folder images ,folder script , index.html, style.css), the theme folder (folder default , folder orman, folder pascal) and jquery.nivo.slider.js, jquery.nivo.slider.pack.js, nivo-slider.css

I put the slider in this site http://contraversao.com/
I put to appear only 4 posts, however is showing 5.
My functions and index:
functions.php:
http://pastebin.com/dSmXKZdY
Index.php
http://pastebin.com/TuJmHPGN
What is wrong?

author

Hi Felipe,

It’s actually a known bug with WordPress that sometimes posts_per_page will not work. I’m sure someone out there knows why it happens, but I haven’t a clue. All I know is it normally only occurs when using a custom WP_Query object, and very rarely with query_posts.

To fix it though you could try the following:

add_filter('post_limits', 'my_limit_posts');
function my_limit_posts($limit){
    return "LIMIT 4";
}
$wp_query = new WP_Query('posts_per_page=4&category_name=destaque');
remove_filter('post_limits', 'my_limit_posts');

add_filter('post_limits', 'my_limit_posts');

function my_limit_posts($limit){

return "LIMIT 4";

}

$wp_query = new WP_Query('posts_per_page=4&category_name=destaque');

remove_filter('post_limits', 'my_limit_posts');

If you have PHP 5.3 (I think) you could do an anonymous functions, but to maintain compatibility I went for that instead.

Hope that helps.

Thanks. I put in functions.php http://pastebin.com/mEBaThFn And still got 5 posts http://contraversao.com/ :/

author

It has to go in place of your current WP_Query on line 11 of index.php. You can place the function in your functions.php file, but you would still need:

add_filter('post_limits', 'my_limit_posts');
$wp_query = new WP_Query('posts_per_page=4&category_name=destaque');
remove_filter('post_limits', 'my_limit_posts');

add_filter('post_limits', 'my_limit_posts');

$wp_query = new WP_Query('posts_per_page=4&category_name=destaque');

remove_filter('post_limits', 'my_limit_posts');

on line 11.

Sorry if i put in the wrong place, so, this (files) are just like that http://pastebin.com/fZPmvsvr http://pastebin.com/bxJpccuN but still appearing as if it had five posts on the slider http://contraversao.com/
And thanks so much for your help

author

Yep, that looks fine.

Not sure why that isn’t working. You could try doing this:

wp_reset_query();
query_posts(array('posts_per_page' => 4, 'category_name' => 'destaque'));
//have_posts() etc here

//place the next line after your post loop
wp_reset_query();

wp_reset_query();

query_posts(array('posts_per_page' => 4, 'category_name' => 'destaque'));

//have_posts() etc here

//place the next line after your post loop

wp_reset_query();

Like that http://pastebin.com/hpwLnPPZ?

author

Kind of. Remove the ‘$’ from lines 10, 11, 15 and complete remove line 21.

I did it and i got this Fatal error: Function name must be a string in /home/contrave/public_html/wp-content/themes/contraversao/index.php on line 15

Oh, my mistake. Well, result in this http://i.imgur.com/dyG6k.jpg

author

Well I’m officially out of ideas. Normally resetting the query then doing your query works.

It’s late here and I’ve turned off my computer, but I’ll see if I can find another solution for you tomorrow.

author

Ahh, just noticed a mistake in your code. In the previous pastebin line 15 should be on line 21. The second reset should be done after the the post loop has finished.

Sorry I didn’t catch that the first time.

No problem, really appreciate your help http://pastebin.com/kAPzcM9s Still shows 5 http://contraversao.com/ :/

author

The only other problem I can think of is a strange one that happens with setting posts_per_page sometimes, but it normally only effects custom post types in my experience.

Is you posts to display setting in your reading options (in the WP admin) set to 5? Sometimes there is a bug where even if you set PPP to lower than that number it will still give you the amount set there.

I am using this slider in http://www.charlottehnda.com home page. The slider was working absolutely fine but from today it has stopped working. I have tried disabling all plugins and the issue still persists., Please guide me as to what has to be done.

PS: In local host it still works fine.

author

Hi Ajay,

I can’t visit the site you mentioned, I get a domain doesn’t exist error.

I’m not sure why it would suddenly stop working though. I’ve checked against new versions of WP & it still works fine even with 3.3.1. If you can fix the problem with the link not working I’ll take a look and see if I can suggest anything for you.

Hi, Paul

I bought a template from Templatic that has a built-in banner home slider in it..
For some reason, i need another slideshow for another page.. So, i installed this Nivo Slider..
The slideshow on the inner page are ok, but when i redirect to home, my banner home slider won’t appear..
It also happens when i change Nivo Slider with vSlider..
I believe, somehow these two got crashed.. But i don’t know how to fix it..
Any help would be very grateful..

author

Hi Maria,

That’s a difficult one to answer. It really could be anything, although it could be that the sliders are conflicting.

To solve that you could wrap the enqueue style functions in conditionals so they only display on the correct pages. So if you want to limit the nivo slider to only show on a page called ‘my cool page’ you could use:

if(is_page('my-cool-page')) {
    //wp_enqueue_scripts go here
}

if(is_page('my-cool-page')) {

//wp_enqueue_scripts go here

}

That would make any enqueue script commands work only on the page ‘my cool page’.

That’s the only thing I can think of base on the info you’ve given. If that doesn’t work do you have it live on the web where I could look?

Well done this works perfect! thanks!

author

Thanks Antekera, glad it helped you out.

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.