Adding a Featured Content Slider to Thesis in 5 Quick Steps

One of the most popular features to have in websites today is the “featured content slider” (or “featured post slider”). It gives people a glimpse into your better posts and can catch their attention right away. For these reasons, it was one of the first features I included in my latest premium Thesis skin.

Today I’m going to tell you how you can do it for your own Thesis site (if for some crazy reason you don’t use Thesis Magazine :p)

So without further ado, here’s how to add a jQuery-powered featured content slider to Thesis in 5 quick steps:

The Instructions

I’m using the s3slider as my slider of choice. It doesn’t have navigation buttons, but I find it quick, easy, and great at doing what it does. You can try experimenting with different sliders if you feel comfortable and want other functionality.

1. Download the necessary file from the s3slider homepage (s3Slider.js) and then upload it to your website.
2. Turn on jQuery (Thesis Page Options > Javascript) and place

   <script src="js/s3Slider.js" type="text/javascript"></script>
   	<script type="text/javascript">
   	$(document).ready(function() {
      	$('#s3slider').s3Slider({
         	timeOut: 4000
      	});
   	});
   	</script>
   

   in the Additional Scripts section of the Thesis Site Options (where js/ is the directory of your s3lider.)

3. Add this to custom_functions.php:

   add_action('thesis_hook_before_content', 'slider');
   function slider() {
   if (is_home()){
   ?>
   
   <div id="s3slider">
   
   <ul id="s3sliderContent">
   <?php $sub_loop_1 = new WP_Query('category_name=featured');
   while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
   global $post;
   $post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);
   ?>
   
   <li class="s3sliderImage">
   <a href="<?php the_permalink(); ?>">
   <img src="<?php echo $post_image ?>" alt="<?php the_title(); ?>" />
             <span><strong>Featured - </strong><?php the_title(); ?></span></a>
         </li><?php endwhile; ?>
             <div class="clear s3sliderImage" />
      </ul>
   
   </div>
   
   <?php }
   
   }
   

4. Add the following in custom.css:

   /* SLIDER */
   
   #s3slider {
      width: 580px; /* important to be same as image width */
      height: 300px; /* important to be same as image height */
      position: relative; /* important */
      overflow: hidden; /* important */
      margin-top: 35px;
      padding-bottom: 5px;
      margin-left: 1em;
   }
   
   #s3sliderContent {
      width: 580px; /* important to be same as image width or wider */
      position: absolute; /* important */
      top: 0; /* important */
      margin-left: 0; /* important */
      padding: 0px;
   }
   
   .s3sliderImage {
      float: left; /* important */
      position: relative; /* important */
      display: none; /* important */
   }
   
   .s3sliderImage span {
      position: absolute; /* important */
      left: 0;
      font: 21px/24px Helvetica, Arial, sans-serif;
      padding: 10px 13px;
      width: 100%;
      background-color: #000;
      filter: alpha(opacity=70); /* here you can set the opacity of box with text */
      -moz-opacity: 0.7; /* here you can set the opacity of box with text */
      -khtml-opacity: 0.7; /* here you can set the opacity of box with text */
      opacity: 0.7; /* here you can set the opacity of box with text */
      color: #fff;
      display: block; /* important */
      bottom: 0;	
   
      /*
          if you put
          top: 0; -> the box with text will be shown at the top of the image
          if you put
          bottom: 0; -> the box with text will be shown at the bottom of the image
      */
   }
   
   .clear {
      clear: both;
   }

5. Create a category named “featured” and put the posts you’d like to have featured in that.

That’s it; you’re done. You now have a featured content slider on your homepage.

But what does it all mean!? A breakdown

Although following the above steps will have you up and running, learning some detail on what you’re doing will allow you to adapt this to other sliders and functions in the future.

add_action('thesis_hook_before_content', 'slider');
function slider() {
if (is_home()){
?>

This is the start of a function. It names it (slider) and places it before our content on our homepage.

<ul>
<?php $sub_loop_1 = new WP_Query('category_name=featured');
while ($sub_loop_1->have_posts()) : $sub_loop_1->the_post();
global $post;
$post_image = get_post_meta($post->ID, 'thesis_post_image',$single=true);
?>

This starts our loop, which will cycle through all the posts in the “featured” category (can be whichever category you’d like) and grabs the Thesis post image for display in a minute. Check out the Codex for more information on WordPress loops.

<a href="<?php the_permalink(); ?>">
<img src="<?php echo $post_image ?>" alt="<?php the_title(); ?>" />
          <span><strong>Featured - </strong><?php the_title(); ?></span></a>
      </li><?php endwhile; ?>
          <div class="clear s3sliderImage" />
   </ul>

This is our loop in action. It shows our post image and links it to the post. It also displays the title with “Featured – ” before it. You can learn more about WordPress template tags such as the_title here.

I hope you enjoyed the tutorial. If you have any questions, leave them in the comments and I’ll try my best to answer them. If you have any comments, leave them too, as I’d love to hear them. Thanks.

Stay Updated

Or subscribe via RSS

You'll notice this site talks about the Thesis theme for Wordpress. Don't know what the heck that is? Find out.