Using jFlow In Your WordPress Theme

/ jQuery, Wordpress / by Paul Robinson / 24 Comments
This post was published back on January 4, 2010 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

One of the most popular features to add into a WordPress theme (or any other site design) seems to be the featured slider. That is, of course, a javascript or flash run slider that features an image and/or excerpt from a set of posts. I’m going to show you how to use jFlow, one of the best javascript sliders in my opinion, to add a featured post slider into a WordPress theme.

Getting The Scripts

First we need to get our scripts. First we need jQuery, but this all depends on whether or not the theme you are editing/creating already includes jQuery or uses WordPress’ built in version. If you view your page souce & you can’t find a script tag pointing to jQuery you don’t have to worry about it & you can download the latest version of jQuery from here.

Unfortunately the person who maintained jFlow had their blog hacked recently so there is currently only a few scattered websites that you can download jFlow from. However I’m offering the version I have for download. It is the latest version & also includes an edit that pauses the slider on hover. You can download it here. If your browser opens it, just hit ctrl+S and save it.

Starting Off

First thing you need to do is attach jQuery & jFlow. Again depending on whether or not you already have jQuery attached can play havok with jFlow. If you are sure you don’t have jQuery already attached go ahead an attach it and jFlow using the standard method:

If you already have jQuery attached then it can be tricky to sort out. In my case, as jQuery is already attached to my theme, I have to call all jquery using jQuery() instead of the standard $() mainly because no conflict has been called. It probably shouldn’t interfere, but try as I might I have not been able to get jFlow to work without using the already attached version & it’s no conflict operator. If you have this problem though I would advise replacing all the $‘s with jQuery.

jFlow HTML

First we are going to layout the HTML that jFlow uses to create the slider. Then we’ll add the CSS & then the PHP to make jFlow work dynamically. That way, while it will take longer, it will be easier to follow what is going on. So onto the HTML. Here is the standard jFlow HTML markup:

This is the standard HTML markup I have seen used for jFlow. I am going to use a slightly different markup for my example, which you can see later. The only main difference is that there is no slide-description container in the markup I’ve used.

jFlow CSS

I haven’t really found a standard CSS for jFlow, but here is the CSS I am using in my example:

It includes most, if not all, of the elements you can alter using CSS. I say that you can alter because some of them will be altered by inline styles, by jFlow, which cannot be overridden because of the CSS hierarchy.

Integrating PHP Into jFlow’s HTML Markup

Here we go, the interesting bit. This bit can sometimes be difficult to follow it you are just starting out with WordPress, but please bare with it. We are going to have 4 posts show from a category called ‘featured’, we are only going to show an image. We are also going to show a smaller thumb of the images instead of numbers in the controller, the part you click to jump to a certain slide. Anyway here we go:

Ok, let’s go throught that a little. First we create a new query. We then create a blank array, this is a part for the thumbnails later. We start a standard loop, just after that we store the current post in the array we created. I only want an image to show so I’m using my plugin the attached image along with timthumb to resize the image. Then we close the loop.

Next we go onto the controller section. As I said before I don’t just want a numbered list, I want to show a small thumbnail version of the image. It’s actually very similar to’s except for the fact that their version is flash. Here is how to do that:

Here is what is happening here. We open the controller div, although I don’t want next & prev we have to leave them or it will break jFlow. How do I get rid of them? Well that is what the display:none; is for in the CSS above. Next we loop through each post in the array we created before & place it back into WordPress’ global $post variable. This will allow the attached image to grab the image. If you wanted to use WordPress functions like the_content(); you would probably have to call setup_postdata($post) just after the foreach loop starts, but be aware that I haven’t tried it.

jFlow Init

Finally we need to write the code to initialize jFlow. It’s looks like this:

Please not that duration is NOT the length of time before the silde changes, it is how long it takes for the sliding transition to take. If you want to change the time before the slide changes you have to edit the JS file. On line 149 there is the number 3000 change that to the time you want. Remember that it is in milliseconds.

That should be it, if all has gone well you should end up with something that looks like the example on this page. It’s a little ugly because of the images not being big enough, but you get the idea.

Remember you can change this anyway you want as the basic idea is the same for any type of slider using jFlow. It just requires a bit of experimentation, remember to be brave, keep back ups and you can do pretty much anything with jFlow. let me know if you notice any mistakes, have any problems or need some help. Thanks for reading.


Author’s gravatar author

Not a problem. I wasn’t sure how well i’d explained it so thanks for letting me know it works. 🙂

Author’s gravatar

this is absolutely amazing article. thanks so much.

but one thing; I can’t work that “auto: true” property. here is my html codes:

all jflow system are perfectly working except the “auto” property.

a little help would be nice. thanks again.

Author’s gravatar

I’m not sure why auto isn’t working. I’ve scanned through your code but as far as I can see everything is fine…

If you are using FireFox with Firebug are there any errors? If not have you tried it without any other JS attached. Since the author of jFlows site got hacked there is no longer any documentation so I’m not sure if there are any conflicts with other JS such as Png fixes.

Other than that I’m not sure if the slider works except for the auto command…

Author’s gravatar author

I’m not sure if this is related, but while having a proper look through your pastebin I noticed you don’t have the previous & next buttons inside the controller div. Every time I have removed those it tends to break jFlow in a weird way. Nearly every use of jFlow I have seen keeps them & just adds display:none; to make them disappear.

I don’t know if that is the cause, but I guess it might be worth a shot. 😉

Author’s gravatar

oh yes, that is definitely worth a shot. you were right, prev&next buttons should be inside the div controller. this is weird but it works.

thanks a lot again. I’m very grateful.

Author’s gravatar author

It is a little strange. It’s probably due to the way the script was written. It may look for the next & prev buttons when initialising the auto scroll, so if they aren’t there the script will not auto scroll.

I’m glad you got it working though. 😉

Author’s gravatar

So do I, Paul.
Hereafter, you’ll be first person to look when I’m having trouble like this weird situations.

I’m tracking 🙂

Author’s gravatar

What a great tut! I’m having a slight problem. Everything works but when i put in three or more posts, it will go crazy. Everything doesn’t appear in a slider anymore, when I put it back to two, it will appear normally. Very strange. Can someone help me. The url is

Thanks in advance

Author’s gravatar

Sorry, solved it myself. It had something to do with placing the loop before slide-wrapper and slide-thumbnail divs.

Author’s gravatar author

Hey there Thijs,

Great job with the slider it looks great & glad you got it fixed. 😉

Also thank you, it’s nice to know my tutorials are actually helping people. 🙂

Author’s gravatar

Cool! I just came to your blog via Google and I seriously loved it! The effort you do in posting here is seriously fantastic and I am pleased about it. Keep going buddy.

Author’s gravatar

I don’t think your example is working. Thanks for the tutorial.

Author’s gravatar author


Indeed it was broken, thanks for letting me know. It should be all fixed it now.

Thanks and I hope the tutorial helped you. 😉

Author’s gravatar

How to let it auto start on the second one?
Like there are 4 different slides, how to let it start on the second or maybe on the third?

Author’s gravatar author

I’m not sure that’s possible without hacking the plugin to bits.

There is a variable called cur defined near the top of the plugin. You could try setting that to the number of the slide you want to show, remembering to count from 0 instead of 1. Not sure if it’ll work, but no harm in trying it out. 😉

Author’s gravatar

I know it is an older post, but had to let you know it is a great tutorial. Worked great the first time I tried – which has not been the case today 🙂


Author’s gravatar author

Thanks Adam.

Glad to know my tutorials are helpful. 😉

Author’s gravatar

Get an error
Fatal error: Call to undefined function the_attached_image()
I have attached an image normally, as featured image and using a custom field. Nothing works.
How are you doing it?

WP version 3.1
jQuery 1.5.0

Author’s gravatar author

Hi Howard,

as it says in the tutorial I use the plugin The Attached Image to display the image attached to the post. You will need to install it from the plugin directory if you haven’t already.

Author’s gravatar

I had to go back and re-read the tutorial to find the attached image plugin reference. Got it and now works great.
You might want to consider making the reference a link and also a reference link to timthumb.
Thanks for a great plugin and tut.

Author’s gravatar

Your means of telling all in this paragraph is really fastidious, all be able to effortlessly understand it, Thanks a lot.

Older Comments
Newer Comments

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more