WP-Cycle plugin: better than hacking NextGen Smooth

Posted in plug ins, WordPress

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) :
WP-Cycle settings(Blog title, URLs, and links blurred out in the image for client security)

  1. 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.
  2. 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.
  3. 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 “http://” and to click on “Update”.
  4. 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:

<?php wp_cycle(); ?>

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:

<div class="banner">
<?php wp_cycle(); ?>
</div>

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.


12 Comments for this entry

  • Squire
    September 7th, 2009 on 10:20 pm

    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

    • Jason
      September 7th, 2009 on 10:59 pm

      Hi Squire,

      For someone with no PHP/CSS, your website is looking good!!

      I took a quick look and here’s what I suggest:
      add <div class=”cleared”></div> after the html </p> tag containing your picture
      add the following to your style.css file: #rotator {float:left;}

      That should do it! Let me know how it works out!

  • Boris
    September 11th, 2009 on 10:35 am

    As for SEO issues it would be great to have the option to add a title to the link. How would this work.

  • Kim
    September 28th, 2009 on 3:14 pm

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

  • Barb
    November 16th, 2009 on 2:02 pm

    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

    • Jason
      November 20th, 2009 on 12:46 pm

      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;

  • vivelevin
    February 24th, 2010 on 12:26 pm

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