A few weeks after I posted How to make NextGEN Smooth Gallery link to any URL (or fake a flash banner) I discovered the WP-Cycle plugin.
It’s a great plugin, much easier to use than hacking NextGen Smooth, and I wish I had found it sooner. It is way simpler for getting each image in a rotating slideshow to point to a different URL.
How I implemented it (note: this is for version 0.1.5 of the plug-in) :
(Blog title, URLs, and links blurred out in the image for client security)
- After installing the plugin, you will find the WP-Cycle settings as a sub-menu under the Plugins menu in the admin area of WordPress.
- First thing to do is to upload the images you want to appear in the slidehow, browse for and upload your images. There is currently no method to add an image from the WordPress Library or to use an image without importing it, hopefully that will change in a future release. Also, it is better if all your images are the same size.
- After uploading an image, you can enter the URL you want each image to link to. This is the strength and the best part of WP-Cycle – you can link to any URL. Be sure to include the “https://” and to click on “Update”.
- Select your settings. These are all up to your preferences. For Image Dimensions it is best if you enter the exact same size as that of the images you are planning to use. Don’t forget to “Save Settings”.
To display the rotating banner, use the shortcode to display it in a post or page or use PHP to show them where ever you please in your themes files.
The short code is:
[wp_cycle]
The php is:
The plugin says that you can set the DIV ID that will be used for the banner and thus be able to style it whatever way you want through CSS. I wasn’t able to do this successfully. I wanted to add a margin to the banner, so I surrounded it in another DIV with a class.
The complete code I added to the theme was:
In the style sheet I added (of course you can add whatever you want, depending on the styling you want):
.banner { margin-left:11px; }
And there you have it. A simple rotating banner using any size of images that links to any URL for WordPress for free without using Flash or a paid program.
Please feel free to ask questions or leave comments.
Hello thx for the info. I wonder if you might help me understand a thing or two re wp-cycle. Unfortunately I am pretty much php/css illiterate but I can catch on quick if its spelled out for me.
I am using a single column custom template for my opening page and all i really want to display is wp-cycle on the left and a pic of me with ‘about’ info on the right. I am using the [wp_cycle] short code, but when i place my pic and text to the right of the [wp_cycle] short code, it always displays beneath it, not alongside of the slide-show.
http://www.squirebozorth.com/wp/?page_id=3
Any thoughts? Thanks!
Squire
Hi Squire,
For someone with no PHP/CSS, your website is looking good!!
I took a quick look and here’s what I suggest:
after the html tag containing your pictureadd
add the following to your style.css file: #rotator {float:left;}
That should do it! Let me know how it works out!
Jason:
Thank you!
I just got it to work! Now to get rid of the word HOME sitting on top!
Thanks again for the help!
-Squire
cool! You’re welcome and I’m glad it’s working for you
As for SEO issues it would be great to have the option to add a title to the link. How would this work.
That would. I haven’t found a way to do it – hopefully a future version of WP-Cycle will have that feature!
This is a great plugin, thank you for sharing!
The only issue I am having is that it will only put the images/slideshow at the top of my post, not at the end or middle, etc. Any ideas how I can fix this?
Thanks again!!
It’s a combination of where you put the WP-Cycle code and how you style your page with Css
Thanks for the walk-through, Jason! I’ve activated the plugin and everything works fine EXCEPT I can’t get the darn thing centered! When I use firebug to see what’s going on, it looks like the rotator div is relatively positioned and the uploaded slides are absolutely positioned. I uploaded the slides through the wp_cycle interface and was not given the chance to choose an alignment. What to do?
Thanks for any info!
~Barb
my solution would be to wrap wp-cycles output with a div then use CSS to change the positioning. To center a div, you would need to style it as: margin: 0 auto;
i’m having the same problem barb is describing above: can’t manage to get the slideshow go below other things (just text) on my page. how can this be done? thanks so much for help!!
I recommend the same thing as Barb – put it all in a div then style it!