Blog
Design An Elegant Featured Content Slider for WordPress
An Elegant Featured Content Slider for WordPress
by John Sexton December 22nd, 2008.
Introduction
In this tutorial, we’ll create an elegant featured content slider for WordPress like the one featured on http://www.fuseboxtheatre.com.
This featured content slider is based on “The Coda Slider,” a neat device used by Panic Software to display information about their “Coda” product on their website (http://www.panic.com). This effect is beautiful, flexible, and often copied.
We’ve managed to put together a nice implementation that seamlessly integrates with WordPress for easy, automatic populating of featured content. The slider we’re going to build today uses a number of existing components, including the Coda Slider jQuery plugin, the Easing jQuery plugin, and jQuery itself.
The original Coda Slider tutorial at jQuery for Designers goes into the nuts and bolts of the jQuery code and the mark-up structure. I’ll refer you there if you want to learn more about the jQuery is actually working. Including it here would make this tutorial way too long – and besides, there’s no sense in re-inventing the wheel!
http://jqueryfordesigners.com/coda-slider-effect/
The purpose of this tutorial is to seamlessly integrate this slider with an existing WordPress installation to create a beautiful, automatically populated, easy to manage featured content section. Let’s get to it!
The Markup and Javascript
As mentioned above, please refer to http://jqueryfordesigners.com/coda-slider-effect/ for a description of the jQuery, markup, and basic CSS necessary to get the slider working.
That tutorial also discusses the various jQuery plugins you need to get the slider working in the first place. For convenience, I’ve condensed the other jQuery plugins into 1 javascript file, which I’ve called coda-slider-condensed.js. You can download it here: coda-slider-condensed.js (Right click, save as).
The other jQuery plugin that you will need — that is not included in the jQuery for designers tutorial, but IS included here — is the jQuery Easing plugin. Easing is what gives the slider its sense of momentum – a small touch that really enhances the overall experience.
You can also get jQuery Easing here: http://gsgd.co.uk/sandbox/jquery/easing/
My coda-slider-condensed.js file already has easing enabled. If you want to change the type of easing, or its duration, look at lines 84-89 of coda-slider-condensed.js.
Before we get started with the WordPress goodness, all you have to do is make sure you include the jQuery easing file, as well as the coda-slider-condensed.js and, of course, jQuery itself, in your WordPress header.php file. Just cut and paste the following into your < head > < / head > tags.
[sourcecode language=”html”]
<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="http://www.yoursite.com/wp-content/themes/yourtheme/js/coda-slider/coda-slider-condensed.js" type="text/javascript" charset="utf-8"></script>
[/sourcecode]
Make sure to include the correct path to your javascript files – these paths are just examples!
Integration With WordPress
Now that we have the basics we need to get the Coda Slider working, we can get to the meat of this tutorial: how to integrate with WordPress!
Here’s what we want to do: create a featured content slider with our most recent 3 posts. Each featured post has an image and an excerpt associated with it. We want the image to show up both within our sliding panels, and as a smaller thumbnail in the slider navigation.
Let’s get started:
- Since we want to feature 3 posts, we need to keep track of how many posts we’re going through. To do this, we’ll initialize a variable ($postcount) that we can use to track our progress. This handy variable will also enable us to seriously condense the code that we write later (that’s where the ‘elegant’ part comes in!)
- Retrieve a query from the WordPress database using the powerful wp_query command. Here we’ll just use it to grab the most recent 3 posts. If you want to learn more about wp_query and what you can do with it, check this out: http://nettuts.com/working-with-cmss/build-a-newspaper-theme-with-wp_query-and-the-960-css-framework/
- Loop through each of the posts we have retrieved from the database and display them as our three featured posts. We want the thumbnails of each post’s featured image to automatically appear in the navigation section of our slider.
- Prevent duplicate posts from showing up using a simple – but important – bit of code: $do_not_duplicate[] = get_the_ID(); This is an array of post IDs that we will store and reference later – to make sure that posts that show up lower down on our site are not duplicates of those in the featured section.
Here’s what this part looks like:
[sourcecode language=”html”]
<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();
$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
[/sourcecode]
That’s just the PHP – we’ll need to wrap it in some DIVs to make it work with the slider, but we’ll tackle that later.
Filling The Panels
Next, we initialize our panels – this is where the power of our $postcount variable comes into play. Rather than have to manually create each panel (and manually add or subtract panels if we decide we’d like to change the number of featured stories), this variable, coupled with some simple PHP, allows us to automate that process.
[php]
<div class=“panel” id=“featured-<?php echo $postcount; ?>”>
CONTENT GOES HERE
</div> <!– End Panel –>
[/sourcecode]
We will end up with a series of DIVS like this:
[sourcecode language="html"]
<div class=“panel” id=“featured-1”> CONTENT </div>
<div class=“panel” id=“featured-2”> CONTENT </div>
<div class=“panel” id=“featured-3”> CONTENT </div>
[/php]
For CONTENT, anything could go in that spot – static content, post excerpts, custom field information, etc. Now I’ll briefly describe how to get the featured images and featured text into that content area.
Using Featured Images
On http://www.fuseboxtheatre.com, we are pulling data from the post’s custom “Image” field to get the featured image, and we are also getting the title and excerpt. Here’s how we do it:
[sourcecode language=”html”]
<div class="featured_media">
<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");
if (isset($value_feat_img[0])) { ?>
<a href="<?php the_permalink() ?>" rel="bookmark"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>
<?php } ?>
</div>
[/sourcecode]
This gives us an image that is linked to our post. This assumes that you have your post image located in a folder called “yourimagefolder” that resides inside of your site’s root. Of course you can adjust your path to whatever fits your individual situation. You can manipulate this image with CSS by targeting the wrapping div, of class .featured_media.
To assign an image to a post, go down to the “Custom Fields” section of your post and enter the image name with a custom field key of “Image,” like so:
Using Featured Text
Now we want the text to go along with the image. We open another div, “.featured_text” and go from there:
[sourcecode language=”html”]
<div class="featured_text">
<h2 class="entry-title">
<a href="<?php the_permalink(); ?>" rel="bookmark" title="Permanent Link to <?php the_title(); ?>"><?php the_title(); ?>
</a>
</h2>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</div>
[/sourcecode]
This will give us a containing text area, an < h2 > level post title which is linked to our post, and the excerpt for that post. Again we can manipulate these using CSS by targeting “.entry-title” or “.entry-content”.
That’s all we need inside each one of our sliding panels. Now we need to end our WHILE loop and close some divs.
[sourcecode language=”html”]
<?php endwhile; ?>
[/sourcecode]
Adding Thumbnail Navigation to the Slider
Now comes the navigation – these are thumbnails that you can click to go to the associated featured post. These will be automatically drawn from the same “Image” custom field as your featured post image.
[sourcecode language=”html”]
<div id=“shade”>
<ul class=“navigation”>
<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();
$do_not_duplicate[] = get_the_ID();
$postcount++;
?></ul>
</div>
[/sourcecode]
We start off by opening our #shade div and our Navigation list – then do the same PHP as before to make sure we get the same three posts and do not duplicate them – after all, we want the thumbnails, post titles, or whatever else we are using for the slider navigation to correspond to the content they are matched to.
For each navigation item, we use the same code we used before to get the post’s custom image, but now we put it inside of a list item:
[sourcecode language=”html”]
<li>
<?php // get the image filename
$value_img = get_post_custom_values("Image");
if (isset($value_img[0])) { ?>
<a href="#featured-<?php echo $postcount; ?>">
<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
</a>
<?php } ?>
</li>
<?php endwhile; ?>
< / div> <!– End Shade (be sure to remove space) –>
[/sourcecode]
The cool thing here is use of the $postcount variable – we are now linking our thumbnails to the panel divs we generated before – all by their IDs, and all automatically, just by referencing $postcount! This means we can just write the code once and loop it, rather than having to write it out explicitly for each panel.
We’re also using the WordPress custom field “Image” again – this time to take the same image we used as our featured image, and now use it as a slider navigation thumbnail. Using the technique, we can have this same custom image show up in the actual sliding “Panel” divs themselves, too!
The one thing that’s different here is that we’ve added a class to the image: “.scroller-thumb” Now, using CSS, we can specify a size for this thumbnail image. After all, we want to use the same image for the navigation as for the featured image, but we don’t want them both to be the same size. We also don’t want to manually create two image sizes and two custom fields for every post.
Here’s some simple CSS to constrain these image sizes:
[sourcecode language=”css”]
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
[/sourcecode]
Now we’ve finished the operations we want for each list item, so we end our WHILE loop, and close the navigation list, #shade DIV. That’s it for the code portion of the slider – now we need to make sure everything is nicely wrapped up inside of the appropriate divs. Here it is all together: In your HEADER.PHP:
sourcecode language=”html”]
[/sourcecode]
In your INDEX.PHP (or wherever else you want the slider to appear)
[sourcecode language=”html”]
<div id="wrapper">
<div id="slider">
<div class="scroll">
<div class="scrollContainer">
<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();
$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<div id="featured-<?php echo $postcount; ?>" class="panel">
<div class="featured_media">
<?php
// get the image filename
$value_feat_img = get_post_custom_values("Image");
if (isset($value_feat_img[0])) { ?>
<a rel="bookmark" href="<?php the_permalink(); ?>"><img class="frame" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" />
</a>
<?php } ?></div>
<div class="featured_text">
<h2 class="entry-title">
<a title="Permanent Link to <?php the_title(); ?>" rel="bookmark" href="<?php the_permalink(); ?>"><?php the_title(); ?>
</a></h2>
<div class="entry-content">
<?php the_excerpt(); ?></div>
</div>
</div>
<!– End Panel –>
<?php endwhile; ?></div>
<!– End Scroll Container –></div>
<!– End Scroll –>
<div id="shade">
<ul class="navigation">
<?php
$postcount = 0;
$featured_query = new WP_Query(‘showposts=3’);
while ($featured_query->have_posts()) : $featured_query->the_post();
$do_not_duplicate[] = get_the_ID();
$postcount++;
?>
<li>
<?php // get the image filename
$value_img = get_post_custom_values("Image");
if (isset($value_img[0])) { ?>
<a href="#featured-<?php echo $postcount; ?>">
<img class="scroller-thumb" src="<?php echo bloginfo(‘template_url’); ?>/yourimagefolder/<?php $values = get_post_custom_values("Image"); echo $values[0]; ?>" alt="<?php the_title(); ?>" title="<?php the_title(); ?>" />
</a>
<?php } ?></li>
< ?php endwhile; ?></ul>
</div><!– End Shade –>
</div><!– End Slider –>
</div><!– End Wrapper –>
[/sourcecode]
Conclusion
This has been an overview of how to create an elegant featured content slider for WordPress. I hope you’ve enjoyed it! Below, you can find the CSS we are currently using for our slider at http://www.fuseboxtheatre.com. You may need to tweak it to fit your own layout.
One last thing: rather than just having the most recent three posts appearing in your featured content slider, sometimes you want to be able to control which posts show up. There are a number of ways to do this, such as adjusting the post date, assigning posts to a specific “featured” category, etc.
I prefer to do this using another cool WordPress plugin: WP-Sticky. You can find it here: http://lesterchan.net/portfolio/programming/php/#wp-sticky (Edit: This was written before the release of WordPress 2.7, which has a “Stick Post” feature build-in.)
I’ve found that using this plugin to assign the status of “Announcement” to the posts I want to feature is the easiest way to go. Announcement posts will always stay on top of the rest of your posts, but you can easily turn “Announcement” off, and the post will return to its rightful place among the rest of your posts. There are more cool tricks you can do with this plugin – I’ll encourage you to play around with it to discover them for yourself!
BONUS:
Remember that cool stuff we did with do_not_duplicate? Let’s say you have a bunch more posts that you want to appear below your featured content area (like we have on http://www.fuseboxtheatre.com). In order to make sure those posts don’t appear in duplicate, use this bit of code on your second WordPress loop:
[sourcecode language=”html”]
<?php query_posts(‘showposts=8’); ?>;
<?php while (have_posts()) : the_post();
if (array_search(get_the_ID(), $do_not_duplicate) !== false)
continue; update_post_caches($posts);
?>;
CONTENT GOES HERE
<?php endwhile; ?>;
[/sourcecode]
The CSS:
[sourcecode language=”css”]
/* FEATURED CONTENT SLIDER STYLES */
#wrapper{
width: 62.2em;
border: 0.1em solid #2b2b2b;
margin-bottom: 2em;
}
#slider {
margin: 0 auto;
position: relative;
}
.scroll {
width: 62.2em;
overflow: auto;
overflow-x: hidden;
position: relative;
background: #0e0e0e;
}
.scrollContainer div.panel {
padding: 1em;
width: 61.2em;
}
.format_text.featured_media{
margin-right: 1em;
float: left;
}
.format_text.featured_media a img{
width: 15em;
height: 12em;
}
.format_text.featured_text{
font-size: 1em;
float: left;
width: 35.5em;
}
.format_text.featured_text div.format_text.entry-content p{
margin-bottom: 0;
padding-bottom: 0;
}
#shade {
background: #000;
height: 9em;
border-top: 1px solid #333;
}
#shade.tall-shade {
background: #000;
height: 12em;
border-top: 1px solid #333;
}
ul.navigation {
list-style: none;
margin: 0;
padding: 0;
padding-bottom: 0.9em;
}
ul.navigation li {
display: inline;
margin-right: 0.8em;
}
ul.navigation a {
padding: 0.9em;
color: #000;
text-decoration: none;
float: left;
font-size: 1.25em;
}
ul.navigation a:hover {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}
ul.navigation a.selected {
background: url(images/arrow_down.png) no-repeat 50% 0%;
}
ul.navigation a:focus {
outline: none;
}
.scrollButtons {
position: absolute;
top: 130px;
cursor: pointer;
}
.scrollButtons.left {
left: -13px;
z-index: 100;
display: none;
visibility: hidden;
}
.scrollButtons.right {
right: -13px;
z-index: 101;
display: none;
visibility: hidden;
}
.hide {
display: none;
}
span.thumbtitle{
display: block;
font-size: 1.3em;
text-align: center;
display:none;
}
img.scroller-thumb{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
width: 13.3em;
}
img.scroller-thumb-big{
padding: 0.3em 0.4em;
border: 0.1em solid #2b2b2b;
}
a.selected img.scroller-thumb{
}
[/sourcecode]