How to Integrate jCarousel to WordPress Theme

There are at present two themes developed by Padd Solutions using jCarousel as featured gallery: Masugid and Masipag. Though we released only two themes using the said feature gallery, we would like to share on how to integrate jCarousel to a WordPress Theme which is used for the slideshow of featured posts.

The scope of this tutorial covers the list of Javascript files needed to run, adding the thumbnail generator script, returning posts which can be used as a featured post, and steps on how to modify the WordPress theme files in order to add the function.

Requirements

jCarousel Plugin. Get this script from sorgalla.com. Tarball or ZIP file, take your pick.

TimThumb Script. You need this script created by Tim McDaniels and Darren Hoyt in order create a thumbnail of your image.

Any WordPress Theme. Any WordPress theme will do for the modification.

Step 1: Altering the Directory Structure

Under wp-content folder, create folder called tt-script. Under tt-script folder, paste the timbthumb.php file. Also, still under tt-script folder create a folder called cache.

Next, under your theme folder, create a folder named js (or whichever is convenient to you) and put your jCarousel Javascript file inside the said folder. Only the Javascript file, do not include the images and CSS files. We will deal it later.

Open the header.php file. Add the following code just before the end of the <head> tag.

<script type="text/javascript" src="<?php echo get_option('home'); ?>/wp-includes/js/jquery/jquery.js?ver=1.3.2"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.jcarousel.js"></script>

Next, download the jcarousel.css CSS file and put the said file inside your preferred theme folder. See the list of files to be downloaded.

Then, download the jcarousel-images.zip file. The said file contains the images used for the jCarousel. Uncompress the file and put the jcarousel folder to images folder under your preferred theme. See the list of files to be downloaded.

Files to be downloaded

  1. jCarousel CSS
  2. jCarousel Images

Step 2: Function Modifications

Under the function.php file in your preferred theme folder, there are two functions needed to render the featured gallery. The first function does the capturing of the first image of the post. I found this code at Cats Who Code website and modified by yours truly to meet the modification needs.

/**
 * Capture the first image from the post.
 * @global object $post
 * @global object $posts
 * @return string
 */
function theme_function_capture_first_image($p=null) {
	$firstImg = '';
	if (empty($p)) {
		global $post, $posts;
		$firstImg = '';
		ob_start(); ob_end_clean();
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
		$firstImg = $matches[1][0];
	} else {
		$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $p->post_content, $matches);
		$firstImg = $matches[1][0];
	}
	return $firstImg;
}

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

The second function renders the list of featured posts. Though didn’t stated explicitly in the jCarousel manual, below is the required HTML snippet in order to get the featured gallery working:

<ul id="mycarousel" class="jcarousel-skin">
	<li><img src="img1.jpg" alt="Image 1" /></li>
	<li><img src="img2.jpg" alt="Image 2" /></li>
	<li><img src="img3.jpg" alt="Image 3" /></li>
	<li><img src="img4.jpg" alt="Image 4" /></li>
	<li><img src="img5.jpg" alt="Image 5" /></li>
</ul>

All you have to do is to make the list dynamic to list down the recent featured posts in images. Given that we got the function to capture the first image of the post, below is the function to create a dynamic featured gallery.

/**
 * Renders the featured images in home page in carousel.
 */
function theme_function_carousel() {
	wp_reset_query();
	$category_id= 1; // Assuming that the category number of "Featured Gallery" is 1. Change the category ID when needed.
	$limit = 6; // Number of posts to be shown at a time. Ideally it should be multiples of 3.
	query_posts('showposts=' . $limit. '&cat=' . $category_id);
	$generator = get_option('home') . '/wp-content/tt-script/timthumb.php?';
?>
<ul id="carousel" class="jcarousel-skin">
<?php while (have_posts()) : the_post(); ?>
	<?php
		$img = $generator . 'src=' .  theme_function_capture_first_image() . '&w=191&h=191&zc=1';
		$src = get_permalink();
	?>
	<li><a href="<?php echo $src; ?>"><img src="<?php echo $img; ?>" alt="" /></a></li>
<?php endwhile; ?>
</ul>
	<?php
	wp_reset_query();
}

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="featuredcontent">
	<?php theme_function_carousel(); ?>
</div>

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

<script type="text/javascript">
function paddCarouselInit(carousel) {
	// Disable autoscrolling if the user clicks the prev or next button.
	carousel.buttonNext.bind('click', function() {
		carousel.startAuto(0);
	});
 
	carousel.buttonPrev.bind('click', function() {
		carousel.startAuto(0);
	});
 
	// Pause autoscrolling if the user moves with the cursor over the clip.
	carousel.clip.hover(
		function() {
			carousel.stopAuto();
		},
		function() {
			carousel.startAuto();
		}
	);
}
jQuery(document).ready(function() {
	jQuery.noConflict();
 
	jQuery('ul#carousel').jcarousel({
		auto: 6,
		wrap: 'last',
		initCallback: paddCarouselInit
	});
});
</script>

Final Step

In order to get the jCarousel working, you have to add more post entries with images, at least four posts (Ideally, it should be multiples of three). After some post entry, go back to main page and reload, and jCarousel should be running.

Categories: Tutorials

Tags: ,

Comments

  1. Faust 04.07.2010 Reply

    some related plugins like this once you upload pictures seems to get stretched… the carousel plugin in woothemes..

  2. sriganesh 04.15.2010 Reply

    thanks for the post :D

  3. Deluxe Blog Tips 04.16.2010 Reply

    Nice tutorial. We can use this method for displaying related posts in WordPress and I’m sure that people will love it :)

  4. designfollow 04.16.2010 Reply

    thank you very much for the great tutorial.

  5. toribloger 04.23.2010 Reply

    thanks for tutorial… i like it!

  6. Raiden972 04.25.2010 Reply

    Hello, I integrate your carousel in my WordPress theme, but the images do not appear, I would like to know how to show? (I am a novice in English, sorry in advance for my mistakes)

  7. Ray 06.29.2010 Reply

    I’m confused. You say that we should only put the JCarousel javascript file in the new folder named js. However, I’m not exactly sure what this file is, or where to find it. What’s it’s full file name? Where is it located?

    Thanks!

  8. Brendan 07.10.2010 Reply

    Any reason you used get_option(‘home’) and get_template_directory_uri() instead of

    bloginfo(‘url’) and bloginfo(‘template_directory’) ?

    The former seems to be more readable. The bloginfo() function offers a lot of other standardized paths as well. Not a criticism, just thought your choices were interesting :P

  9. Brett Widmann 11.30.2010 Reply

    This is a great tutorial and just what I needed. Thanks for sharing

  10. Jessica Petersen 01.06.2011 Reply

    This is a very helpful tutorial. Thank you!

    There was one minor detail omitted: you need to reference the style sheet in your header.php file as well.

    <link rel="stylesheet" type="text/css" media="all" href="/jcarousel.css” />

    • James 01.07.2011 Reply

      Oh! Thanks for the correction!

      I recommend using this following code in order to have the css code for jcarousel inside the theme.

      <script type=”text/javascript” src=”<?php echo get_template_directory_uri(); ?>/jcarousel.css”></script>

  11. James 01.07.2011 Reply

    As to where to put the codes in functions.php, I suggest put the code at the end of the line.

  12. mervey 01.13.2011 Reply

    now, with the upgrade of jcarousel, they have changed the names a little bit and removed the jcarousel.css file…is your tutorial still valid?

  13. Hmm very interesting, I’ve been trying to get it to work as a standard jQuery plugin to work, but the pagers just aren’t playing game.

    Hopefully this will get the job done!

  14. AlexDamstra 05.08.2012 Reply

    Hi, I’m kind of a noob at php and I was wondering where the code snippet goes:

    Do I place this in my functions.php? And if so, how (or where)? I Really hope you can help me out.
    Thanks and in advance!

    • James 05.08.2012 Reply

      Which code snippet? I can’t see your code snippet.

  15. Arsie 01.26.2013 Reply

    I am looking for a carousel tutorial to put into my header to decrease the bounce rate and I think your procedure here will help me. I will try this on my site.

  16. devrawat 02.12.2013 Reply

    Thanks for the post. Which version of jcarousel is required?

    • James 02.12.2013 Reply

      Version 0.2.8.

Add a Comment