Create a featured posts slider in WordPress using jQuery

Many premium themes feature cool featured content sliding areas, where the latest posts appear. There is one such plugin, built around the Mootools library, but I wanted to use jQuery, as I prefer it over the other libraries. I also wanted it to automatically scroll. Of course, this can easily be modified to use the navigation buttons as well.

jFlow is an awesome tool to use for this purpose because it’s super lightweight, and the code is retardedly simple. Compared to coda slider and others, it’s a breeze. Install this, and set it up on your page where you would like it to appear. Play around with it for a bit.

Now you need to decide what you want to appear in the sliding window. In my case, I wanted an image, the post title, and an excerpt to appear. But first, we need to set up the PHP code to make this happen.

First, you need to call the scripts in header.php.

The PHP

First, put this bit of code just after your #myslides div and just before the first open div that will contain the first piece of sliding content. Here’s the source, in it’s entirety. We’ll break it down further.

That looks like a lot, and in fact it contains some custom fields. In between each blank div that jFlow provides, you can put whatever sliding content you want. In this example I created several new classes to hold content such as the title, excerpt and “read more” bits that the PHP pulls in, and later a transparent section to hold the written content.

If we wanted to simply display a post, with an excerpt, you’d place something like so in between the divs.

You can put whatever you want inside each slider div. If you want, insert a custom WP_Query loop for a certain category; display a single post, or static html.

But if featured posts is your choice, then in between each div, you must insert the following bit of code, which will look for more feature posts and not duplicate them.

So for the second div, you would repeat the above process, and replace the “1” with a “2” in the $countfeatured variable.

The CSS

I used some less-than-perfect CSS to get what I wanted. But here it is. The jFlow slider can be configured very easily with some CSS knowledge.

Now if you should choose to use the previous and next navigation, or style the controller nav, that’s up to you. I wanted to automate mine. Also notice the “featurecontainer” and “transparent” classes, which I use to structure post content. Copy the code and repeat the same steps above into the blank divs that jFlow provides and you should be all set.

Fire it up

Last thing you need to do is put this in your header.php head, just after the php wp_head tag.

Of course if you’re using the autoplay version, you’d want this simple extended version:

I hope this helps some people get started building a featured content slider with WordPress, and I look forward to updating this post with more detailed instructions. If you have any suggestions, tweaks, or can explain things further than I can (which is easy to do) please voice them.

Mike

Michael Meisner is a code-slinging, data crunching, growth hacking extraordinaire. He combines these powers to create traffic generation strategies and drive brand awareness for clients he works with. When he's not staring at a computer screen he can be found sipping a glass of wine with his Pit Bull and wife by his side.

17 Responses

Hi, I have been having so much problems with this i wondered if you could help me, about two weeks now!! I am a relative novice. i am using wordpress with visionary theme that displays a homepage – insert box at the top of the home page. you change the content of this box through the theme header admin settings in a text box there. I want to insert the coda slider in this home insert, but between the div’s and var’s i dont know where to place everything…boy i think if i can beat this i can do anything….any help would be greatly greatly appreciated as i cant sleep until i accomplish it!!

Just what I was looking for! and as usual part of my never ending learning curve. One question for now, could I amend this to work with author’s profiles and images? Hence pulling an image and a name. I have Weston Ruter’s “User Photo” that connects a single image to author, instead of an avatar. It introduces the userphoto_the_author_thumbnail() tag, but not sure on the details of how to mesh this together, or if it can be. Looking to create a slider of “Authors”.