This tutorial is going to show you how to integrate a slider into a WordPress loop. So firstly, why would you want to do that? Well instead of having to manually add your image URLs and text into the slider code you can simply add your WordPress posts and/or pages to your slider from which you can upload your images and type your text. Take a look at my Juggernaut theme for an example of the what we want to build.

1. Getting Started

I’m going to be adding my slider to the homepage of the TwentyTen theme so everyone can follow along, but this tutorial can be applied to any theme. I’m using the s3Slider. Head over to the site and download the “Uncompressed” version of the slider – this will give you a single file called s3Slider.js. Now create a new folder called “js” in your “twentyten” theme folder (or whatever theme you are using) and move s3Slider.js into it.

2. Preventing Javascript Conflicts

We’ll start off by making sure our slider javascript runs on this theme without any conflicts. To do this open header.php and find:

<?php
	/* We add some JavaScript to pages with the comment form
	 * to support sites with threaded comments (when in use).
	 */
	if ( is_singular() && get_option( 'thread_comments' ) )
		wp_enqueue_script( 'comment-reply' );

	/* Always have wp_head() just before the closing </head>
	 * tag of your theme, or you will break many plugins, which
	 * generally use this hook to add elements to <head> such
	 * as styles, scripts, and meta tags.
	 */
	wp_head();
?>

Add directly above:

<?php wp_enqueue_script("jquery"); ?>

3. Loading the Javascript Files

Now we’ll open index.php, which looks like this:

<?php
/**
 * The main template file.
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 * Learn more: http://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Ten
 * @since Twenty Ten 1.0
 */

get_header(); ?>

		<div id="container">
			<div id="content" role="main">

			<?php
			/* Run the loop to output the posts.
			 * If you want to overload this in a child theme then include a file
			 * called loop-index.php and that will be used instead.
			 */
			 get_template_part( 'loop', 'index' );
			?>
			</div><!-- #content -->
		</div><!-- #container -->

<?php get_sidebar(); ?>
<?php get_footer(); ?>

The following code loads the slider javascript file and tells the document that the container with the ID “#slider” will become our slider. You can add this just below the line get_header(); ?> or alternatively add it to header.php, this does not really matter.

<script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/s3Slider.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
	jQuery('#slider').s3Slider({timeOut: 4000});
});
</script>

We do not need to add the other jQuery library file that S3Slider mentions as WordPress already has this library built-in.

4. Creating A Loop

Now we’ll create a basic WordPress loop. All this does is look for posts and if it finds any it will output the code you insert inside the loop.

<?php if (have_posts()) : ?>

        <?php while (have_posts()) : the_post(); ?>

                 <!--Your slider code goes here-->

        <?php endwhile; ?>

<?php endif; ?>

5. Integrating the Slider Code

We’ll now insert our slider code into the loop. Notice how the parts of the slider code we want repeated for every slide is inserted in between the while (have_posts()) : the_post(); php tags, whereas the parts we only want to be display once to surround the entire slider are inserted before while (have_posts()) : the_post();. This is a very important point and one to always remember.

<?php if (have_posts()) : ?>

<div id="slider">

	<div id="sliderContent">

		<?php while (have_posts()) : the_post(); ?>

			<div class="sliderImage">		

			</div>

		<?php endwhile; ?>

		<div class="clear sliderImage"></div>

	</div>

</div>

<?php endif; ?>

6. Loading the Post Content

Each slide will correspond to a WordPress post you create and therefore we can output the post link, text and image uploaded to the post in the slider with the following code.

<div class="sliderImage">
	<a href="<?php the_permalink(); ?>" class="sliderLink"><?php the_post_thumbnail('slider_image'); ?></a>
	<span class="cap-right">
		<h1><?php the_title(); ?></h1>
		<p><?php the_excerpt(); ?></p>
	</span>
</div>

In order to use the_post_thumbnail('slider_image') we will need to specify the size of our slider images in functions.php. Open functions.php and find:

add_theme_support( 'post-thumbnails' );

Below this add:

get_option('thumbnail_crop');
add_image_size('slider_image', 940, 340, true);

You can change the width and height from 940px x 340px to whatever you want and turn automatic cropping off by changing true to false.

While we’re in functions.php you will want to find and remove the following code which does not work well with the s3Slider.

<span class="meta-nav">&rarr;</span>

7. Controlling what Posts are Displayed in the Slider

You will also want to be able to control what posts are displayed in the slider and how many. To do this we need to alter the loop slightly to create a custom query like so:

<?php query_posts('cat=6&posts_per_page=5'); ?>

<?php if (have_posts()) : ?>

<div id="slider">

	<div id="sliderContent">

		<?php while (have_posts()) : the_post(); ?>

			<div class="sliderImage">
				<a href="<?php the_permalink(); ?>" class="sliderLink"><?php the_post_thumbnail(('slider_image'), array('title' => '')); ?></a>
				<span class="cap-right">
					<h1><?php the_title(); ?></h1>
					<p><?php the_excerpt(); ?></p>
				</span>
			</div>

		<?php endwhile; ?>

		<div class="clear sliderImage"></div>

	</div>

</div>

<?php endif; wp_reset_query(); ?>

Notice we now start the loop with query_posts('cat=6&posts_per_page=5');, which specifies that only the first five posts from the category with ID 6 will be displayed. We also end the loop with wp_reset_query(), this is very important as it closes this custom query so it doesn’t affect any queries below it.

You can use a whole variety of parameters in query_posts();, all of which can be found in the WordPress Codex.

8. Styling the Slider

Now we need to make the slider look nice. Add the following code to style.css, and don’t forget to change the height and width of #slider to your own specifications:

#slider {
width: 940px;
height: 340px;
margin: 20px 0;
position: relative;
overflow: hidden;
}
#sliderContent {
position: absolute;
top: 0;
margin-left: 0;
}
.sliderImage {
float: left;
position: relative;
display: none;
}
.sliderLink {
display: block;
line-height: 0;
padding: 0;
margin: 0;
}
.sliderImage span {
display: none;
position: absolute;
background: #fff;
padding: 20px;
font-family: Arial;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
}
.sliderImage span h1 {
font-size: 20px;
line-height: 1;
}
.cap-right {
bottom:0;
right:0;
width: 210px;
height: 300px;
}
.clear {
clear: both;
line-height: 0;
padding: 0;
margin: 0;
height: 0;
display:block;
font-size:0;
width:100%;
}

And that’s it! You can obviously do a lot more with the slider than I have shown here, but this is not a tutorial for the s3Slider, it’s a basic introduction on how to integrate a slider into your WordPress loop.

→   This item is free to use in commercial projects, no attribution necessary.