Tutorial: WordPress Feature Posts Slider Using jQuery

JQuery Slider for WordPress Feature Posts
This is how the original tutorial looks. I customized my own to look entirely different changing only CSS.

A while back, I found a great tutorial on how to build a feature posts slider with jQuery.  It was just what I was looking for, except as I’m not a PHP expert, I didn’t know how to integrate it into WordPress.  Fortunately I’m a member of the best theme framework that WordPress has to offer, ThemeHybrid.  In the exceptionally run support forums, I was pulled along by Justin Tadlock (Hybrid’s creator) and Rarst (a Hybrid contributor) to make my goal of creating a highly flexible, super customizable feature post slider a reality.  Now I’m going to share how we did it so that any other WordPress user can do it too.

View WebDeveloperPlus demo | View my custom WordPress demo

Why this slider to display featured posts?

  1. It’s coded to jQuery standards.
  2. It includes a list of posts with thumbnails in addition to the feature post.
  3. It can slide right into most themes as is, but is also extremely flexible.
Feeling brave? Go ahead, download the files and skip to the bottom for how to implement the final product.

One requirement to make this work is Justin’s Get The Image plugin.  Don’t worry though, in addition to making the slider work, this plugin will make your life easier in general, providing a simple and effective method for automatically grabbing images for you to use for things like post thumbnails in excerpts.  If you already use Hybrid, you already have Get The Image, so no need to download.

Most of the brains for the slider are going in the functions.php file.  Depending on your theme, you may already be very familiar with this file.  Basically, it’s where you put stuff that’s not natively in your WordPress theme.  While we’re on it, for a great (and long) list of things you can put in functions.php that will make your website awesome check out what the guys at WP Beginner have offered up.

In addition to the functions file, we’ll be creating a css file  to style the slider and a small javascript file to make it work.  Let’s dig in.

Click each tab to view that section of the tutorial.  All files are available for download at the bottom of the tutorial.

[tab: The Functions File]

This is by far the most complex part.

Let’s register and call styles.

wp_register_style( 'jquery-ui-slider', get_stylesheet_directory_uri() . '/jquery-ui-slider.css', '', filemtime(
STYLESHEETPATH . '/jquery-ui-slider.css' ) );
wp_enqueue_style( 'jquery-ui-slider' );

If you only use the slider on a certain page you can wrap this section into a conditional statement.

Next, we’ll start our main function, jquery_ui_slider(), and load Javascript files. We’re loading Javascript files within the function so that they are only loaded on pages where the function is actually called.

function jquery_ui_slider() {

	slider_scripts_register(); /* calls function defined later */
	add_filter( 'script_loader_src', 'google_scripts_unversion' ); /* filters Google API url for bug prevention */
	add_action( 'wp_footer', 'slider_footer_scripts', 20 ); /* adds an action to load the scripts in the footer */

And meat of the html and php:

The most important thing to note here is that in the second line we’re calling for posts in the “Featured” category and displaying four posts at a time. Both can be changed for your application, but it will be necessary to adjust the css accordingly if you want to change the number of posts in the slider.

?> <div id="featured" > /* remember to close the php tags before starting html */

<?php $loop = new WP_Query( array( 'category_name' => 'Featured', 'posts_per_page' => 4 ) ); ?>

<?php $i = 0; ?>

<ul class="ui-tabs-nav">

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>

<li id="nav-fragment-<?php echo ++$i; ?>" class="ui-tabs-nav-item <?php if ( $i <= 1 ) echo 'ui-tabs-selected'; ?>" >
<a href="#fragment-<?php echo $i; ?>"> /* references the div #fragment-i where i equals 1, 2, 3, or 4  */
<?php get_the_image( array( 'link_to_post' => false ) ); ?> /* uses plugin to grab the image from post */
<span><?php the_title(); ?></span>
</a>
</li>

<?php endwhile; ?>

</ul>

<?php $i = 0; ?>

<?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div id="fragment-<?php echo ++$i; ?>" class="ui-tabs-panel <?php if ( $i > 1 ) echo 'ui-tabs-hide'; ?>"> /* adds ui-tabs-hide portion of class if post is not active */
<?php get_the_image( array( 'link_to_post' => false ) ); ?> /* uses plugin to grab the image from post */
<div class="info">
<h2><a href="<?php echo get_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?></p>
</div>
</div>
<?php endwhile; ?>
</div>
<?php
}

To get the actual WordPress posts we’re querying the database for four “Featured” posts and looping through the posts two times. The first loop grabs the list of posts with thumbnails and title and applies the ul class “ui-tabs-nav”. The second loop grabs the posts and displays the image, title and excerpts with the div class “ui-tabs-panel” for the active post plus “ui-tabs-hide” for non-active posts. It’s important to pay attention to where you are opening and closing php tags, as the php and html are mixed throughout this section.

Now we will register, filter, and print scripts.

function slider_scripts_register() {
if ( !is_admin() ) { /*only perform on non-admin pages */
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2', true );

wp_deregister_script( 'jquery-ui-core' );
wp_register_script( 'jquery-ui-core', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js', array( 'jquery' ), '1.8.2', true );
wp_register_script( 'jquery-ui-slider', get_stylesheet_directory_uri() . '/jquery-ui-slider.js', array( 'jquery-ui-core' ), filemtime( STYLESHEETPATH . '/jquery-ui-slider.js' ), true );
}
}

function google_scripts_unversion( $src ) { /*filter jQuery version on Google APIs */

if( strpos($src, 'ajax.googleapis.com' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}

function slider_footer_scripts() { /* define the function we used earlier via add_action */

if ( !is_admin() ) {
wp_print_scripts( 'jquery-ui-slider' );
}
}

That’s it for the functions file. There are all kinds of ways to customize this. Some ideas would be to add a byline or entry meta, remove the title from the thumbs, or limit the length of the excerpts (which needs to be done to about 20 characters using the default css). The sky is the limit!
[tab: The CSS File]
The CSS needs to be named jquery-ui-slider.css and can be saved in the same folder as your style.css. If you use the default CSS, you will also need the selected-item.gif image for the active post pointer.  To make the original slider fit into WordPress, apply the following CSS.

/*featured content*/

#featured{
	width:340px;
	padding-right:250px;
	position:relative;
	border:5px solid #ccc;
	height:250px;
	background:#fff;
}
#featured ul li {
        background: none;
	margin: 0;
	border: none;
}
#featured ul.ui-tabs-nav{
	position:absolute;
	top:0; left:340px;
	list-style:none;
	padding:0; margin:0;
	width:250px;
}
#featured ul.ui-tabs-nav li{
	padding:1px 0; padding-left:13px;
	font-size:12px;
	color:#666;
}
#featured ul.ui-tabs-nav li img{
	float:left; margin:2px 5px;
	background:#fff;
	padding:2px;
	border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
	font-size:11px; font-family:Verdana;
	line-height:17px;
}
#featured li.ui-tabs-nav-item a{
	display:block;
	height:60px;
	color:#333;  background:#fff;
	line-height:15px;
        margin-right: 1px;
}

#featured li.ui-tabs-nav-item a:hover{
	background:#f2f2f2;
}
#featured li.ui-tabs-selected{
	background:url('images/selected-item.gif') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
	background:#ccc;
}
#featured .ui-tabs-panel{
	width:340px; height:250px;
	background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
	position:absolute;
	top:170px; left:0;
	height:80px;
        width: 340px;
	background: url('images/transparent-bg.png');
}
#featured .info h2{
	font-size:14px; font-family:Georgia, serif;
	color:#fff; padding:0px 5px; margin:0;
	overflow:hidden;
        line-height: 18px;
}
#featured .info p{
	margin:0 5px;
	font-family:Verdana; font-size:11px;
	line-height:13px; color:#f0f0f0;
}
#featured .info a{
	text-decoration:none;
	color:#fff;
}
#featured .info a:hover{
	text-decoration:underline;
}
#featured .ui-tabs-hide{
	display:none;
}
#featured .thumbnail{
	height: 50px;
	width: 70px;
        border: none;
}
#featured .ui-tabs-panel .thumbnail{
	height: 250px;
	width: 340px;
        margin: 0;
        padding: 0;
        border: none;
}

If you want to create a slider to fit into your theme like a glove I recommend Firebug, a cup of coffee, and lots of imagination.  You can see how I styled it for one of my own themes here, or you can also view the custom version I put into my demo. If you make your own, show me that one too! After all, my favorite part about this slider is that it is so flexible.

WordPress Feature Post Slider Using jQuery

[tab: The jQuery]
The jQuery makes the whole slider work.

I’m not a jQuery expert by any means, and I learned during this project about the jQuery no conflict wrapper for WordPress. Below is the code from the tutorial adapted for WordPress.  This file needs to be named jquery-ui-slider.js and you can save it in the same folder as the css.

jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).ready(function(){
$("#featured").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 3000, true);
$("#featured").hover(
function() {
$("#featured").tabs("rotate",0,true);
},
function() {
$("#featured").tabs("rotate",3000,true);
}
);
});
});

3000 is the number of milliseconds between rotations. It is set to 0 on hover so that the slider will pause when a user scrolls over it.  Get a lot more jQuery ideas here.

[tab:END]

Once you’ve finished all three files:

You need to call the function where you want it in your theme. For my theme, I’m using the condition is_front_page() and Widget Logic in the Hybrid widget area utility_before_content.  I have the simple php function

<?php jquery_ui_slider(); ?>

and I’m done. You of course can show this any way you like using the same function.

You now have everything you need for your very own, highly customizable WordPress feature posts slider utilizing jQuery. Three files and done. Again, I’d like to thank Justin Tadlock and Rarst for the more-than-help integrating this into WordPress and WebDeveloperPlus for the original tutorial.

Did you enjoy this tutorial? Let me know about it in the comments! Did you use it? Show it off!

download the files

Happy sliding!

14 thoughts on “Tutorial: WordPress Feature Posts Slider Using jQuery

  1. Hi.

    Great tutorial but missing one important ingredient:

    How do I use it in the theme?
    I need to build the div and also add some and ,
    But how and where.

    It would be great if you add this to the tuturial.

    Thank you.

  2. I am sorry, I totally missed the functions to put in the functions.php file…

    Can I put the code in a separate file instead in my functions file?

    1. Sure, I just need to know what aspect you are struggling with. You should be paying attention to three files: the jquery-ui-slider.js and jquery-ui-slider.css files need to go into your theme folder. the file called foryourfunctions.php needs to have the code copied into your functions.php file. You’ll want to call the function jquery_ui_slider() in your preferred method. Because I use exec-php and widget logic, I just put it in a text box as I describe at the end of the post. If you can let me know what aspect you are struggling with I may be able to help more.

  3. Thanks, I’ve been working on a very similar thing, except I want to show pages instead of posts, so I used

    $loop = new WP_Query( array(‘post_type’=>’page’, ‘post__in’ => array(1,4,6,9)) );

    Just thought I’d share that for anyone else using this a wordpress as CMS scenario

  4. It also does not appear to work with WP 3.4.1. It was working fine with 3.2.1, so based on the above comment, from WP 3.3 on up, there are issues.

    I checked it with JQuery 1.8.0 and JQuery UI Version 1.8.22 and no dice. The slider will not advance and clicking on a numbered link does not load the page.

    1. Hey there, I don’t recommend this method any more. It’s not using some best practices I’ve learned since then 🙂 like enqueing jQuery properly.

      I recommend trying Flexslider if you want to create a slider with thumbnails, you can use WooSlider as a ready-to-go WP plugin implementation of WooSlider

Leave a Reply