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.
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.
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 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="http://armeda.com/how-to-create-a-jquery-carousel-with-wordpress-posts/" 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="http://armeda.com/how-to-create-a-jquery-carousel-with-wordpress-posts/" 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.
Edit:
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.
Nice work.
Is it possible to do this with pages? I assume so.
Nic, are you asking if you can output a page in the carousel, or if the carousel can be built on a custom page?
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?
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
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 :)
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?
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
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
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;
}
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.
Thank you for the comment. I will starting plugin development in the next few weeks.
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.
Nice Exactly what I needed.
I’ll give it a try and let you know how it went.
You may wish to note that jQuery is already installed in current versions of WordPress. Because of this, you will want to be careful about adding additional references to it in the head portion of your HTML.
Here’s a link that will help you ensure you’re linking to jQuery correctly. http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/
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.
it is possible to make that featured post auto sliding using jQuery Carousel?
if yes can u please teach me how
Yoshz, there are some good resources on the jFlow post found on the developer site – http://bit.ly/p24fc
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?
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
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() {
?>
< ?php
}
add_action('wp_head','jquery_google');
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');
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.
Cy, thanks for the comment. I have a few posts in the works, one of them is using custom fields to output images. This applies to the use of images within the carousel.
Very cool tutorial!!
Looking forward to learning how to add the photos to the carousel.
Hi JMA689,
New post up showing how to use custom fields to do just that :)
http://bit.ly/4dDwbd
Enjoy.
What about the solution to use the native (embedded) version of jQuery (1.3.2) of wordpress ?
I miss something …
Is it possible to have a basic source template wordpress to see how it’s work ?
I was just wondering if there’s a way to list a few posts in each content div, then make the list continue in the next content div, if you get what I mean. Similar to the layout at http://wearehunted.com/
Li-Cheng, there is absolutely a way to do this :) I am working on a multi-post per panel HOW TO as we speak.
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!
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.
Is it possible to have 2 of these carousels on 2 different pages. I want to use it to handle sub pages as I have done here – http://pressplaysolutions.com/dev/services/
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.
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?
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.
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.
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.
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
The jQuery version I included in my comment above works fine. What version did you load?
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.
jetmarte,
I will be releasing a free theme including the carousel very soon ;)
Thanks
jquery on my WordPress site made simple: Thanks!!! I’m anxiously awaiting more.
I just released the first theme including WP Post Carousel. Very simple theme and it is free :)
http://armeda.com/wordousel-lite-wordpress-theme/
There will be more in a series based on the post carousel. Some premium themes will be offered including a magazine style, portfolio carousel, and business theme.
Stay tuned. Just need more hours in the day :)
thanks, very nice
My pleasure, I am glad you like it. Make sure to check out the first free theme I created with WP Post Carousel – http://armeda.com/wordousel-lite-wordpress-theme/
Would you be able to post instructions as to how to integrate this in Thesis?Thanx…
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
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
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!
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 :)
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
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.
James I followed on Twitter, DM me, would love to help.
~Dre
this is great .. but i have the problem with my wordpress theme its not adjust the jquery with title post
What do you mean it is not adjusting?
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?
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?
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
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?
can you use pastebin to post the whole template and then post a link? I would like to see all the code if possible.
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?
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.
Please contact me via contact form and I will assist you.
hi. why you dont transform this great tool/tuto in a ready get wordpress plugin. it will be nice for starts users. thanks.
I have plans to do exactly that down the road when things slow down.
I am in the middle of building a WordPress resource website: http://wpvibe.com Stay tuned for that first :)
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.
Hi, Dre! its great work. good job. i will stay tuned for this. and others vibes. thanks!!
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.
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 ;)
Hey man,
Trying to make it look someone decent in IE 8. Whenever the next button is clicked it seems the slide overlaps the previous some. http://twitpic.com/os69e
Link to install: http://www.joebrooks.me/wp07/
any help would be appreciated :D
@joebrooks on twitter
Great theme. Did you get everything as you want it?
Hi Dre,
Have you had a chance to get the plugin working? Or do you need beta testers?
thanks,
mrj
Manish,
the plugin is on is on standby for a few more weeks. I have been working on http://wpvibe.com
I will most likely release it there vice here. I will make an announcement when it is ready for testing.
Thank you.
Dre
Dre,
Sounds good, can’t wait.
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!
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, do you have a link to the implementation?
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?
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.
testing
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!
woops
<a href="” rel=”bookmark” title=”">
1
2
Prev Next
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
hey Dre, thanks for your response, the full url is http://www.blackboxrevelation.com/wordpress/ and the code
< ?php query_posts('showposts=2&cat=3'); ?>
< ?php if (have_posts()) : ?>
< ?php while (have_posts()) : the_post(); ?>
< ?php the_title(); ?>
< ?php the_excerpt(); ?>
< ?php endwhile; ?>
< ?php endif; ?>
2
Prev Next
hey Dre,
In the meanwhile, I installed your carousel theme, but Iam still experiencing the same issue: the posts just show up underneath each other… any chance you can have a look at it? thanks buddy!
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?
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!
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!
Hi!
nice tut!
But the download link is broken, pls can u update it so i can use this awesome plugin!
thanks mate”!
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 :)
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
I did receive some stuff from a reader on autoslide, stand by and I will have it up soon :)
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!
I have been looking for something like this. Finally got it.
Thanks a ton man for sharing this useful info!!
Hi
Is it possible to integrate jcarousel with SHOPP plugin and WPMU?
Would appreciate your help in this!
Regards
Kalyani, I haven’t done it but the jcarousel integration is all done in the theme so it shouldn’t be too difficult.
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!
thanks for share this tutorial. I need this. Good job sir