How to use WP-Cycle
116 Comments
The WP-Cycle plugin allows you to upload images from your computer, which will then be used to generate a jQuery Cycle Plugin slideshow of the images.
Each image can also be given a URL which, when the image is active in the slideshow, will be used as an anchor wrapper around the image, turning the image into a link to the URL you specified.
In this tutorial I’m going to explain you how to use the WP-Cycle plugin in WordPress.
The first thing you have to do is download and installing the WP-Cycle Plugin, from this page. Now be sure you’re logged in the wordpress admin panel of your website and go to Plugins, and open the settings page of the WP-Cycle plugin (as shown below).
Now just upload 2 images like I did in the image above and don’t forget to fill in the Rotator DIV ID setting, just enter a name like slideshow. Now click on Save Settings and close the window.
The next thing you have to do is opening a PHP file where you want to put your slideshow, let’s say in the header. So open the header.php in your content folder (/wp-content/themes/YOUR-THEME/header.php) and put this code on a place where you want to put your slideshow:
<?php wp_cycle(); ?>
NOW REMEMBER!! If you want to put a div around the wp-cycle, do not use a div with the same ID as you filled in the settings of the WP-Cycle Plugin (in our case that’s slideshow). Because the plugin puts a div with that name around the slideshow by itself. So if you want to put another div around it, give it an id like header or something.
So, we’re almost done… But if you look good, the slideshow doesn’t look that good in Internet Explorer if you use a background image like me (see my header on this page), to fix that you have to do the following, open up your httpdocs folder, surf to this path: /wp-content/plugins/wp-cycle/ and open wp-cycle.php.
In wp-cycle.php, change these lines (row 438 till 446 in wp-cycle.php):
jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
pause: 1,
fit: 1
});
});
To this:
jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
cleartypeNoBg: true
});
});
As you see we added cleartypeNoBg: true, this is for Internet Explorer, if you don’t add this line you’ll see an ugly background in your slideshow (it’s a bug from Internet Explorer).
Also we deleted the pause: 1 and fit: 1, because in my opinion they don’t do anything good to the slideshow, my slideshow stuttered but deleting those lines it fixed the problem.
So, now we’re done and everything is working fine… But if you still have some problems with styling your slideshow like I did, then you have to read further because I’ve got the solution. The wp-cycle plugin adds styles in the index.php, as you all know the styles in the index.php overrides the stylesheet styles. So what you have to do: Go to the wp-cycle folder in the plugins folder of your wordpress blog and open wp-cycle.php. Now scroll to the bottom of that file and delete the following code
margin: 0; padding: 0; overflow: hidden;
So now we’re finally done. If this post didn’t help you out or you still have problems with the WP-Cycle plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.
Tom- Removed this: pause: 1,
fit: 1
but we still have this long pause of white space between each slide.
I have use wpcycle for years and I cannot figure out why it is doing this on this one site.
I tried all the transitions and it was still there. Thanks for your help!
http://youngwellnesscenter.com/
I’ve added a background image to #rotator and gave it some padding so it would show up around the sides of the image that is rotating. I can’t figure out how to center the rotating images within that area. They are all aligned to the top left no matter what I try.
Try to give it a margin. If that doesn’t work, post your URL so I can take a look at it
hey great little plugin nice and easy to implement. one question could you please tell me how to make it so the links open in a new tab. Thanks.
Dear Tom,
Check out the following comment: http://erikvandeven.com/jquery/how-to-use-wp-cycle/#comment-4459
Best Regards,
Erik
Hi Erik,
I love the wp-cycle plug-in and your tutorial on setting it up was AWESOME!!! My only question is this: I want to set up DIFFERENT slideshows on different pages of my site. Is there any way to do that? Thanks for any help you can provide.
Frank.
Thank you Frank! Glad to hear this tutorial helped you out.
The plugin doesn’t support multiple slideshows, unfortunately. The best way to setup multiple slideshows is by adding the code manually in your theme. You can find all the information you need on the jquery cycle plugin website: http://jquery.malsup.com/cycle/. If you have any questions about it, don’t hesitate to ask
Hi! I hope you can help me…I have wp-cycle installed as a plugin and it was working perfectly until one day the settings just disappeared. Additionally, when I upload a picture, it will tell me that it uploaded fine,and I can see it on the front page of my website, but I cannot see the list of uploaded images in the settings panel. I have deleted the plugin and reinstalled it, I have deactivated all other plugins to make sure they’re not conflicting and that also did not help at all. Thanks for any help you can give me.
Dear Mercy,
Have you updated WordPress to the latest version? If you did, that might be the problem. In that case you can contact Nathan Rice (http://www.nathanrice.net/), the developer of this plugin. Or you can place the slideshow manually, without a plugin. Visit http://jquery.malsup.com/cycle/ for more information. Hope this helps.
Thank you for your quick response! I didn’t see it until now but this is helpful. I will look into those things.
So, I have wp cycle installed but it does not rotate.
(bet you never heard THAT before).
I have wp_head() and wp_footer() in-place…and that made it show up but the images don’t cycle. I’m pretty sure the error is on my part.
The url is: http://steelehairboutique.com/
the slider is on the index page. any ideas?
Dear Carl,
Sorry for my delayed answer. If you got any problems in the future and don’t receive a response from this website, please mail me a responder: info@only-media.nl. I like to help as much as I can, but I don’t receive any “new comment” alerts anymore… Very strange.
But I see you solved the problem on steelehairboutique.com? If so, can you share your solution with us?
We absolutely love your blog and find almost all of your post’s to be just what I’m looking for. Would you offer guest writers to write content for you personally? I wouldn’t mind composing a post or elaborating on a few of the subjects you write related to here. Again, awesome site!
Thank you so much for your help in fixing the transparency bug in IE 7 & 8. The
cleartypeNoBg: true did the trick..
Cheri Calvert
Hi Erik,
I am using your plugin for a slideshow located at http://www.waldcreations.com/forecast . My question is that I can’t figure out how to get rid of the pause on hover. I would like the slideshow to continue regardless of where the mouse is. Do you know a solution for this?
Thanks,
Adam
Hi Erik, Can you please tell me how to stop the rotation on after one loop. I would like to stop and stay on the last image. Thanks!
Just add “end” with a stop function in the jquery cycle code, see code below:
$(‘#slideshow’).cycle({
end: function() {
$(‘#slideshow’).cycle(‘stop’); }
});
Hi Erik – thanks for your response! I added the code above into the
wp-cycle/jquery.cycle.all.min.js file but it didn’t work. What am i doing wrong? Thanks!!!
Hi Erik, I am hoping you can help me. I changed your code as you reccomend. I am having a pause between images in the slider. Any ideas? foxyloxycafe.com
solved! see below.
I’m sorry for my delayed response. I’m too busy with school and my new company these months so I have almost no time for my blog…
But good to hear you found a solution to your problem. And thank you for sharing the solution with us!
Hi. I’ve used WP cycle with exactly the same settings on a number of websites, but on his one: http://IndagoDogPhotography.co.uk the time between the slides is exactly the same time as how long the slides actually show for (so slide for 4secs then fade to white for 4secs repeated) I’ve uninstalled, changed pictures and settings, done everything I can think of but can’t fix it – please help!!
Kristy, I figured this out and wanted to post in case anyone else has the same problem. WordPress was automatically entering a tag between images causing the blank space. I went into the wp-cycle plugin and removed near the bottom
echo $newline;
and it worked!
I looked for echo $newline; in my php file for wpcycle and it is not in there and I have exactly the same problem. The pause inbetween each image is the same as the time the image is shown.
When I looked for echo $newline; in the text editor it was not there but I looked at the php file in the code editor in my cpanel and found it.
That fixed the problem, thank you so much-Jesshedrick , and thank Erik for leaving this thread up to help all of us. There is no support for this plugin, the guy was working at Studiopress and just blogged again for the first time since 2009!
That is why everyone thinks you are the plugin creator.
I’ve read all the comments and tutorials and I STILL can’t get it to center correctly! Please help!
http://www.nbhealthandfitness.com
I see you’ve worked it out? Cause in my browser the slider works fine.
Is there a way to update the code to create move up or down buttons for arranging the images in the plug-in. I have remove images to upload in a new image somewhere other then at the end and then upload the removed images back in.
just developing on localhost
can wp-cycle be used multiple times with different images for each instance?
Thanks
Great workaround Brian. I would never have thought of trying that. Is there any way to have two different slide shows on two different pages? Thanks
Hi Bruce, I have enhanced wp-cycle to ten sliders each having ten images. If you want to do that I can help you. Thanks.
An update to my post above. I worked out that if I delete the links in “Image Links To” then it displays fine in IE. Guess I will leave the images like that for now unless someone has a solution.
Dear Brian,
Apologize for my late response. I also have problems with IE and the WP-Cycle plugin. I still haven’t work it out, how to fix it. Once I’ve found a solution to this problem, I will add it to this article. But good to know you’ve found a temporarily workaround.
Best Regards,
Erik
Hi Erik.
Thanks for the reply. I will keep an eye out for your updates to this article. Also, in a future update would it be possible to add a box so we can change the order in which the images are displayed. I have found that if I need to add another photo in a specific place (for example, in 1st position) then need to delete all the images and upload them again in the correct order. Not a major hassle but would be a handy feature.
Hi Brian,
I didn’t create the wp-cycle plug-in. Strangely, many think I did. But I’m considering of creating my own. Because this plug-in still has many shortcomings. I’ll let you know when the time comes.
Hi. Have got WP Cycle plugin working perfectly on my shower chair site when veiwed with Firefox but it only shows the first slide and then goes blank in IE. I have added the code as mentioned in your article but it did not help. You can see it here. http://shower-chair.co.uk
Any ideas?
This fix did not work roundtripwithdaveo.com. Any help would be so much appreciated.
Used the following as pasting your code directly in broke wp-cycle in Firefox:
jQuery(document).ready(function($) { $("#").cycle({ fx: '', timeout: , speed: , cleartypeNoBg: true }); });ignore the code pasted above – did not parse correctly.
Dear Elke,
Apologize for my late response. Try deleting the “$” sign, between the brackets (behind function). That may cause problems, because you use already jQuery instead of $. Good luck!
Best Regards,
Erik
Hi,
I’m having a problem with my wp-cycle. The slides look good and the links work fine. My problem is that it takes a while before the first slide shows up. And after the last slide, there’s a blank screen for a while before it starts over with the first slide. I don’t want any space between the last and the first slide, I just want it to go straight from one to the other. And when you first open the homepage I want the slideshow to start immediately.
Any suggestion?
Thank you in advance
Hello Linda,
Apologize for my late response.
I guess you are using Internet Explorer as browser? Because the error you describe, is a common error in Internet Explorer. I still haven’t found a solution for that. You can fix it temporarily by changing the slide effect to something like fade.
Best Regards,
Erik
Hey.
I’m already using wpcycle on a testsite that I’m making. It works perfect. But it appears on all sites since I changed the Branding img in twenty ten child’s style.css
How can I use it as header (below top content with logo and menu) only on the index.php. I don’t want it to appear on the rest of the pages.
Hi Alex,
Welcome on this website and thanks for your comment. You can show wp-cycle only on the homepage, just by adding the following code:
<?php if(is_home()){ wp_cycle(); } ?>Erik
Hi Erik,
Any chance you know what’s going on here? It was working great but now sometimes it works fine for a while then the photos get pushed over to the left.?
Hi Brett,
Can you post a link with an example? So I can take a look at it?
I’m able to get the slideshow in the correct place, however the images are being displayed all at once stacked instead of the rotating slide show. I must be missing something but no idea what. Site is http://www.kimberlygoldman.com
I’m sorry for the delayed response, but I’m quite busy these days with my clients’ websites.
but I see you’ve got the slideshow working already? It works at least well in IE 8, 9 and Firefox
I loved the help with the wp-cycle, so I linked to it on my site. Thanks.
Thank you Joe, I appreciate that
YES! I couldn’t figure out why my images were getting cut off. The changes to wp-cycle.php that you posted fixed it. Thanks!
Can’t get the wp-cycle slideshow to publish at all . Have updated the code. PLEASE HELP!!
Give me a link to your website, so I can take a look at it
Erik, Great blog and great tutorial!
Please, post on a more gradual way blogpost with tutorials like this! Keep up the good work.
Also I really appreciate the design from your weblog!
From Holland with Love!
Hi Erik,
Thanks for your post.
I had wp-cycle running perfectly other than the need to resize my images, so I took them down and when I fixed them and put them back up it wasn’t showing that they were there in the admin area and when I look on my blog some are up twice. My admin area only allows me to add more images, I can’t delete any or edit any settings or uninstall the plugin because there is nothing there other than the upload image button. Any ideas of what went wrong?
Your help is much appreciated
The wp-cycle plugin is perfect solution for slideshow im trying to implement except it isnt working!
http://golfgtisportline.com/test/
Not rotating through slides any help anyone can provide would be much appreciated.
Is there a way to have the linked images pop the URL’s up in a new window/tab??? So my visitors aren’t forced to leave the site? Thanks.
Thank you very much Erik! That works like a charm!
Hi Erik,
Is there any simple way to implement previous and next buttons into wp-cycle?
I’ve been looking everywhere to find out how to do it, but even the developer doesn’t mention it.
Thanks.
Ofcourse there is
, just open wp-cycle.php (/wp-content/plugins/wp-cycle/wp-cycle.php) and at the following code on line 454 (i guess):
Then you will get something like this:
jQuery(document).ready(function($) { $("#<?php echo $wp_cycle_settings['div']; ?>").cycle({ fx: '<?php echo $wp_cycle_settings['effect']; ?>', timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>, speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>, cleartypeNoBg: true, next: '#next2', prev: '#prev2' }); });After that, you have to add two buttons somewhere on your webpage with the ID’s #next2 and #prev2 (see code above). I advise you use the fade mode if you use those buttons. Because if you use the slide mode, the plugin will show the previous image if you click on the previous button, but it will keep sliding from the right to the left. So it’s a bit confusing for some people, so I guess the fade mode is better if you use the buttons.
Hi Erik,
i solved my problem regarding the false positioning of the wp-cycle in IE, Opera etc. The error was a missing “>” after my enclosing div-container. That way the wp-cycle-div didn’t lie within my div and IE positioned it underneath…don’t know why FF and Safari ignored that…but…anyway…
I put your Blog into my Blogroll…
Hi Erik,
I have an image in wp-cycle that links to a different website. Is it possible to make this link open in another window instead of self (eg. blank target)?
Many thanks
Laura
go to plugins, then edit plugins, edit the wp-cycle/wp-cycle.php code.
Find this section
/*
///////////////////////////////////////////////
this final section generates all the code that
is displayed on the front-end of the WP Theme
\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
*/
Find this line:
and change it to this:
works perfectly.
Hi Erik,
I am very new to having a web page but thankfully wordpress is very accommodating to a newbie. I have the wp cycle on my site but I would like to have the option of playing music in the background…where viewers could click on a button that says “play music” or something. Is there a plug-in that you know of that could work or even some code? I had found something online but unfortunately it took me of the home page when I clicked it.
Thanks in advance.
Kim
Hi Erik,
i also have a strange Prob with wp-cycle and i hope you can help me. In IE8, the images got scaled up – i fixed that after reading a post here that suggested to put links on the images. Ok, that did it. But the whole container of wp-cycle is misplaced in IE8…in Firefox everything is ok… do you have any clue? I would really appreaciate any kind of help. Thx in advance, Timo
Hi Erik !
Thx a lot for your advices I encouteer exactly the same problem as Jean :
“The first slide picture is good and normal, but the second one, scales completely way off.”
And adding a link fixed the bug as you said !…
Thanks again !
hallo Erik,
is it possible that wp-cycle does not work in WordPress 3.0?
I tried everything but no cycle is appearing. everything stops at the first foto. You can see it at
http://www.studiostart.be/studiostart/
greets
ingrid
@ingrid, Ik zie dat je het al werkend hebt gekregen?
I love you man, your code saved my day. I’m not gay by the way.
I was having a helluva time figuring out the bug in IE8. The trick for adding a link to the images did it for me. just adding # to the link to saved the day.
This has been driving me nuts for the past day or two. I’m soooooooooooo glad I came across your article, it really helped me out.
Thanks a mill Eric. Great post!
Regards
Orla
BUT!
If you look in Opera the problem is still there!!
Not as big of an issue as in IE8 but still irritating
Hi Jens,
Your problem is as a BIG question mark to me. I figured out (when I used Opera’s Dragonfly, to check the HTML and CSS code), that the problem would be fixed if you give all the pictures a link. You can do this in the configuration page of your wp-cycle plugin. The problem is that something gives the IMG’s a different style. And somehow if the pictures have a link, it gives the A tags those styles and not the IMG tags. That’s why the only solution would be giving the IMG’s a link, so the styles will be added to the A tags and not the IMG tags. I was not able to override those styles, so this is the only solution I could find.
Kind regards,
Erik
Yeah, haha. in some mysterious way!
Thanks anyway for your article!!
Best regards
Jens
Hi Erik!
Im having a problem with IE8 and with Opera.
The first slide picture is good and normal, but the second one, scales completely way off.
I have searched the internet for answers but im al out of luck!
Hoping you could have a look at it, to se if you could solve the mystery!
The url to the site: http://hisab.jensaronsson.se/wordpress
regards
Jens
Hi Jens,
I see you fixed the problem?
Kind regards,
Erik
Ky8Bya qttnrlnovkvh, [url=http://dvglppvjmfxi.com/]dvglppvjmfxi[/url], [link=http://fguurtbfvfcs.com/]fguurtbfvfcs[/link], http://iejjbtkehxnl.com/
Here de answer to my question
Hello, i need to know how can i show the wp cycle only on the front page of my wordpress thanks
That’s not so difficult, just place the following code in your index.php:
<?php if(is_page('home')){ wp_cycle(); } ?>Also please let me know if there is any plugin like flipbook but with ability to flip text-books and not jpg books??
Ok i have not yet uploaded the website on server, it is on my localhost, i will give you the link later, thank you for your kind and soon reply, best regards Matthew
I am very glad to find this page on internet, because i am having trouble with wp-cycle. In IE and Mozilla it working normally, but when i open it on Opera it spread the photo on screen, please let me know what to do asap, as i very much need this to work out, i very much want that shuffle mode work on my website slideshow, best regards Matthew
@Hello dear Erik!, if you can post a link to your website, then we can see your problem and probably find a solution for it.
Hey Guys,
Im trying to put my wp-cycle slideshow inside a hollowed out png I wanna use as a frame….
please see here: http:www.hdcustomsllc.com
its frameless right now, and I cant figure out how to beat the over riding css the plugin churns out….
any thoughts?
thanks in advance!!!!!
a
Hi Aaron,
Sorry for my late response, but I see you’ve already fixed your problem, good to see. I bet you’ve used one image and putted the slideshow behind this image, by using position relative and z-index? In my opinion that’s one of the most logical solutions.
Anyway, good luck further with your website and thanks for visiting my weblog!
Best regards,
Erik v/d Ven
Great stuff as usual…
Great post!
Hi,I found your blog searching Google and your information has been very informative.I am curious as to whether or not you are generating a good online income, so please reply and let me know.I have bookmarked this page and I will be check back regularly if that’s ok with you.I would love to think you will call in on my blog please and let me know what you think of it.
Thank you for this great article very spot on! will looking for more valuable articles Regards
I absolutely appreciate posts, which might be of profoundly beneficial as a service to beginners in blogging as I am. I already possess a humble collecting of blog posts and other articles, from which I step by motion learn many aspects of life. Through you in return your resource.
Do you accept lodger posts? I would love to note two articles here.
I don’t know, if you can send me those posts, I will think about it. And maybe even post it on this website.
Great post. Never thought of it like that. Thanks
Thnx =)
Thanks so much. I found this incredibly helpful.
Hello,this is Venice Kuhlmann,just found your web-site on google and i must say this blog is great.may I share some of the article found in this blog to my local students?i am not sure and what you think?anyhow,Thanks!
Hi Venice,
If you can also share my web url or just link to my website, then it’s not a problem.
Regards,
Erik
I want to start blogging too, what do you think, which blog cms is good for noob?
WordPress is the best, it has a lot of possibilities and it’s very easy to use. Joomla has also a lot of possibilities but isn’t easy to use and not so user-friendly. Drupal is also easy to use, but I don’t have that much experience with that cms system. My opinion is, just use wordpress, it’s the best =).
found your web site on del.icio.us today and truly liked it.. i bookmarked it and will be back to take a look some more later
I admit, I have not been on this webpage in a long time… however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues.
Thank you Erik, that works! I really appreciate you taking the time to help me resolve this!
You’re welcome
, I’m glad I could help.
Hi Erik,
Because I want the wp-cycle to appear in the header, I added the code into the header, but I could not center it and it was not behind the logo or the navigation bar like I wanted it to.
Hi JR,
I took a good look at your website and you have to add the following lines in your css, which creates a better result:
/*Add z-index:0 to your rotator*/ #rotator { z-index:0; } /*Add z-index:3 to your navigation*/ #nav { z-index:3; } /*Add z-index:3 to your intro*/ #header p#intro { z-index:3; } /*Add z-index:3 to your logo text*/ #header h1#logo-text a { z-index:3; }I hope this will solve your problem.
Hi Erik,
I am trying to insert my wp-cycle into the header of a colourise theme: http://www.memphissigs.com
I can’t seem to get the slideshow to work properly. I would like for it to be shown in the background.
Thanks!
Hi JR,
Did you put the following code somewhere on your page?:
Cause I can’t find any slideshow in your sourcecode, maybe you can post some php or html code to show me what you mean?
Thank you for your responses, I really appreciate that. If you got any problems with the plug-in or this tutorial, don’t hesitate asking me for help.
I really like this plugin. It’s simple and efficient. One thing though. Is there a way to stop it from looping (I think that’s the term) through the pictures after music has stopped?
Well, I don’t know which code you use for your music, but you could use the following code to stop the cycle plugin:
$('#slideshow').cycle('stop');Erik,
I love the way you are helping people and your answer about how to stop the cycle of the plugin is the only I could find. Thanks for that.
However, I am not a programmer (I can do html and css and copy/paste code and script) and so I do not know how or where to enter the code you recommended for stopping the rotator. I know how to get into the php file but where inside the file would I put this code:
$(‘#slideshow’).cycle(‘stop’);
And is it the only code I need or is there something else that goes with this code? Or a specific place in the php file where this code goes?
Thanking you in advance for your help.
Joy
Dear Joy,
Thank you for your kind comment. I appreciate that
.
About where to place the JavaScript code, that depends on when you want to stop the slideshow. Do you want to stop the slideshow after some background music has stopped? Or when you move your cursor over the slideshow? Or something else?
Maybe you could place the URL of the website, where you are using the WP-Cycle plugin. Maybe I can help you better then.
Best Regards,
Erik
Everybody, please do not post here only to promote your or other websites, those posts will be deleted immediately.
Great post. Helpful, and it got wp-cycle ‘almost’ working in IE. Prior to implementing your solution, I saw a solid purple background in IE around each image. Now the solid purple is gone, but there is a gauze-like background that didn’t show before. Site is georgiaip.org/wordpress/
Hi Rick,
.
Thank you for your comment. About your website, did you solved the problem already? Because I was looking at your website but I can’t see any bug
Regards,
Erik