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
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
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
#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
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' );
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:
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:
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:
What about tags you say? Well here you go:
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.
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.
*phew* Alright, at the very bottom are the previous and next buttons with the id’s
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
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
Original from: http://wp.tutsplus.com/tutorials/theme-development/displaying-posts-in-a-carousel/