Dre Armeda

and I love tacos

You are here: Home / Development / HOW TO: Create a jQuery Carousel with WordPress Posts

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 run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

Create a jQuery Carousel with WordPress Post Integration

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.

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 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.

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.

jFlow Content Slider

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 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 WordPress Category

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.

WordPress 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.

Add WordPress Posts

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.

WordPress Excerpt Field

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 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.

Armeda WP Post Carousel Demo

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.

Edit:

After receiving a couple great comments I wanted to add a couple things.

  1. 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.
  2. 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.

Reader Interactions

Comments

    • Dre says

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

      • Nic says

        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?

  3. Nic says

    Ok, that was actually pretty easy with pages – here’s how I got it to work:

    query_posts(array(‘post_type’ => ‘page’)); to grab all of the pages – I then specified the controller div in the loop. That was it. Now I’m going to try and get the navigation working to slide through it – would be a wonderful single-page design

    • Dre says

      Great work Nic, I would love to see it in action. It would definitely make for a great single-page design.

      I was going to toy with it this evening but it seems you beat me to the punch 🙂

  4. Christine says

    I’ve noticed that in your demo you use but you’ve downloaded the jquery.flow.1.2.js file and use the one on your server.

    I tried to download both files and can’t get it to work. The carousel only works when I use the jquery file located at the ajax.googleapis.com url. Is there any danger in using that file? What if it changes?

    • Dre says

      Christine, Using Google to manage your scripts is perfectly safe. Here is a post that may help:

      http://bit.ly/48fdkO

      I actually implemented the Google hosted jQuery script as well.

      I will update the post to reflect a reference to the Google hosted jQuery script.

      Thanks,
      Dre

  5. Mitchell says

    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.

    thanks

    • Dre says

      Hi Mitchell,

      There is only a few CSS ID’s & Classes used by jFlow. This is how the demo is styled:

      #myController span{
      text-indent:-10000px;
      display: none;
      }

      #jFlowSlide{ float: left;}

      #myController span.jFlowSelected {
      }

      .jFlowPrev{
      float: left;
      width: 30px;
      height: 30px;
      margin: 156px 0 0;
      text-indent:-10000px;
      cursor:pointer;
      background: transparent url(images/topslideleft.png) top left no-repeat;
      }

      .jFlowNext{
      float: right;
      width: 30px;
      height: 30px;
      margin: 156px 0 0;
      text-indent:-10000px;
      cursor:pointer;
      background: transparent url(images/topslideright.png) top left no-repeat;
      }

  6. rgregory says

    This is a revelation! I have been looking for something like this for quite some time now. Hell ya, I'm interested in a plugin! Is there any way that I could help to make it happen. Keep up the good work, I'm going to try this when I get some free time, I just don't know when that will be.

      • rgregory says

        Thank you so much, I’d love to help test it or anything a non coder can do to help.

        I’ll be checking back regularly then to see when you reveal it.

    • Dre says

      This is a great point Philip, thanks for the comment. I did not test this specific script using wp_enqueue_script but it should work fine using your tutorial.

  10. Philip Downer says

    I’ve been following your tutorial and have gotten the slider to work using jQuery 1.2.6 (the same as you have in the demo). However, when I use the version 1.3.2 of jQuery (the one embedded into WordPress 2.8.3) the slider doesn’t work.

    Several of the admin functions depend on the newer version of jQuery. Can you think of any reason that this may be?

    • Dre says

      Philip, I haven’t tested with 1.3.2 so I don’t have an answer for you at the moment. However, I am currently working on a tutorial for a multi-category carousel using jFlow, I will be testing it out this week and will post my findings. Thanks for the follow up, add me on Twitter if you want to connect, I will follow. @dremeda

      • Philip Downer says

        Thanks for your replies Dre. I’ll be sure to follow you on Twitter!

        So, here’s where I’m at… It appears that jFlow will work fine with jQuery 1.3.2. The problem is that the version that is embedded automatically by WordPress runs in “conflict” mode. My workaround (while I’m sure there is a better one) is to remove the embedded version and instead link to the script hosted by Google.

        Below is my solution to the problem. While I’ve yet to fully test it, I’ll let you know if anything rears it’s ugly head.

        Here is the code others may wish to add to their functions.php file:


        //REMOVE EMBEDDED VERSION OF JQUERY
        remove_action('wp_head','jquery');

        //ADD GOOGLE HOSTED jQUERY
        function jquery_google() {
        ?>

    • Philip Downer says

      So after a bit of research, I’ve determined that jFlow will work fine with jQuery v1.3.2. The problem with using the version that WordPress embeds is that it runs in ‘conflict’ mode. Here’s the code that I added to my functions.php file to get around the problem. This has the added benefit of using the version that is hosted by Google.

      Please keep in mind that the following information has not been tested thoroughly. However, if major problems rear their ugly heads, I’ll be sure to let you know!

      //REMOVE EMBEDDED VERSION OF JQUERY
      remove_action(‘wp_head’,’jquery’);

      //ADD GOOGLE HOSTED jQUERY
      function jquery_google() {
      ?>

      <?php
      }
      add_action('wp_head','jquery_google');

  11. Cy says

    Hum, I don’t manage to make it work.

    @Philip: I added these lines to functions.php but I get this error: ‘Fatal error: Call to undefined function remove_action()’

    I found out that there’s a typo in the line of code: remove_action(’wp_head’,’jquery’) but still doesn’t work. Any ideas?

    @Dre: How do you manage to add the post images? Probably it will be useful for other people to include the code to display images too into this example.

    Many thanks.

  12. YesPapa says

    What about the solution to use the native (embedded) version of jQuery (1.3.2) of wordpress ?

    I miss something …

    • Dre says

      Li-Cheng, there is absolutely a way to do this 🙂 I am working on a multi-post per panel HOW TO as we speak.

      • Li-Cheng says

        Cool! Totally looking forward to it. This has been troubling me for some time, can’t quite figure it out with my limited knowledge of the code. Thanks in advance!

    • Dre says

      Li-Cheng,

      After reviewing this further, this will accomplish what you are looking for! If you are interested in contacting me, we can discuss this further @dremeda on Twitter or use my contact form.

    • Dre says

      Matt, I haven’t tested this, this post directly relates to categories and posts. You should be able to use page outputs also. This may be something I tackle here soon.

  15. ifthik says

    I am trying to use this script in my blog but it doesn’t work exactly. I am not femiliar with jquery.No idea about the code used in header.php can you help me?

    • YesPapa says

      I’m in the same case. Is it possible to have a basic source template wordpress to see how it’s work like the demo by example ?

      Thx for help.

      • Dre says

        Hi guys,

        I am actually creating two themes with the full source. For now please use the demo and ask if you have any questions.

        I will be offering a free version as well as a premium theme.

        If you check out the demo, you will see the live build of the free theme.

    • Dre says

      ifhik,

      What is your question?

      All that needs to be added is the jFlow script and for jQuery use:


      This will work as on the demo http://demo.armeda.com

      As Philip stated above, the problem with the jQuery included in WordPress is that it runs in conflict mode, it does not seem work with jFlow. The Google version works great and provides a stable hosted environment.

      • ifthik says

        i am downloaded the “jquery.min.js” and used it in my themes header but not working. Can you give me the details of the code used it header.php and index.php. My doubt is still continueing. Please help meeeeeeeee

  16. jetmarte says

    Please, you can send me the theme of your demo. I’m a novice and I don`t makes it work.

    Or someone please, put a donwload theme with this work.

    Thank
    And sorry for my bad english.

    • Dre says

      I would be more than happy to link to a post if someone creates one. There are 100’s of themes and frameworks out there, this is not something I plan on doing.

      If you need specific assistance, feel free to contact me and we can work something out.

      Best,
      Dre

  21. canute says

    really nice work
    i ust apply it on my wp and it works great
    but im having a little issue
    i just put some titles with sifr, and it works good on chrome and ie7, but in firefox, whenever i click on a link to slide, the text generated with sifr dissapear, and when it finnish, it appears again. its like when the transition is running, the sifr is not supported. any idea how i can fix it?

    thanks and good work

  22. Jake says

    Great tutorial! — I advise anyone implementing this to make sure you read jFlow documentation before you delve into the tutorial. I couldn’t get the thing to work properly until I realized I had forgotten to call the script on the index.php page. =(

    Once I kicked myself for trying to skip steps, this was an absolute breeze for a guy like me. (Moderate knowledge of JS and PHP, and a complete novice to WordPress!)

    Thanks again!

  23. James says

    I have my homepage currently set to display 10 posts, is it possible to use this to display 4 posts in the carousel and the remaining 6 in a different format?

    Great script 🙂

    • Dre says

      Thanks for the comments James 🙂

      You can absolutely output more posts in a different format.

      You would have to use multiple loops and ensure to exclude the category you use in the carousel in your second loop. If you don’t the posts will repeat.

      If you need a hand, let me know.

      ~Dre

      • James says

        Thanks Dre,

        I use a single category for one part of my homepage and another category exports posts from another category (gallery+resources showcase site).

        As such, the loop for my gallery category is this: http://pastebin.com/m30e03d0

        Basically, I’d want to try and modify the loop so it shows (for example) 4 newest posts from category 1 then beneath that and outside the carousel (different format etc) posts 5-10 in category 1.

        Any thoughts hugely appreciated as writing new bits into the loop isn’t something I specialise in!

        Cheers,

        James.

  25. rgregory says

    I’m about to try and implement this, but I’m afraid to take out the native jQuery that comes with WP, as I don’t want to mess with other plugins that may use it.

    Have you ever considered using coda-slider?

    • Dre says

      What do you mean remove the native jQuery? You don’t need to remove it from your theme. Are you asking if I have considered coding in posts into coda-slider?

      • rgregory says

        Sorry, my vocabulary is lacking when talking to coders. I was under the impression that you had to strip out 1.3.2 and pop in 1.2. I was afraid this would cause issues with other plugins that use/require 1.3.2?

        Also yes, I was asking if you considered using the coda-slider plugin http://plugins.jquery.com/project/Coda-Slider ? I was hoping that would work with 1.3.2

  26. philippe says

    Great tutorial !

    I am trying to call specific pages… and I am having trouble with this line:

    ‘page’, ‘page_id’=>’329,17,12,7,18’));

    it only fetch page 329

    any idea how to fix it?

    • Dre says

      can you use pastebin to post the whole template and then post a link? I would like to see all the code if possible.

  27. philippe says

    Great tutorial !

    I am trying to call specific pages… and I am having trouble with this line:

    ?php $ids = array();
    query_posts(array(‘post_type’ => ‘page’, ‘page_id’=>’329,17,12,7,18’));

    it only fetch page 329

    any idea how to fix it?

  28. jetmarte says

    I´m very sorry, but I don’t make work this theme, please help me someone. I need a fool´s tutorial, I don’t know wath I have to do for install this theme correctly. I don’t fix this error:

    “Fatal error: Call to undefined function body_class() in /home/a4568276/public_html/prueba/wp-content/themes/WordouselLite/header.php on line 26”

    Please help me, if someone have a tutorial step by step, I will very thanks…

    Sorry for my bad english.

  29. maurjo says

    hi. why you dont transform this great tool/tuto in a ready get wordpress plugin. it will be nice for starts users. thanks.

  30. Haroldo says

    hey very good job congratulations… i just wanna know if there some way for add like a timer or something and than the carousel change after some seconds to the next slide… Thx.

  32. Ivan says

    Hi,
    As I’m not a developper or feel comfortable with the code, I’ve got a stupid question : is it possible to download only your slider as a plugin or a widget ?
    Thanks for answering.

    • Dre says

      Ivan, thanks for the post. I actually have a plugin in the works for WP Post Carousel but it is not complete. It will offer the ability to create the carousel with multiple posts and multiple categories.

      I have been hard at work on http://wpvibe.com recently and we will be launching next week. Look out for the plugin to be released on WPV along side interviews and reviews of everything WordPress.

      I will be officially announcing WPV with a post in the next few days 😉

  35. Billy Hollis says

    Thanks for this tutorial. It was a LOT easier than I thought. I kept looking for a plug in, etc. I know they exist, but this way, I can really build it the way I want to. Thanks for your hard work!

  36. Billy Hollis says

    Hey, so I’ve got the slider pulling in my post excerpts, but for some reason it displays all 4 posts underneath the slider?

    Here’s my code:

    < >

    <a href="” rel=”bookmark” title=””>

      • Billy Hollis says

        Hey man, thanks, http://66.147.244.169/~beamento/

        I figured it out, but I’m sure there is a better way to do it. Basically, I had the call for content twice. Once within the slider and the other to call the actual home page content. But it would just repeat the slider content down the page instead of the home content.

        Anyway, what I did was use an include plugin to include the home page content below the slider. That way I could get rid of that second call for content, etc. Does that make sense?

        • Dre says

          Why not use two loops? The carousel loop and the home page loop, should work just fine and is not super heavy, especially on a page like that.

          None the less, it looks great and seems to be working well.

  37. yves says

    Hey Dre,
    Would you please have a look at this
    http://tinyurl.com/yclfwwb

    The script itself works perfectly, but somehow the number of posts in one slide isn’t limited to just one… I really can’t figure out what’s going wrong here…

    I’m using this code:

    <a href="” rel=”bookmark” title=””>

    1
    2

    Prev Next

    Many thanks in advance!

      • Dre says

        Yves, can you show an example please? The site you sent doesn’t seem to have this implemented.

        Also, if you can use pastebin to post all of the code, it would be easier to try and help.

        Thanks

      • Dre says

        yves check your javascript, I don’t think it is being implemented correctly. Are you using a local version or jquery off of Google API?

        • yves says

          oh now I see it, an incorrect path, what a stupid mistake. Thanks a lot for having a look at it though, I really appreciate it!

          • yves says

            Hi Dre… me again. Got the carousel working properly now, but I bumped in to another problem: if I put flash content into one of the messages, the flash object doesn’t really “disappear” when it shouldn’t be visible. Could you please have another look at the page? Is this something you’ve managed to overcome before?
            Thanks a lot!

    • Dre says

      It looks like the original creator of the site is no longer supporting the jFlow version I used for this tutorial. You can get it by downloading the theme I created with the carousel: http://demo.armeda.com

      Thanks for the heads up everyone 🙂

  39. Carkod says

    Hello Dre,
    since jflow’s site is no longer available I can’t figure out a way to tweak it. Do you know if there is a “autoslide” option to make the slides change automatically?
    Thanks

  40. Nessa says

    Hi, I downloaded the Wordousal-lite theme, and am not sure where the Jquery carousel files are? Are they the jquery.flow.1.2.js files?

    And how do I install the script?

    Thanks!

  42. Kalyani says

    Hi

    Is it possible to integrate jcarousel with SHOPP plugin and WPMU?

    Would appreciate your help in this!

    Regards

    • Dre says

      Kalyani, I haven’t done it but the jcarousel integration is all done in the theme so it shouldn’t be too difficult.

      • Kalyani says

        Thanks for the reply Dre..

        My problem is I’m able to integrate jCarousel with WP (Thesis theme), but not along with the SHOPP database…do you know if there is a separate plugin to do this or a standalone code for it? I’ve scoured the Internet and the SHOPP forums for help but without success!

        Your reply will be appreciated..

        Thanks!

        • Rion Dooley says

          @Kalyani Just ran across this post. If you’re still stuck, you might want to look into the code above. At the point he’s looking up the posts, query_posts(‘showposts=4&cat=5’);, replace that with your database callout and/or SHOPP content lookup. Once you have the info you need, just replace the title, content, excerpt, etc with your own content. Depending on how SHOPP stores its data, it shouldn’t be any big deal at all.

  45. joe says

    This can be a great point Philip, just comment. I didn’t test this unique script using wordpress_enqueue_script however it should work fine making use of your tutorial.

  48. chris says

    Dre, this is almost exactly what i was looking for. My question: is there anyway to show categories in the carousel instead of posts or pages? Then users could scroll through and see the different categories instead of different posts of the same category