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.

To begin, you will need a few things:

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.

have_posts()) : $my_query->the_post(); $do_not_duplicate = $post->ID; ?>

Posted on

name . ' '; } } ?>

" alt="" class="left" /> ID, "thumb", true); if ($thumb != "") { ?> " alt="" class="thumb" />
Read Post...

Posted on
Skills: name . ', '; } } ?>

Read Post...
" alt="" class="featureimg" /> ID, "thumb", true); if ($thumb != "") { ?> " alt="" class="thumb" />

Posted on
Skills: name . ', '; } } ?>

" alt="" class="left" /> ID, "thumb", true); if ($thumb != "") { ?> " alt="" class="thumb" />
Read Post...

Posted on
Skills: name . ', '; } } ?>

" alt="" class="left" /> ID, "thumb", true); if ($thumb != "") { ?> " alt="" class="thumb" />
Read Post...

This set’s the slider to query posts in a category – in this case, “Featured”, and to show four of them.

Now let’s make the first featured entry.


View project
" alt="" class="featureimg" /> ID, "thumb", true); if ($thumb != "") { ?> " alt="" class="thumb" />

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.

/* =Featured Slider
-------------------------------------------------------------- */
#featurewrap {float: right; width: 520px;}/*holds entire feature container*/
#myController span{color:#FFF;margin-right:10px;cursor:pointer;}
#mySlides {}
#mySlides div {padding: 0px;} /*the divs that hold sliding content*/
#jFlowSlide{float: right; margin-top: -5px; background:url(images/featured.png) no-repeat; overflow: hidden; z-index:10;}/*bg image for slider*/
#jFlowSlide img {z-index:4;}
#myController span.jFlowSelected {background:#F00;}

#prevNext{position: absolute; margin: 100px 100px 0 -21px; width: 595px;}/*The navigation buttons, custom positioned*/
#prevNext img{position: relative;z-index: 2;cursor: pointer;}

.jFlowPrev{float: left; background: url(images/leftarrows.png) no-repeat left top; height: 35px; width: 45px;}/*left arrow*/
.jFlowPrev:hover {background-position: left bottom;}
.jFlowNext{float: right; background: url(images/rightarrows.png) no-repeat; height: 35px; width: 45px;}/*right arrow*/
.jFlowNext:hover{background-position: left bottom;}
jFlowSlideContainer .entry {float: right; margin-top: 10px; width: 180px;} /*the featured post entry*/

.featureimg { margin:16px 13px; border: thin solid gray; float: right; z-index:1;} /*the white background on each feature*/
.featurecontainer {background: white; position: absolute; width:470px; height: 100px; margin: 127px 200px 0px 16px; z-index:3; padding: 5px;}/*container for written post content*/
.feature {margin-left: 28px;}
.feature-title {margin: 5px 0px 0px 5px;}
.featurecontainer p {margin: 0px 10px 0px 10px;!important padding-left: 5px;}
.transparent {
filter:alpha(opacity=90);
-moz-opacity:0.9;
-khtml-opacity: 0.9;
opacity: 0.9;
}
.readmore {margin-left: 10px;}

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:

<script language="javascript">
$(document).ready(function(){

	$("#myController").jFlow({
		slides: "#mySlides",
		width: "470px",
		height: "210px",
		autoplay: 'true',
		easing: 'easeIn',
		duration: 1200
	});
});
</script>

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.

You may also like...

17 Responses

  1. simon says:

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

    thanks in advance for your answer

  2. admin says:

    Hey Simon, that’s a bit of a tough one. I don’t have that theme, and haven’t seen any of the code. Trying to insert the coda slider in the content box they give you may not be the way to go about it.

    Instead you might want to simply style it, and insert it into the theme yourself. Sorry for my late response and good luck. Let me know if you get it done.

    Mike

  3. kurt says:

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

    thanks – k

  4. its me says:

    1. your link to download jflow 1.2 is broken

    2. Your text in the “example” boxes is all cut off and can’t be read or copied — rendering this tutorial virtually useless.

  5. V.C says:

    It’s seem to be hard to do like what you wrote.

  6. fengsuhi says:

    Mike, I think your code-highlighter plugin doesnt work thats why the tutorial is a mess. Please fix it because the post is really helpful but I can’t use the code!

  7. Thanks for your efforts,
    Why dont you create a ready to install wordpress plugin for that.

  8. Ben says:

    Hi!
    I’ve been looking for the downloadable plugin that is still working. Can you provide the original files for download?
    Thank you!

Leave a Reply

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

EmailEmail
PrintPrint
Attract more visitors

Get the latest blog updates, and email exclusive content that shows you how to:

  • Attract targeted visitors to your site
  • Engage those visitors in creative ways
  • Move visitors down the buying funnel
  • Find profitable niches to pursue

NOTE: I will NEVER spam you with cheesy promotions or share your information with anyone.