WordCycle

To download WordCycle, visit the WordPress.org plugin page.

For support, please use the WordPress Support Forum and look at the old comments. Someone may have already asked your question!

WordCycle is a wrapper for the jQuery Cycle Plugin. After installing WordCycle, you can use the slideshow shortcode to insert a Cycle slideshow into your WordPress post or page, no JavaScript necessary!

• Options
• Usage & Examples
• FAQ
• Changelog
• Feature Requests & Upcoming Versions
• Comments

Options

The shortcode added by WordCycle takes a number of options that determine the content and behavior of the slideshow.

Usage & Examples

Uploaded images are called attachments in the WordPresss database. If WordCycle is installed, you can use the [slideshow] shortcode to create a slideshow of all the attachments associated with a post. You can also use the custom template tag wordcycle_slideshow() in your WordPress template files.

The slideshow advances automatically and is minimally styled. The slideshow uses the Link, Title, and Caption attributes of the WordPress Image Uploader/Gallery, as well as the gallery sorting options.

To add the slideshow to a post, insert this code: [slideshow]

View examples:

• multiple slideshows on one page
• slideshow with click to advance
• slideshow with full-size images and fast transitions
• slideshow with images that link to image file
• slideshow with next & prev links
• slideshow with next & prev links, no auto-advance
• slideshow with pause on mouse-over, quick auto-advance
• slideshow with thumbnail-size images and “toss” transition

FAQ

How do you add a slideshow to a post or page?

Install WordCycle. Upload images to the page using the WordPress Media Uploader. Add the [slideshow] shortcode to your post OR use the wordcycle_slideshow($id, $order, $orderby, $size, $speed, $fx, $timeout, $pause, $next, $prev, $include, $exclude, $link, $float) template tag in your WordPress template. The template tag accepts the same arguments as the shortcode. See the table for a list of arguments.

How do you change the way the slideshow looks?

The WordCycle slideshow is very sparingly styled. To add a border, alter the typography of the captions, or spruce of your slideshow, you’ll need to edit your theme’s stylehseet. See the diagram below for an explanation of the classes used by the WordCycle plugin:

The <a> is only present if you use the link option, while the caption is only present if you provide captions for your images using the WordPress Media Uploader.

The plugin comes with the following styles (which you can override in your theme’s stylesheet):

.wordcycle { margin:0 0 22px 0; }
.cycle-item { margin:0 22px; }
.cycle-item img { border: solid 8px #EFEFEF; margin:0 0 9px 0;}
.cycle-caption { font-size:80%; background:#EFEFEF;}

How do you add captions to a slideshow?

After uploading your images, use the WordPress Gallery “caption” field (also used as alt text for the image).

How do you add “next” and “previous” buttons to a slideshow?

The “next” and “previous” buttons are really links. Include the links in your post, give them a class or id, and then specify that class (with a .) or id (with a #) in your shortcode using the next and prev options.

See the slideshow with next & prev links example and the  slideshow with next & prev links, no auto-advance example.

How do you make a slideshow that advances when you click on the image?

To add a slideshow that advances to the next slide when the user clicks on the current image (and does not auto-advance), use these options: next='#slideshow-ID' timeout='0' (where ID is the post ID #) or next='.wordcycle' timeout='0' to indicate that the slideshow should advance when you click on the slideshow (next='#slideshow-ID' or next='.wordcycle') and never auto-advance (hence timeout='0').

See the slideshow with click to advance example.

Changelog

1

• Added custom template tag wordcycle_slideshow()

0.1.7

• Updated slideshow markup to use $post->ID as element ID for easier CSS styling

0.1.6

• Added support for include and exclude based on Gallery Shortcode; suggested and implemented by Mathew Simo (@matthewsimo)

0.1.5

• Fixed bug in v0.1.4 which broke slideshows.
• Added style .wordcycle { overflow:hidden } for improved page view before JS loads

0.1.4

• Revised implementation of jQuery.noConflict()

0.1.3

• Abstracted creation of slideshow (print_wordcycle()) from shortcode function (shortcode_cycle())
• Added random # to slideshow ID to allow multiple slideshows on a page
• Moved scripts and styles to wp_footer

0.1.2

• Fixed readme.txt formatting, updated readme.txt

0.1.1

• Introduced “next” and “prev” attributes.

0.1

• WordCycle first released.

Feature Requests and Upcoming Versions

This plugin is purposefully very simple. That said, I don’t plan to ever add an admin page for settings or styles. But, there are definitely some things that could be improved! Below is a list of feature requests I’ve gotten that I’m interested in pursuing. No promises as to when they’ll be implemented, though…

• Unique IDs for slideshows, will allow for posts/pages with multiple slideshows. (added in v0.1.3)
  
• Dynamically add a pager to the slideshow. Pagination will not be added to WordCycle.
  
• Option to fadeIn the first image in the slideshow.
• WordCycle template tag. (added in v1)
  

Dynamic pagination will not be added to WordCycle because this feature would interfere with the plugin’s simplicity and ease-of-use. The purpose of WordCycle is to display a slideshow of gallery images that does not require custom styles. The slideshow can easily be styled by someone with knowledge of CSS & WordPress theming, or it can be left alone. Pagination would introduce more complex CSS that could potentially interfere with a user’s WordPress theme and site layout.

Did you find this plugin useful? Consider buying me a beer!