Getting jQuery Nivo Slider To Work Inside Your WordPress Theme

/ 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.

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().

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:

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:

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.

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.

275 Comments

Author’s gravatar

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! 🙂

Reply
Author’s gravatar 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.

Author’s gravatar 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.

Author’s gravatar

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!

Author’s gravatar

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

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

Author’s gravatar

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

Reply
Author’s gravatar

Thx Kathy,

Isn’t that what I did?

— SLIDER —

‘slides’)); ?>

Not Found

WordPress Loop:

<a id="post-” href=”” rel=”bookmark” title=” “>

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

thanks in advance for the help!

Author’s gravatar

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

Author’s gravatar

see above post. try puting:

wp_reset_query();

right after your endif;

Author’s gravatar

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!

Author’s gravatar

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

Author’s gravatar

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

Author’s gravatar

lol! Once again.. awesome.

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

worked like a charm

Author’s gravatar 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.

Author’s gravatar

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.

Reply
Author’s gravatar author

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

Author’s gravatar

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.

Reply
Author’s gravatar 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:

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

Hope that helps.

Author’s gravatar

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.

and the calling of the 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.

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.

Reply
Author’s gravatar 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.

Author’s gravatar

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

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

Looks like a JS issue.

Reply
Author’s gravatar 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.

Author’s gravatar

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’s gravatar 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. 😉

Author’s gravatar

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.

Reply
Author’s gravatar author

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

Author’s gravatar

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

Reply
Author’s gravatar

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.

Reply
Author’s gravatar 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.

Author’s gravatar

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.

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!

Reply
Author’s gravatar 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:

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.

Author’s gravatar

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’s gravatar author

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

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.

Author’s gravatar

When I added this it no longer displays the slider 🙁

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

original code:

Author’s gravatar 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.

Author’s gravatar

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!

Author’s gravatar

Got it!

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

Love this site!

Author’s gravatar

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 🙂

Reply
Author’s gravatar 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.

Author’s gravatar

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

-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’s gravatar 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.

Author’s gravatar

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.

Reply
Author’s gravatar 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.

Author’s gravatar

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

Uranbold

Author’s gravatar

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.

Reply
Author’s gravatar 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:

just after:

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.

Author’s gravatar

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]

Reply
Author’s gravatar

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

Author’s gravatar 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.

Author’s gravatar

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’s gravatar 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. 🙂

Author’s gravatar

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’s gravatar 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. 🙂

Author’s gravatar

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’s gravatar author

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

Author’s gravatar

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!

Reply
Author’s gravatar 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.

Author’s gravatar

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

Reply
Author’s gravatar

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,

Ab

Author’s gravatar 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:

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.

Author’s gravatar

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’s gravatar 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. 🙁

Author’s gravatar

Thanks, have sent a message via the contact form

Author’s gravatar

There is just nothing showing at all now 🙁

Author’s gravatar author

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

Author’s gravatar

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.

Reply
Author’s gravatar

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?

Author’s gravatar

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

Author’s gravatar 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.

Author’s gravatar

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

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!

Reply
Author’s gravatar 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. 😆

Author’s gravatar

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’s gravatar 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.

Author’s gravatar

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

Reply
Author’s gravatar 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.

Author’s gravatar

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!

Reply
Author’s gravatar

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’s gravatar 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.

Author’s gravatar

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

Reply
Author’s gravatar 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.

Author’s gravatar

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!

Reply
Author’s gravatar

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

Author’s gravatar 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.

Author’s gravatar

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’s gravatar author

Glad that worked.

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

Author’s gravatar

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’s gravatar 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.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

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

Find out more