Featured posts slider in WordPress using sticky posts and jQuery

A friend asked the other day how to create a featured posts section without using plugins, since most of WordPress plugins that you can find to create featured posts are a bit bloated, which isn’t neccesarily bad, since plugins authors try to address almost every situation in order to provide a more useful plugin. The drawback (with plugins in general) is that you end up with a lot of options that you seldom use. In this post we will learn how to create a featured posts section, using WordPress sticky posts and how to integrate them in a slider, using jQuery Cycle.

Stick those posts!

WordPress provides an easy way to mark a certain post as a specially interesting post or a “featured” post. Sticky Posts, as WordPress calls these posts, will appear before other posts when listing all of them in a chronological fashion. In this case, we’re going to use the sticky posts as a filter to separate the featured posts from the regular posts.

We must first prepare our data in WordPress, so write some test posts and publish them. For those posts that you want to display as featured posts, edit its Visibility in the Publish block while in the post writing page and check Stick this post to the front page.

Featuring the posts

Now open your home.php file from your WordPress theme, and add the following code, typically within your content section and before The Loop.

[php]
<div id="featured">
<?php
$loop = new WP_Query( array(
‘showposts’ => 5,
‘post__in’ => get_option(‘sticky_posts’),
‘caller_get_posts’ => 1 ) );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
[/php]

Now, it is possible that your theme does not have a home.php defined but that’s ok and it’s no big deal. After all, TwentyTen, the default WordPress theme, doesn’t includes a home.php: it redirects requests to this page to index.php, due to WordPress templates hierarchy. In this case, just open the index.php file and after

[php]<div id="content" role="main">[/php]

insert the code above within a conditional testing if it’s the front page:

[php]
<?php if(is_home()){ ?>
<div id="featured">
<?php
$loop = new WP_Query( array(
‘showposts’ => 5,
‘post__in’ => get_option(‘sticky_posts’),
‘caller_get_posts’ => 1 ) );
while ( $loop->have_posts() ) : $loop->the_post(); ?>
<div>
<h2><a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-summary">
<?php the_excerpt(); ?>
</div>
</div>
<?php endwhile; ?>
</div>
<?php } ?>
[/php]

Other themes might not have a home.php but a page template that is supposed to be used for the front page, so insert the first code there instead.

The code, explained

The first call in the code creates a new instance of WP_Query, a class dedicated to extract our posts from WordPress database. To perform our query, we need to pass some parameters to it:

• show/get up to 5 posts
• make sure this is a sticky post
• display sticky posts first

We then start a loop and iterate through each returned post displaying the title and the excerpt. End of while and end of the story. Of course, you can display much more than what we’re displaying here, since you can retrieve from custom fields to the featured image of the post and display content instead of excerpt, execute shortcodes in the content, etc.

Creating a slider

So far, our featured posts are being displayed as a simple list of posts, nothing too fancy. So what happens if we want to display them using a slider? We’re going to include jQuery Cycle, a jQuery plugin that creates slideshows of images but also of text contents. Cycle requires that each slide to be rotated is at least wrapped in a div and the whole set of slides must be wrapped in another div, which is the one we will use to call the Cycle plugin with jQuery. If you check the code above, you will see that the #featured div wraps all the slides, each one wrapped with a div after the loop begins.

Save jquery.cycle.js in a folder named js within your theme folder. Create also in this folder a blank general.js file that we will use later.

Load jQuery and Cycle into WordPress

Let’s add the following to our functions.php file to load the jQuery library (if it isn’t loaded yet) and the jQuery Cycle plugin.

[php]

add_action( "template_redirect", "ilc_scripts");
function ilc_scripts(){
wp_enqueue_script( ‘cycle’, THEME_URI . ‘/js/jquery.cycle.js’, array( ‘jquery’ ), 1.4, true);
wp_enqueue_script( ‘general’, THEME_URI . ‘/js/general.js’, array( ‘jquery’ ), 1.4, true);
}
[/php]

We’re following the standard convention to load scripts within WordPress, using wp_enqueue_script. The function containing the references to the scrips being enqueued must be called before the content starts to be outputted to the page, hence, we will call ilc_scripts function on template_redirect. Within the function, we load jquery.cycle.js from our theme folder. We also set an argument stating that it belongs to the array of scripts using the jQuery library. WordPress takes care of these dependencies and outputs jQuery library before any other script that relies on it.

Initializing jQuery Cycle

The second line in the ilc_scripts function indicates WordPress that it must load general.js, which contains our code to initialize the slider. Now open general.js and add the following:

[js]

jQuery(document).ready(function(){
jQuery("#featured").before(‘<div id="slider-nav">’).cycle({
next: ‘#slider-next’,
pager: ‘#slider-nav’,
timeout: 4000,
delay: -4000,
speed: 800,
});
});

[/js]

Save it. We’ve just initialized our slider using jQuery Cycle so let’s go through each step. Before triggering the cycle function, we add a div that will serve as a navigation bar for the slides. Cycle will later fill in this bar using numbers for each slide. The parameters passed to cycle are:

• the id of the next control, which will be #slider-next (we’ll add it later).
• the id of the div prepended before, for Cycle to create a pager
• timeout, the time elapsed between transitions
• delay, how much Cycle waits before executing the first transition (since it’s negative, it will execute it when the page is loaded and thus you will see the animation when you enter the site)
• speed, how fast the transition is

Now test your code so you can see what you have so far: each post fades nicely into the next. If the posts are overlapping, it’s because we need to add some CSS rules. We’ll go back to this later.

Adding control button

The Next control won’t appear yet in your working site, since we haven’t added it yet to the markup. Let’s go back to our home.php or whatever you’re using for your home page and add the following to the previous code:

[php]
<div class="featured-wrapper">
<div class="slider-controls">
<a id="slider-next" class="slider-control" href="#" title="Next Post">
Next &gt;
</a>
</div>
//previous code goes here…
</div>
[/php]

Even though the .featured-wrapper is not strictly neccesary, since it’s merely a container, it might be useful to position the controls and the navigation bar afterwards. The important thing is the .slider-controls div, which contains our #slider-next control. Now test it and you will see that it advances the slider to the next slide.

Styling

CSS rules are crucial to this project and depending on your theme, you might have noticed a nasty overlapping of the posts when you added the slider. The following is the most basic rule that you will need to get your posts clean:

[css]
#featured {
height: 200px;
}
[/css]

Change this as you wish and add your own styling to the rest of the elements, such as the controls, the slides navigation bar, etc.

Modifying controls

Chances are that you don’t want the numbered navigation bar on top of the slides. If that’s the case, just change before to after and if you want a control to go to the previous slide, just add a prev parameter to the object used to initialize the cycle function:

[js]

jQuery(document).ready(function(){
jQuery("#featured").after(‘<div id="slider-nav">’).cycle({
next: ‘#slider-next’,
prev: ‘#slider-prev’,
pager: ‘#slider-nav’,
timeout: 4000,
delay: -4000,
speed: 800,
});
});

[/js]

Don’t forget to add #slider-prev to your markup.

Conclusion

So, to sum it up, to create the slider for your featured posts we extracted from WordPress a set of interesting posts marked as sticky posts and then, using jQuery Cycle, created a slider for them to rotate giving proper exposure to each one of them without making the page too long to scroll. The jQuery Cycle plugin contains a lot of other parameters and effects, make sure to check them all to create an even better slider for your featured posts.

A plugin for WordPress

Even though setting up a slider is somewhat easy, it still takes a long time, not to mention if you want to create some other specialized types of sliders. For example, you could display the images loaded within a post, choosing a size and possibly excluding some images. To achieve this you could use a plugin for WordPress created by ILC very easy to use and set up, that creates a slider on your post or page just by typing [slider] anywhere in your post or page.