How To Integrate jQuery Cycle Plugin To A WordPress Theme

One of the most commonly used jQuery slideshow plugin for Padd Solution’s WordPress themes is jQuery Cycle plugin. The said plugin is well known for its easy implementation and quite plenty of options and transitions to choose from. In fact, you can make your own transition on this plugin but it’s another story.

Anyway, this tutorial covers the following steps for integrating the jQuery Cycle plugin: getting the jQuery Cycle Plugin, making use of WordPress thumbnail support, and installation instructions.

Requirements

  • jQuery Cycle Plugin. Get this script from jquery.malsup.com. Get this file in ZIP format, it contains the examples and the script itself.
  • Regenerate Thumbnails Plugin. You need this plugin to regenerate thumbnails in WordPress. Unlike the TimThumb script, the WordPress post thumbnail support cannot generate thumbnails on the fly. You must install it via Plugins section in your WordPress Administrator Panel or the good old FTP method.
  • Any WordPress Theme. Any WordPress theme will do for the modification.

Step 1: Altering the Directory Structure

Under folder of the theme of your choice, which is under wp-content > themes, create a folder called js. Download the jQuery Cycle Plugin and extract the files. Inside the contents of the extracted file, put the jquery.cycle.all.min.js to theme-of-your-choice > js folder. Rename jquery.cycle.all.min.js to jquery.cycle.js for easy reference.

Step 2: File Modifications

Open the header.php file under twentyten folder. Insert the following code after line 45 (code just after enqueuing the Comments Reply).

wp_enqueue_script('jquery');
wp_enqueue_script('jquery-cycle', get_template_directory_uri() . '/js/jquery.cycle.js');

If you are using other than TwentyTen theme, make sure that you add the line before the wp_header() function. You might be surprised why I include the jQuery core file even though it is not mentioned in the first step. The reason is simple: WordPress 3.0 comes with jQuery, thus including the core file itself to the theme is unnecessary.

Next, open the functions.php file. Check if your theme supports post thumbnails. If your theme of choice supports it (TwentyTen theme does support post thumbnails), skip this step. Otherwise, copy this code to the functions.php file.

add_theme_support('post-thumbnails');

Then, set the dimensions of the slideshow image. I will set the width of the slideshow image to 470 pixels and height of the said image to 300 pixels and enable the zoom crop. You can visit the WordPress Codex for more information about the function add_image_size().

add_image_size('slideshow',470,300,true);

Copy the above code and place it just below the add_theme_support('post-thumbnails') line for easy trace.

Then create a function to set the length of the content of the slideshow.

/**
 * Sets the length of the content in a slideshow.
 */
function hook_excerpt_featured_length($length) {
	return 50;
}

Put the code at the end of the line in functions.php file. Next, let’s make a function to generate the list of post which is categorized for slideshow use. See the function below.

function slideshow_featured_posts() {
	wp_reset_query();
	$featured = 1; // Assuming that the name of the category ID number 1 is "Featured".
	$count = 3; // How many post to be shown as slides. Ideally, it should be more than 3 posts.
	add_filter('excerpt_length', 'hook_excerpt_featured_length');
?>
 
<div class="list">
	<?php while (have_posts()) : the_post(); ?>
	<div class="item">
		<a class="image" href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>">
		<?php the_post_thumbnail('slideshow'); ?>
		</a>
		<div class="meta">
			<h3><a href="<?php the_permalink(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h3>
			<?php the_excerpt(); ?>
		</div>
		<div style="clear: both"></div>
	</div>
	<?php endwhile; ?>
</div>
 
<?php
	wp_reset_query();
	remove_filter('excerpt_length','hook_excerpt_featured_length');
}

Copy and paste this code to the functions.php file. Then save your work.

Step 3: Getting to work

Open the index.php file. Add these lines of code just below the get_header() function, outside the PHP tag.

<div id="slideshow-wrapper">
<?php slideshow_featured_posts(); ?>
</div>

Next, open the header.php file again. Add these lines of code just above the end of <head> tag.

<script type="text/javascript">
function create_slideshow() {
	jQuery('div#slideshow').append('<button class="button-l" id="jqc-prev">&laquo;</button>');
	jQuery('div#slideshow').append('<button class="button-r" id="jqc-next">&raquo;</button>');
	len = jQuery('div#slideshow div.list div.item').length;
	jQuery('div#slideshow .button-l').css('z-index',len+100);
	jQuery('div#slideshow .button-r').css('z-index',len+101);
	jQuery('div#slideshow div.list').cycle({
		fx: 'scrollHorz',
		cleartypeNoBg: true,
		speed: 1500,
		timeout: 5500,
		prev: '#jqc-prev',
		next: '#jqc-next',
 	});
}
jQuery(document).ready(function() {
	jQuery.noConflict();
	create_slideshow();
});
</script>

Step 4: Layouting

The slideshow is now functional. Yes, it works well, but let’s make the slideshow more presentable.

Make sure that you already installed the Regenerate Thumbnails plugin and your theme of choice you are working with is the current theme. If you don’t have Regenerate Thumbnails plugin, please install it now.

Assuming you installed the said plugin, go to WordPress Admin Panel and go to Tools > Regen. Thumbnails. Then click the button to start regenerate thumbnails. This may take a while if you have plenty of images.

While the plugin is regenerating thumbnails, create a CSS file called jquery.cycle.css under the folder of the theme of your choice. See the CSS code below for the very basic layout.

div#slideshow { position: relative; width: 780px; height: 300px; padding: 0 0 40px; margin: 0 auto; }
div#slideshow .list { position: absolute; width: 780px; height: 300px; z-index: 1; overflow: hidden; }
 
div#slideshow .button {
	width: 64px; height: 64px; position: absolute; top: 118px;
	outline: 0; cursor: hand; border: 0 none; color: #333; font-size: 45px; line-height: 45px; font-weight: bold;
}
div#slideshow #jqc-prev {
	border-bottom: 0 none;
	left: -74px;
}
div#slideshow #jqc-next {
	border-bottom: 0 none;
	right: -74px;
}
 
div#slideshow .item { width: 780px; margin: 0; }
div#slideshow .item .image { display: block; float: right; padding: 0; }
div#slideshow .item .meta  { width: 280px; padding: 0; float: left; }
div#slideshow h3 {
	font: bold 28px/32px Helvetica, Arial, sans-serif;
	display: block; padding: 0; margin: 0 0 20px 0;
}
div#slideshow h3 a:hover, div#slideshow h3 a:active {
	border: 0 none;
	text-decoration: underline;
}
div#slideshow p { display: block; padding: 0; margin: 0 0 20px 0; }

Copy and paste the CSS code to jquery.cycle.css.

Final Step

In order to get the jQuery Cycle plugin working, you have to add more post entries with images, at least three posts. To add the image post thumbnail, refer to “How to Add Post Thumbnails in WordPress” tutorial. Make sure that you categorize the post which is for slideshow use. After some post entry, go back to main page and reload, and the jQuery Cycle plugin should be running.

You can also tweak the settings in the jQuery Cycle plugin. Refer to the Effects Browser to see which transitions suits for you.

Categories: Tutorials

Tags: ,

Comments

  1. Paula Penedo 01.05.2011 Reply

    I spend almost a day searching for some article/tutorial about this. A friend of mine twittered me with this article and, man, you just saved me a LOT of research.

    I just have a small: do I have to regenerate all my thumbnails everytime I wanna change the image on the Cycle slideshow?

    Thanks a lot!

    • James 01.05.2011 Reply

      Nope. You don’t have to. You can only regenerate all of your thumbnails if you want to change the size of a thumbnail.

  2. Nick 01.18.2011 Reply

    Hey James. I was hoping for a example to compare it to another slideshow I’ve seen.. but I thought I’d just ask you before I go ahead and do this way you’re presenting.

    Is the outcome like this WordPress Theme slideshow?
    http://www.paddsolutions.com/wpmag/magalingreloaded

    I’m trying to mimick the same actions as that slide and it sounds like your tutorial is pretty similar.

  3. juliane 03.13.2011 Reply

    Is this slideshow only on the front-page? I wanted to have a slideshow for each post. how can I implement the cycle plugin for every post I create?

    • James 03.14.2011 Reply

      Yes. It’s only on the front page. If you want to implement for every post, page, search result, and archive, you can edit the header.php instead of index.php.

  4. Nja 07.24.2011 Reply

    Hi,

    I need some help. I’ve done everything but the whole function slideshow_featured_posts doesn’t work for me like it should. I get no slider, just the three posts displayed under each other, and the weird thing: I have no other loop in my theme just yet, but the function continues to list posts for some reason…

    I assume something is missing in the code that I’m not experience enough to notice?

    • James 07.28.2011 Reply

      Did you check the Javascript errors?

Add a Comment