How To Code A WordPress Featured Slider

They're pretty much everywhere on just about every blog and website these days, the featured post slider. Not terribly hard to implement, but still confusing to some that do not know the WordPress API. In this tutorial I will show you how to code your own WordPress Featured Post Slider and integrate it into your WordPress theme.

I would like to start out by saying that you can see demonstrations of this slider technique on the front page of this site and on the demo for the Illuminati WordPress theme.

Getting Started

Since this tutorial is about integrating a slider into WordPress I won't go into specifics about coding the JavaScript portion, but instead give you some good examples of already working code that can be used. There are many to choose from, but if you look at the demonstrations they all accomplish the same goal in their own way.

• Nivo Slider
• jQuery for Designers Slider
• Css-Tricks Auto-Playing Slider
• Css-Tricks Anything Slider

For the purpose of this tutorial I'm going to use the auto-playing slider from Css-Tricks. It has a solid frame in which to work with and can be modified easily to suit our needs as well as the other sliders that were listed.

We will also need to include some jQuery plugins for the effects portion of our slider. For this portion I usually include the plugin and slider code in one file. This makes the process a little easier especially since I usually only call the slider code on the home or front page as to not load additional script where it's not needed. We'll get to that portion later on in the tutorial.

Start by creating a new file called slider.js and save it in a folder in your wp-content/themes/yourtheme theme folder called "js" or whatever you would like. Download the necessary files that are needed to make your slider work and the source from the slider of your choice from above and open them in your editor of your choice.

• jQuery Easing Plugin
• jQuery Easing Compatibility Plugin
• Coda-Slider 1.1.1

Creating The Slider File

Now that we have everything we need to get started, copy the slider code at the top of the file and each plugin into your slider.js file and save it.

We also want to be sure our code doesn't conflict with other libraries that might be included with installed plugins. To do this we are going to edit the code to specify the jQuery no-conflict setup method. Basically we want to ensure control of our slider code remains with jQuery since other libraries can also control our $ variable. We do this by changing the $ variable to jQuery instead. Be sure the variable calls to $ remain intact.

slider.js

var theInt = null;
		var $crosslink, $navthumb;
		var curclicked = 0;

		theInterval = function(cur){
			clearInterval(theInt);

			if( typeof cur != 'undefined' )
				curclicked = cur;
			$crosslink.removeClass("active-thumb");
			jQuery(".the_title").fadeOut("normal");
			$navthumb.eq(curclicked).parent().addClass("active-thumb");
			jQuery(".the_title").fadeIn("normal");
				jQuery(".stripNav ul li a").eq(curclicked).trigger('click');

			theInt = setInterval(function(){

				$crosslink.removeClass("active-thumb");
				jQuery(".the_title").fadeOut("normal");
				$navthumb.eq(curclicked).parent().addClass("active-thumb");
				jQuery(".the_title").fadeIn("normal");
				jQuery(".stripNav ul li a").eq(curclicked).trigger('click');
				curclicked++;
				if( 5 == curclicked )
					curclicked = 0;
			}, 5000);
		};

		jQuery(function(){

			jQuery("#main-photo-slider").codaSlider();

			$navthumb = jQuery(".nav-thumb");
			$crosslink = jQuery(".cross-link");

			$navthumb
			.click(function() {
				var $this = jQuery(this);
				theInterval($this.attr('href').slice(1) - 1);
				return false;
			});

			theInterval();
		});

Properly Calling jQuery and Effects

WordPress by default includes the latest version of jQuery. Since our slider is powered by jQuery and uses the easing and numerous other effect plugins, we need to call them correctly using wp_enqueue_script instead of just hard coding more JavaScript into the header that might cause conflicts.

Register and Enqueue The Scripts

The proper way to call the scripts needed to power our slider in WordPress is using wp_register_script and wp_enqueue_script, make sure they are placed above the wp_head call in the header and are all named accordingly to match the ones you inserted into your wp-content/themes/yourtheme/js folder. If your slider is being called on your homepage only, be sure to wrap the JavaScript in is_home or is_front_page to eliminate calling scripts when they aren't needed.

<?php
function other_js() {
wp_register_script('jquery-easing', bloginfo('template_directory') . '/js/jquery.easing.1.3.js', array('jquery'));
wp_register_script('jquery-easing-compatibility', bloginfo('template_directory') . '/js/jquery.easing.compatibility.js', array('jquery'));
wp_register_script('jquery-coda-slider', bloginfo('template_directory') . '/js/coda-slider.1.1.1.js', array('jquery'));
wp_enqueue_script('jquery');
wp_enqueue_script('jquery-easing');
wp_enqueue_script('jquery.easing.compatibility');
wp_enqueue_script('jquery-coda-slider');
wp_print_scripts();
}
?>

or perhaps using the CDN copy of jQuery instead of WordPress’s:

wp_deregister_script('jquery');
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js');
wp_enqueue_script('jquery');

The Markup

Now that we have the basic JavaScript functionality worked out and we're sure it's not going to interfere with any other library, we can start working on our layout for the markup. For my implementation I create a new file called "slider.php" and then show it on the index or home page using a php include like this:

<?php include (TEMPLATEPATH . '/slider.php'); ?>

It's important that we set a structure that will allow for all of our items to work and interact with each other, this will include a system of div id's and classes. Yes, the bare markup below has a severe case of divititus but it works for the styling I was trying to achieve and I've made sure to comment and nest it properly to make it a little more clear as we go.

slider.php

<div id="slide_wrap">
<!-- featured banner image -->
	<div id="featured"></div>
<!-- end featured banner image -->
<!-- start slider images -->
	<div class="slider-wrap">
		<div id="main-photo-slider" class="csw">
			<div class="panelContainer">
				<div class="panel">
					<div class="wrapper">
                                                IMAGE
						<div class="the_title">
                                                      TITLE
                    	</div><!-- end the_title -->
					</div><!-- end wrapper -->
				</div><!-- end panel -->
			</div><!-- end panelContainer -->
		</div><!-- end main photo slider -->
<!-- end slider images -->
<!-- Start thumb section -->
	<div class="slide-thumb">
              POST COUNT AND PERMALINKS
  		<div class="cross-link active-thumb">
  		</div><!-- end cross-link active-thumb -->
	</div><!-- end slide-thumb -->
<!-- end thumb section -->
	</div><!-- end slider-wrap -->
</div><!-- end slide wrap -->

Integration With WordPress

Starting with the very top div I will walk you through each section and try to explain what each section does. Here's what we are going to accomplish:

• Since we want to feature 5 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable $postcount that we can use to track our progress.
• Retrieve a query from the WordPress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 5 posts in the featured category. For this to work a category must be created called "featured" with a slug of the same name. If you want to learn more about wp_query and what you can do with it, check this out: http://codex.wordpress.org/Function_Reference/WP_Query
• Loop through each of the posts we have retrieved from the database and display them as our five featured posts. We want the number and a button for each post to automatically appear in the navigation section of our slider.
• Prevent duplicate posts from showing up using a simple but important bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.

Below is the code for our WP_Query that sets the post count, queries the database for five posts in the category "featured", makes sure the posts aren't duplicated by checking the ID and then adding another to the post count and cycling four more times.

<?php
	$postcount = 0;
	$featured_query = new WP_Query('showposts=5&category_name=featured');
	while ($featured_query->have_posts()) : $featured_query->the_post();
	$do_not_duplicate[] = get_the_ID();
	$postcount++;
?>

Filling The Panels

Next, we create our image panels. This is where the power of our $postcount variable comes in. Rather than manually creating each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable with some simple PHP, allows us to automate the process.

<div class="panel" id="featured-<?php echo $postcount; ?>">

Image content goes here

</div> <!–- end panel –->

Showing The Featured Images

Now we need to check the post against the custom field of main and if it has a value, show the image for that post.

<div class="wrapper">
<?php
// get the image filename
$value_feat_img = get_post_custom_values("main");
if (isset($value_feat_img[0])) { ?>

<a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><img class="frame" src="<?php $values = get_post_custom_values("main"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a>

<?php } ?>
</div><!-- end wrapper -->

On this site and I am pulling data from the post’s custom field named main to get the featured image. To use the image I simply upload it, grab the image url and close the uploader interface, then paste the full url into the custom field and click the Add Custom Field button.

Displaying the Post Title And/Or An Excerpt

Now we want the post title or a small excerpt to go along with the image. We create another div called the_title after that last php closing tag go from there.

Using the post title:

<div class="the_title"><a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><?php the_title(); ?></a></div>

Using an excerpt and title:

<div class="the_title"><a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><?php the_title(); ?></a>
<p><?php the_excerpt(); ?></p>
</div>

Keep in mind when using the post excerpt that this will increase the size of your div that houses the text so some re-styling will be involved and if you wish to customize the excerpt being used, please see the page on the WordPress codex.

That’s all we need inside each one of our sliding panels. Ending our loop we opened in the WP_Query section is all we need to do and close the remaining divs.

<?php endwhile; ?>
</div><!-- end panelContainer -->
</div><!-- end main photo slider -->

Adding Button or Thumbnail Navigation

To display a number with a button for navigating the content of our slider, all we need to do is duplicate the WP_Query from above but instead use the $postcount as opposed to the_permalink().

navigation with a number button

<div class="slide-thumb">
<?php
  $postcount = 0;
  $featured_query = new WP_Query('showposts=5&cat=7');
  while ($featured_query->have_posts()) : $featured_query->the_post();
  $do_not_duplicate[] = get_the_ID();
  $postcount++;
?>
  <?php   // get the image filename
  $value_img = get_post_custom_values("main");

  if (isset($value_img[0])) { ?>
   <div class="cross-link active-thumb"><a href="#<?php echo $postcount; ?>" class="nav-thumb" title="<?php the_title(); ?>"><?php echo $postcount; ?<</a>
  </div>
<?php } ?>
<?php endwhile; ?>
</div><!-- end slide-thumb -->

</div><!-- end slider wrap -->

To display a thumbnail for navigating the content of our slider, all we need to do is duplicate the WP_Query from above again but instead use the custom field value like we did for our main image, but instead call the value of the thumb custom field.

navigation with a thumbnail

<div class="slide-thumb">
<?php
  $postcount = 0;
  $featured_query = new WP_Query('showposts=5&cat=7');
  while ($featured_query->have_posts()) : $featured_query->the_post();
  $do_not_duplicate[] = get_the_ID();
  $postcount++;
?>
  <?php   // get the image filename
  $value_img = get_post_custom_values("thumb");

  if (isset($value_img[0])) { ?>
<div class="cross-link active-thumb"><
  <a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><img class="nav-thumb" src="<?php $values = get_post_custom_values("thumb"); echo $values[0]; ?>" alt="<?php the_title(); ?>" /></a>
  </div>
<?php } ?>
<?php endwhile; ?>
</div><!-- end slide-thumb -->

</div><!-- end slider wrap -->

The Complete Slider.php Code

Here is the complete code for the slider.php file. Feel free to tweak and modify to suit your needs.

<div id="slide_wrap">
  <div id="featured"><img src="<?php bloginfo('template_directory'); ?>/images/featured.png" alt="Featured Content" /></div>
  <div class="slider-wrap">
    <div id="main-photo-slider" class="csw">
      <div class="panelContainer">
<?php
	$postcount = 0;
	$featured_query = new WP_Query('showposts=5&cat=7');
	while ($featured_query->have_posts()) : $featured_query->the_post();
		$do_not_duplicate[] = get_the_ID();
		$postcount++;
?>
	<div class="panel" title="Panel <?php echo $postcount; ?>">
	 <div class="wrapper">

<?php
// get the image filename
$value_feat_img = get_post_custom_values("main");
if (isset($value_feat_img[0])) { ?>
<a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><img class="frame" src="<?php $values = get_post_custom_values("main"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>

<?php } ?>
<div class="the_title"><a rel="bookmark" href="<?php the_permalink(); ?>" title="Read <?php the_title(); ?>"><?php the_title(); ?></a></div>
</div><!-- end wrapper -->
</div><!-- end panel -->
<?php endwhile; ?>
</div><!-- end panelContainer -->
	</div><!-- end main photo slider -->
  <div class="slide-thumb">
<?php
	$postcount = 0;
	$featured_query = new WP_Query('showposts=5&cat=7');
	while ($featured_query->have_posts()) : $featured_query->the_post();
	  $do_not_duplicate[] = get_the_ID();
	  $postcount++;
?>
  <?php   // get the image filename
  $value_img = get_post_custom_values("main");
	if (isset($value_img[0])) { ?>
  <div class="cross-link active-thumb"><a href="#<?php echo $postcount; ?>" class="nav-thumb" title="<?php the_title(); ?>"><?php echo $postcount; ?></a>
  </div>
<?php } ?>
<?php endwhile; ?>
</div><!-- end slide-thumb -->
</div><!-- end slider wrap -->
</div><!-- end slide wrap -->

Styling The Slider

Now that we have the framework laid for the working slider all we need to do is give it some style. I've provided a basic style below that you can tweak to suit your needs.

/*Slider ------------------------------------------------------------*/
#slide_wrap {
	float:left;
	padding:15px 20px 15px 20px;
	width:600px;
	overflow:hidden;
	clear:right;
}
#featured {
	margin:2px 0 -109px -1px;
	position:relative;
        background: url(yourfeaturedimage.jpg) no-repeat;
	z-index:999;
	width:32px;
}
.frame a img {width:600px;height:260px;}
.the_title {
	display:none;
	position:absolute;
	bottom:0;
	left:0;
	text-align:left;
	padding:15px 20px 12px 20px;
	background: #000;
	width:560px;
}
.the_title a {
	color:#fff;
	text-transform:uppercase;
	font-size:85%;
	text-shadow:#000 0px 1px 1px;
}
.the_title a:hover {
	border-bottom:1px solid #fff;
}
#main-photo-slider {
	border:6px solid #333;
	background:#333;
	height:260px;
	width:590px;
	overflow:hidden;
}
.panel {height:260px;overflow:hidden;}
.panel ul	{ text-align: left; margin: 0 15px 0 30px;  }
.stripViewer {
 	position: relative;
 	overflow: hidden;
	width: 600px;
	height: 263px;
}
.stripViewer .panelContainer{ position: relative; left: 0; top: 0;}
.stripViewer .panelContainer .panel{
	float: left;
	position: relative;
	width: 600px;
}
.stripNavL, .stripNavR, .stripNav	{ display: none; }
.cross-link a {
 	background: url(yournavimage.jpg) no-repeat top;
	width:28px;
 	height:24px;
	margin-right:8px;
	padding:3px 0 0 1px;
	*padding:2px 0 0 0;
	float:left;
 	text-align:center;
 	color:#fff;
	font-weight:bold;
	text-shadow:#000 0px 1px 1px;
}
.active-thumb a{
	background: url(yournavimage.jpg) no-repeat top;
	background-position:-12px -26px;
 }
.slide-thumb {
	margin:-40px 0 0 405px;
	width:890px;
	position:relative;
	z-index:999;
}

While this isn't a complete copy and paste solution for those looking to slap something together, it will give you a basic understanding of how to integrate your own slider into a WordPress theme.

Happy coding and thanks for reading.