How to Create a jQuery Carousel with WordPress



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

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.

1For 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 javascripts 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.

WordPress Configuration

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.

continues with via armeda.com

Tagged: , , , , , ,





About the Author

Hi there, I'm Madhu, the creator and editor of Add Colours. I love sharing with the community exciting information on design, coding and technology. I have been a designer and developer of websites for over 6 years. "Sharing is Caring" Post your comments and suggestions with us.



18 Responses to How to Create a jQuery Carousel with WordPress


  1. It’s interesting to see this point of view. I can’t say fore sure if I agree or not, but it is something I will think about now.


  2. This is good article.


  3. I bookmarked this link. Thank you for good job!

  4. 3xmDYLLD

    I want to post quick hello and want to say appriciate for this good article.

  5. z531Ct

    I want to post quick hello and want to say appriciate for this good article.


  6. It’s interesting, is it possible, can you guide me please.

  7. Nnyla

    Excellent article! A really well written article about wordpress carousel


  8. It’s nice post, Thanks dear

  9. vcvzrclgz

    hi was wondering if it was posable for you to let me know the actual settings you used to do the demo i am trying to do it but my images and text arn’t lining up right float dosnt seem to be working.


  10. Is it possible to do this with pages? I assume so.


  11. Let’s try grabbing x pages and outputting their content to the carousel – it won’t be pretty, and it probably won’t be dynamic, but it would look pretty nice and be easily update-able.

    I know it is possible to grab pages through the loop using post_type = page in query_posts(), however I’m not familiar enough with the loop yet to nail it down for sure. Any ideas?


  12. Useful jQuery Stuff for wordpress. thanks


  13. Nice tutorial, i want to start my blog design, can you suggest me please.


  14. Nic, are you asking if you can output a page in the carousel, or if the carousel can be built on a custom page?


  15. KWP2000 OBD-II OBD2 CAN USB Interface Diagnostic Tool is really simple and easy to make use of. Just turn your pc into a vehicle diagnostic program. This obd connector interface with software program included is all you need. Works for many of vehicles immediately after 1996. It can read and clear all diagnostic trouble codes. Display all of the live information of your vehicle.


  16. More informational blog

  17. wparena

    This really nice work. how to add a caption below?
    Thanks .)


  18. I am new to the drug and alcohol rehab environment. I’m a binge drinker type alcoholic. I am trying to get as much information as possible. It’s a survival tactic I am trying. I am nervous around people I don’t know and I am nervous about not knowing what is going on. Thank you for your post. It helps make things less uncertain.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>