How to Create a jQuery Carousel with WordPress Posts

Over the past few months, I have had various requests for content sliders and carousels that integrate WordPress posts on each slide.

This post will give you a quick rundown of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

For this HOW TO post, I am assuming you have HTML and CSS experience. I am also assuming you can work your way around WordPress theme files and have worked with javascript before.

jFlow – Ultra-lightweight Fluid Content Slider for jQuery

There are various content slider and carousel scripts available. I found jFlow to be one of the lightest and easiest to implement. Styling is very flexible and it is feature packed for your needs.

Download – Original Source is no longer available by creator of jFlow. Please use the version found at Demo.Armeda or do a bit of research and there are newer versions around the web.

Once you have jFlow downloaded…have at it…get the script installed, configured, and styled to fit your needs. Again, it’s flexible and easy to use. Don’t worry about changing the markup at this point, just get it working correctly for your application.

WordPress Configuration

Now starts the fun part. There are a couple of things you need to add before you get into the markup. We will be creating a new category as well as some new posts.

Let’s get logged into the admin area of your WordPress site and click on the categories link in the Posts area of your site navigation.

Create a new category. We’ll use this category to output posts in jFlow using the WordPress query_posts call. I named mine “featured” and find it works for me, you can use whatever name you like.

Now that the category has been created, we need to get the category ID. You will see your new category listed as a link in your categories page. If you right-click the link and open link properties, it will display the URL which ends in the category ID number.

When we get to the markup stage of the integration, you will need this ID number so you can define the category posts you want to output using query_posts.

Simple so far right?

Let’s create some new posts. Head back to your sidebar navigation and click Posts. Now click the add new post and fire away. Make sure you assign it to the category you just created. In my online demo, you will see that I have created 4 posts viewable in the carousel. The amount of posts you want to display is up to you, this will also be controlled by query_posts from the markup.

You probably won’t want to output the entire post into each carousel panel. I recommend using an Excerpt from the post that will be displayed. Simply copy the first sentence from your post and paste it into the Excerpt field when creating the post.

From an administration perspective, these are the basics. There are other cool things you can configure using Custom Fields which i’ll save for another post down the road.

Customize the Code

You’ve already configured the carousel and it should be working with the default text, etc. The code should look something like this:

<div id="myController"> 
  <span class="jFlowControl">No 1 </span> 
  <span class="jFlowControl">No 2 </span> 
  <span class="jFlowControl">No 3 </span> 
  <span class="jFlowControl">No 4 </span> 
</div>
<div id="mySlides">
  <div>First Slide</div>
  <div>Second Slide</div>
  <div>Third Slide </div>
  <div>Fourth Slide </div>
</div>
<span class="jFlowPrev">Prev</span> 
<span class="jFlowNext">Next</span> 

Each slide is contained by a div. Let’s strip out all the div’s except one, and integrate the needed WordPress code.

Here is the code stripped down to the essentials including the WordPress loop with query_posts:

<div id="mySlides"> < ?php query_posts('showposts=4&cat=5'); ?>
  <?php if (have_posts()) : ?>
  <?php while (have_posts()) : the_post(); ?>
  <div>
    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
    <?php the_excerpt(); ?>
    <?php endwhile; ?>
    <?php endif; ?> </div>
  <div id="myController">
      <span class="jFlowControl">1</span> 
      <span class="jFlowControl">2</span> 
      <span class="jFlowControl">3</span> 
      <span class="jFlowControl">4</span> </div>
      <span class="jFlowPrev3">Prev</span> 
      <span class="jFlowNext3">Next</span> 
  </div>

WordPress will do the work here, there are three key elements you need to ensure are properly configured:

1. showposts= add the number of posts you want WordPress to display from your category. Add your number after the equal sign.
2. cat= Remember the Category ID you wrote down earlier? You’ve got it…add the ID number after the equal sign.
3. In the code above you will see 4 spans using the jFlowControl class. Make sure this number reflects the same number you used for showposts=. (If not, jFlow won’t display the correct amount of panels. As an example, if you only need 3 posts displayed, remove jFlowControl number 4.)

You can control the output via query_posts to display images, headings, etc.

<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>">< ?php the_title(); ?></a></h2>
< ?php the_excerpt(); ?>

As you can see above, I am displaying the title of the post, and an excerpt of the post. In the online demo, you will see the title, posts, read more, as well as a post image using custom fields.

You should now have a jQuery based carousel that outputs your latest posts from a given category on each defined panel.

I hope this helped. Play around with the jFlow settings, it will allow you to speed up the slides, auto-rotate, and so on.

Did I miss anything? Would you be interested in a plugin to handle the integration? Leave me your comments, I would love the feedback.