WordPress – Creating a carousel on the home page

I’ve been looking around for a way to implement a carousel on the home page. I have used some jQuery libraries that are good and flexible for this sort of task. But how do I set up WordPress to provide the content that will comprise the elements of the carousel?

Do I let the admin just create posts, then bring the post information into a jQuery-powered carousel? Or do I create a custom data type where the user creates a single instance with a bunch of images? What if I need images plus text? Should I just grab a plugin?

I want this to be as easy as possible for the admin. They should just pick their content and the order they want it in and presto, carousel.

I found a promising pair of blog entries from Bluelime Media:

I have only skimmed through the posts, but I think they’ll get me where I want to go.

< … code, code, code … >

The first tutorial did indeed set up a carousel on my home page. The carousel takes images inserted into a static page I created, and spit out the attached images into a div that is converted to a carousel by the Nathan Searle’s simple carousel script.

Pretty simple stuff, although I did have to figure out how to get the site to point to the static page I had created as the home page. The full explanation for creating a static home page can be found on this WordPress Codex page, but it basically involves 1) going into the admin settings > reading panel and selecting my static page as the home page and 2) editing front-page.php to suck in my new static page and spit out the images as I wanted.

So that’s set up, but it doesn’t seem very flexible. For instance, what if I want more than just an image in one of my carousel slides? The second of the two blog entries promises to create a carousel of custom post types, which seems like it’s exactly what I want.

< … much frustrating searching and experimentation … >

Annoying. I am trying to set up the carousel using a custom post type, but it depends on setting a featured image for east post. No matter what I do, however, I can’t get the option to select a featured image to show up!

Update: Finally figured it out. I needed to include this line in my functions.php file:


A second argument, an array of post types, can also be passed to add_theme_support.

Aside: Here’s a kind of interesting thing that happened: One of my custom post types needed to change from “Story” to “Conversation.” If I simply copy and replace and make the changes, however, I lose any existing stories. They’re still in the DB, but there’s no way to access them. This blog post explains that I just need to make a couple simple changes to each of the posts and they will appear as the new post type. And indeed it does work.

I was able to follow the second blog post and get things working. One thing that is lacking, however, is the ability to order the carousel items. I think this can be remedied fairly easily by adding a meta box to allow an admin to specify a weight or an order number. Weights would be easier but are obviously not as specific, whereas order numbers are specific but the logic (i.e. making sure no other carousel item has the same order number) can get complicated. Order numbers would be best added on the page where all carousel items are listed, but I currently have no idea how to do that.

I’ve found a seemingly good plugin that allows for drag-and-drop ordering of hierarchical post types. It allows admins to reorder posts on the page where all posts are listed. The only problem is that I don’t know how to extract the hierarchical order when I’m trying to create the carousel.¬†

Aha! I found an error in the code provided in the second of the Bluelime media tutorials. The code for querying the DB looked like this:

$loop = new WP_Query(array('post_type' => 'carousel', 'posts_per_page' => -1, 'orderby' => 'ASC'));

But setting the value of ‘orderby’ to ‘ASC’ doesn’t make sense. I changed “orderby” to “order” and added ‘orderby’ => ‘menu_order’ and it’s all good now.

$loop = new WP_Query(array('post_type' => 'carousel', 'posts_per_page' => -1, 'orderby' => 'menu_order', 'order' => 'ASC'));


Leave a Reply