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 run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.
To give you an example of what we are going to put together, I have implemented a carousel on my demo site. I implemented a WordPress theme template for the index page, and integrated the carousel on that page. You can output this wherever you can add a WordPress loop with query_posts.
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.
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.
Now starts the fun part. There are a couple things you need to add before you get into the markup. We will be creating a new category as well as some new posts.
Lets get logged into the admin area of your WordPress site and click on the categories link in the Posts area of your side 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?
Lets 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:
- showposts= add the number of posts you want WordPress to display from your category. Add your number after the equal sign.
- cat= Remember the Category ID you wrote down earlier? You’ve got it…add the ID number after the equal sign.
- 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 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.
After receiving a couple great comments I wanted to add a couple things.
- In the initial post I inlcuded a download link to jFlow but I did not clarify that I was using of jQuery 1.2.6 hosted by Google – View Source.
- It has been pointed out by a couple of commenters that jFlow is not working with the native (embedded) version of jQuery (1.3.2) in the latest release of WordPress (2.8.3) because it runs in “conflict” mode.
Philip Downer from Manifest Creativehas done some initial testing and confirmed jFlow is working with the latest version of jQuery(1.3.2). Read the comments for a work around, he has provided a good way to get it working with the latest and greatest.
I am currently putting together a HOWTO explaining how to use jFlow to output multiple categories and posts. I will review the script conflicts and post my findings as soon as I test.