You may have noticed a nice content slider on the new homepage for Brackish Waters Design.  This was implemented using Chris Coyier’s AnythingSlider which I have found to be very useful in the past few months.  Its ability to handle multiple types of data and slide smoothly with JQuery was a definite plus.  It took a bit of work but I was able to get the slider to grab 6 of latest posts to a specific category and automatically display these in the panes.

I run a separate include file for my home loop in WordPress which I will provide here but I will dump a bunch of the actions that you would not have.

        <div id="slideshow">
            <ul id="slider1">
 		<?php if (have_posts()) : ?>
         	<?php $recent = new WP_Query("cat=11&showposts=6"); 
			while($recent->have_posts()) : $recent->the_post();?>
                <li>    
                    <article class="article">
                        <div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	                            <div class="entry-content">
    	                            <?php the_excerpt(); ?>
	                            </div>
                        </div>
                    </article>
	        </li>				
		<?php endwhile; ?>
            <?php endif; ?>
	</ul> 
        </div>

The javascript that contains the data to populate the panels is also located within this home-loop.php and is at the end of the file after the loop has closed.

<script type="text/javascript">
	$('#slider1').anythingSlider({
		navigationFormatter: function (i, panel) {
			return [
			<?php $recent = new WP_Query("cat=11&showposts=6"); 
				while($recent->have_posts()) : $recent->the_post();?>
			'<?php the_title(); ?>',
			<?php endwhile; ?>
			][i-1]
		},
		startStopped    : false,
		autoPlayLocked  : true,
		delay 			: 5000, 
		resumeDelay     : 10000
	});
});
</script>

Its the specificity in the WP_Query that denotes what category you are using for the posts and how many panels you are showing. You still need to include the usual javascript for the slider such as jquery 1.6 and the slider.js from Chris’s site.

Tags: ,

About the Author: Sean Fitzpatrick

I provide services as a subcontractor for a number of great web development and design companies within the state of Maine. I also father two great kids, tend my annual garden, raise pigs/chickens, cruise the ATV trails and hunt every year. If you can't find me online, I am probably getting my hands dirty in some fashion.

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>