Create a featured posts slider in WordPress using jQuery

        


No 2
No 3> 
No 4 









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



	
				

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.