Building a jQuery Featured Posts Slider for WordPress

One of the most common requests in modern WordPress themes is the addition of a featured posts or featured image rotator. This is often a feature that users think makes a theme “premium”. Once you break down the code required,  it is actually much easier than it seems.

View Demo | Download Files

Also when combined with the WordPress 2.9 featured image feature (renamed in 3.0, it was previously called post thumbnail), it becomes much more powerful.

This technique can be seen in our themes Precision and Refresh.

A demo of what we are building.

Start by opening a containing div. Everything from here on will go inside this div. Note the ID because we will call it later.


<div id="photo-rotator">

[Featured Posts Here]

</div>

Adding Featured Image Support

In order to let WordPress know that your theme supports featured images you need to add these line to the functions.php file:


add_theme_support( 'post-thumbnails', array( 'post' ) ); // Add support for posts
add_image_size( 'nav-image', 130, 40, true ); // nav thumbnail size, hard crop mode
add_image_size( 'rotator-post-image', 615, 280, true ); // large size, hard crop mode

The values are for width (615) and height (280) in pixels. I like to specify multiple image sizes just in case I need more later. To do this just re-use the second line and change the name.

A New Query

With WordPress we use the loop to call in posts. Now you should not use the same loop twice on the same page. To work around this we are going to use WP Query.


<?php
 $featuredPosts = new WP_Query();
 $featuredPosts->query("showposts=4&cat=3");
 while ($featuredPosts->have_posts()) : $featuredPosts->the_post();
 ?>

Here we are showing up to 5 posts from the category with an ID of 3. You may use any of the standard query arguments to customize which posts show up. Just remove &cat=3 if you want to query all your posts. Using at least 1 argument is required (or at least it has caused me problems in the past!).

Now we get into the actual markup for each slide. Since this will be repeated for each post in the loop you only need to write it once.


 <div id="slide-<?php echo $slide_id; $slide_id++;?>">
 <a href="<?php the_permalink() ?>">
 <?php the_post_thumbnail( 'rotator-post-image' ); ?>
 <span><?php the_title(); ?></span>
 </a>
 </div>

Then close the loop. The $slide_id is required so that we can tie the navigation to each specific post for linking. It increases by 1 for each post.


<?php endwhile; ?><!--/close loop-->

Now for the Navigation

You probably want users to be able to move between the posts on their own, so we need to loop through our query again to create the post navigation.

<ul id="slide-nav">
 <?php $nav_id=1; while ($featuredPosts->have_posts()) : $featuredPosts->the_post(); ?>
    <li>
       <a href="#slide-<?php echo $nav_id; ?>">
          <span>
             <?php the_post_thumbnail( 'nav-image' ); ?>
          </span>
          <? the_title(); $nav_id++;?>
        </a>
    </li>
 <?php endwhile; ?><!--/close loop-->
 </ul>

And with that our PHP work is done.

Adding jQuery

We are using the jQuery tabs section to accomplish this, so you will need to include both jQuery and jQuery UI. WordPress has all the files you need built in, so you can use wp_enqueue_script(); to pull them in. Make sure to call in all the parts of jQuery Ui that you need.


<?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>

Now with to call in the jQuery UI Tabs function. With plenty of settings you can control speed, transitions, and much more. Read about it on the jQuery UI site.

jQuery(document).ready(function($){
 $("#photo-rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 4000);
});

Now for some Style

We’ve got functionality, now to make it pretty. Here are the styles I used to get started. You will need to modify this to match your site.

#photo-rotator {
 background: url('img/background.png') no-repeat 0px -10px;
 width: 635px;
 padding: 0px 10px;
 height: 400px;
 position: relative;
 color: #fff;
 margin: 20px auto 20px;
 }

 #photo-rotator .ui-tabs-panel {
 list-style: none;
 height: 300px;
 }

 #photo-rotator .ui-tabs-panel a.post-image {
 display: block;
 width: 615px;
 height: 280px;
 float: left;
 margin: 10px;
 background: #ccc;
 position: relative;
 text-decoration: none;
 }

 #photo-rotator .ui-tabs-panel a.post-image .title {
 display: block;
 padding: 10px;
 background: #000;
 background: rgba(0,0,0,.5);
 color: #ccc;
 position: absolute;
 bottom: 0px;
 left: 0px;
 font-size: 18px;
 width: 595px;
 }

 .ui-tabs-hide {display: none !important;}

 #slide-nav {
 padding: 0px;
 margin: 0px;
 position: relative;
 float: left;
 }

 #slide-nav li {
 float: left;
 list-style: none;
 }

 #slide-nav a {
 display: block;
 color: #666;
 float: left;
 width: 138px;
 padding: 12px 10px 10px;
 text-decoration: none;
 background: url('img/post-line.png') no-repeat right top;
 min-height: 100px;
 font-size: 14px;
 }

 #slide-nav li:last-child a {
 background: none;
 }

 #slide-nav a:hover {
 color: #000;
 }

 #slide-nav a .thumbnail {
 display: block;
 background: #cbc9c9;
 padding: 3px;
 border-bottom: solid #fff 1px;
 width: 130px;
 height: 40px;
 filter: alpha(opacity=50); /* Decreases opacity in IE */
 -moz-opacity: .5; /* Decreases opacity in Firefox */
 opacity: .5; /* Decreases opacity in Safari, Chrome, and Opera */
 }

 #slide-nav .ui-tabs-selected a { color: #222 }
 #slide-nav .ui-tabs-selected a .thumbnail {
 background: #bbb;
 filter: alpha(opacity=100);
 -moz-opacity: 1;
 opacity: 1;
 }

I am linking to several images to add more style to the slider. You can get these images in the download file.

Wrapping it up

Our style here is pretty basic, but you can add more content and make your posts much more detailed. Plenty of great sites implement this feature. Please post in the comments if you have any questions or find some great examples of something similar being implemented around the web.

If you enjoyed this post you should read my personal blog or subscribe to the iOS Design Weekly Newsletter.

-Nathan Barry