Displaying Posts in a Carousel

Having a recent posts carousel on your blog is a great way to make it more interactive for your visitors.

Recently I had a client ask me to make a recent posts carousel for their website. I said yeah sure, thinking there must be some kind of plugin I can find to do just that real quick. Boy was I wrong. I spent a long time trying to find one and the ones I found didn’t do what I wanted at all. I figured, with all this time wasting, I’ll just make one myself. Just gotta find a good base code. So that’s when I came upon carouFredSel. Here’s the link: http://caroufredsel.frebsite.nl/. I loved their examples and though it still didn’t do everything I wanted, like show a caption below the image, the functionality was exactly what I needed. So long story short, here are the details.

Step 1 Download carouFredSel

Alright, let’s start by going to http://caroufredsel.frebsite.nl/ and downloading the carousel code and copying the jquery.carouFredSel-5.5.0-packed.js file to your WordPress theme folder.

Step 2 Edit Your functions.php File

Next up, open up your functions.php file and add this little bit of code:

if ( function_exists( 'add_image_size' ) ) { 
	add_image_size( 'sliderimg', 200, 150, true );
}

Be sure to replace the 200 and 150 with your own dimensions. Save it and upload the file. After you upload it, in your post sidebar you’ll see a new option titled “Featured Image“. You can upload any image you want to use here and this will be the image that will display in the carousel. Also note that we’re calling it “sliderimg“. I’ll tell you why soon.

Step 3 Initialising carouFredSel and more for Your functions.php File

Make a new JavaScript file called wptuts-caroufredsel.js and put the following code inside, then copy it into your WordPress theme folder:

jQuery(function($) {
	$('#foo2').carouFredSel({
		prev: '#prev2',
		next: '#next2',
		auto: false,
		items: 3,
	});
});

Here is something else to take note of for later. #foo2 – this will be the id of the carousel we’ll be using. We’ll need this so we can style it in CSS. Also note the #prev2 and #next2 id’s for styling the previous and next buttons and lastly, the number 3 is how many items you want to show at a time. In this case it’s 3.

Now, open your functions.php file again and add the following code to load the JavaScript files:

function wptuts_load_caroufredsel() {
	// Enqueue carouFredSel, note that we specify 'jquery' as a dependency, and we set 'true' for loading in the footer:
	wp_register_script( 'caroufredsel', get_template_directory_uri() . '/js/jquery.carouFredSel-5.5.0-packed.js', array( 'jquery' ), '5.5.0', true );

	// For either a plugin or a theme, you can then enqueue the script:
	wp_enqueue_script( 'wptuts-caroufredsel', get_template_directory_uri() . '/js/wptuts-caroufredsel.js', array( 'caroufredsel' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'wptuts_load_caroufredsel' );

Make sure to change the paths to wherever your JavaScript files are.

Step 4 Edit Your Page Template

Now let’s open up the page template you want the carousel to be shown in. Once you open it, wherever you want the carousel to be displayed, paste this code below:

<div class="list_carousel">
	<ul id="foo2">
		<?php
		$carouselPosts = new WP_Query();
		$carouselPosts->query('showposts=12');
		?>
		<?php while ($carouselPosts->have_posts()) : $carouselPosts->the_post(); ?>

		<li>
			<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>
			<div class="slidertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>
		</li>

		<?php endwhile; ?>
	</ul>

	<div class="clearfix"></div>

	<a class="prev" id="prev2" href="#"><span>prev</span></a>
	<a class="next" id="next2" href="#"><span>next</span></a>
</div>

Now let me explain before you go nuts. The first part of the block of code is the name of the class (for styling of course) I’m calling it list_carousel. Next you’ll see that #foo2 id I told you about earlier. Next is the query for posts:

<?php query_posts('showposts=12'); ?>

I’m telling it to pull the latest 12 posts. That way, since I told it earlier to show 3 at a time, it can show 4 sets of 3 posts. But let’s say you want to be a little more specific and only show posts from a certain category. Then you’d use this code instead of the showposts code above:

<?php query_posts('category_name=slider&showposts=12'); ?>

What about tags you say? Well here you go:

<?php query_posts('tag=featured&showposts=12&offset=0&order=ASC'); ?>

Change “featured” to whatever tag you want to use. I’m also calling 12 posts and listing them in ascending order.

Confused yet? I Hope not. Ok, next on the main block of code above I’m pulling “sliderimg” the featured image of the post and also making it link to the actual post so of course when people click on the image, they’ll get taken to the post itself.

<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php echo get_the_post_thumbnail($id, 'sliderimg'); ?></a>

In my client’s case, they not only wanted to display an image in the carousel, they also wanted to display the title of the post itself. So below the image we’re displaying the post title, making it link to the post as well, and assigning a class to it called “slidertitle” so we can style that also.

<div class="slidertitle"><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></div>

*phew* Alright, at the very bottom are the previous and next buttons with the id’s prev2 and next2 that we stated in the JavaScript code earlier.

<a class="prev" id="prev2" href="#"><span>prev</span></a>
<a class="next" id="next2" href="#"><span>next</span></a>

Now that’s all explained, let’s move on!

Step 5 Style It With CSS

Well we do have it working now, but it doesn’t look anything like what we want… so open up your style.css file and paste this code and I’ll explain things below:

.list_carousel {
	height: 175px;
	margin: 0 auto;
	overflow: hidden;
	width: 660px;
}
.list_carousel ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
}
.list_carousel li {
	font-size: 14px;
	color: #333;
	width: 200px;
	padding: 0;
	margin: 2px;
	display: block;
	float: left;
}
.list_carousel.responsive {
	width: auto;
	margin-left: 0;
}
.list_carousel .clearfix {
	float: none;
	clear: both;
}
.list_carousel a.prev {
	background: url("next-arrow-left.png") no-repeat scroll 0 0 transparent;
	display: block;
	height: 150px;
	position: relative;
	top: -174px;
	width: 50px;
}
.list_carousel a.next {
	background: url("next-arrow-right.png") no-repeat scroll 0 0 transparent;
	display: block;
	height: 150px;
	position: relative;
	left: 635px !important;
	top: -324px;
	width: 50px;
}
.list_carousel a.prev {
}
.list_carousel a.next {
	right: -29px;
}
.list_carousel a.prev.disabled, a.next.disabled {
	cursor: default;
}
.list_carousel a.prev span, a.next span {
	display: none;
}
#foo2 {
	left: 20px;
	margin: 0 2px;
	position: relative;
}

Yeah it’s a big block of code. Haha! Sorry I had a lot that I wanted to do with it as you can see. Let me try to make this as painless as possible. If you want to tweak the width, change the 660px and 175px to your desired width and height for the carousel. Also with .list_carousel li you can change the post title colors and width of each item. The .list_carousel a.prev and .list_carousel a.next classes are where the previous and next arrow images are being displayed. This was just how I needed it to look of course. Styling is up to you.

Here’s a Screenshot of the Finished Product

As well as a link to a live version: http://www.kstudiofx.com/carousel-tutorial

[Update:] This tutorial originally used query_posts(), which is bad practice in this context (as noted by Chip Bennett in the comments). We’ve updated the code to more appropriately use WP_Query().