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.

[html]

<div id="photo-rotator">

[Featured Posts Here]

</div>

[/html]

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:

[php]

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

[/php]

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]

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

[/php]

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.

[php]

<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>

[/php]

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]

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

[/php]

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.

[php]
<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>

[/php]

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]

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

[/php]

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.

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

[/js]

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.

[css]
#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;
}

[/css]

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.

21 thoughts on “Building a jQuery Featured Posts Slider for WordPress”

  1. Hello Nathan,

    nice tutorial! Thanks for sharing it here. Why don’t you use wp_enqueue_script() to add jQuery though? Both jQuery and jQuery UI are already included in WordPress.

    Cheers,
    Simon [ThemeShift]

    1. Simon,

      I started to write this as a generic tutorial, but then later switched it to be WordPress specific and forgot to convert over the script calls. Thanks for the reminder!

  2. I Nathan,
    Thanks a lot for this tutorial. This is exactly what i was looking for, but it doesn’t work for me….
    I’m a newbie with programming and also i’m french ! But i’ve notice that there are some differences between the tutorial and the downloadable file.
    I don’t know what’s wrong with my case, because the source of your online demo is exactly the same as mine. Perhaps a problem with the call of the jQuery….

    So my question : is it possible to have a more simplify (or guided) tutoriel for beginners like me ?

    Thanks a lot !!!!

    1. @thierry I sent you an email with some more information. Once we come up with a solution I will update the tutorial to make it more clear.

  3. Hi does this work with 3.0?

    I just installed your demo theme to see what I was doing wrong but I still ended up with the same problem.

    My problem is that it displays all the posts images before the nav. The first one is styled and looks like it should but then right after that it list the other 3 post’s images and they are not styled at all.

    It seems like the jquery is working at least at some point because every few seconds or so it will rotate to the first post again.

    I am kind of lost because your download and tutorial have different code.

    Thanks A lot.

    By the way when its working this is awesome!

  4. Hey Nathan,

    The featured content slider looks great! I’m just now getting it setup and was curious if the demo pic of it you have is already styled or if you Photoshop’d it. I really want to set mine up to look similar, with thumbnails below and the titles there as well. However, it doesn’t look like the tutorial style is the same Any chance you have that CSS available?

  5. Oh wait – nevermind it worked to some extent. The nav menu underneath is appearing now. How did you do the partial fade on the items that are not active?

  6. Hey – I apologize for all the posts – please condense them or delete them if needed. =)

    Ignore my top one. I’ve got a few posts in there now but the slider is showing all of the large images one after another instead of hiding the non-active one. Any thoughts?

  7. I have tried your jQuery Post slider and it shows up fine on my page. I like how customizable it seems to be, but I can’t figure out how to make the photos show up. The slider container and background images show up fine, and the jQuery script seems to be working fine too.

    How do I load the nav image and the thumbnail images? Please help, this looks like a great function!!!

    1. So just to be clear the posts appear, rotate through, and are linked correctly for you, but none of the images appear?

      If that is the case first make sure that you set featured images for each one of your posts. This functionality must be turned on before the option appears.

      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

      Without that code images won’t appear at all.

      Also if you can post examples somewhere online that will help a lot.

  8. Hi,

    Great tutorial thanks – trying to display the navigation above the slider image but keep breaking the loop sorry if this is a stupid question – any ideas?

  9. Nathan,

    I try to apply this slider to a theme I am developing and I cant get the small image navigation underneath to work properly, when the image in the slider changes, the below smaller images jump to the top where the main image was, and then when the new image comes in, it goes back to its position.

    Does that make sense lol. Ive been playing with it for hours trying to get it to work and now Im at the point that I need help. thanks

    Glen

  10. Same question as Kate, I’m still learning how PHP does it’s thing. Each time i try and move the slider navigation around in the HTML i run into errors. Thanks in advance.

    1. The navigation query is just a rewind of the earlier query ($featuredPosts). So you need to make sure to run the navigation after you start that query.

      That should solve the issue.

  11. hey nathan
    this is a great tutorial, it does *almost* all i need it to do!
    the main thing i’d like it to modify is to show the images attached to a specific post instead of the category. i plan on having this in the single page template and show with this viewer the images from the post (all of the attachments).
    any clues as to how that can be achieved?
    thanks!

  12. Hi, thanks for the code but after hours and hours I have given up on this. Everything shows up fine except the images and thumbnails. Posts link fine, and images inserted into the post show fine but the slider itself just does not work. I have checked that my functions.php code is correct for adding theme support and I am creating them in a catagory named Featured, with the correct cat ID. I get no errors apart from the Jquery itself not working. Which I have properly called for. You mentioned above that the slider ID is required. Am I reading that right, am I supposed to add that in? If so, how?

    Other than that I am completely stumped. Am I missing a .js file? Or need to include something that was not in your downloadable files? Please, any assistance would be great.

    1. If you download the theme attached theme and install it does that work for you? If it works then compare that to what you are trying to implement. Also it is important that you call wp_enqueue_script() function before wp_head().

      Otherwise all I can suggest is to post a sample online and comment back with a link.

  13. Hi Nathan, i am a newbie to wordpress and even more to jquery, but i think the possibilities are amazing. Well, first of all thanks for this, it works really charming. The only thing i cant figure out is how you would add a next / prev link in the dynamic slider?
    Thanks a lot and keep up the great work!

  14. Hi, Nathan

    Are you even still supporting this tutorial? 5 months later and I am still trying to get this to work. I have installed your demo as you suggested and it is “partially” working. Just like James and Dan above I too am having the exact same problem with the first image working fine but any image after that starts stacking below the slider with the nav beneath that. I have used your exact code except to change the cat ID to the one I am using. PLEASE any suggestions? Can I set this up somewhere for you to take a look at? Email me please?

Leave a Reply to thierry Cancel 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>