Stumble Digg Technorati Delicious

WordPress Featured Post Slider Using jCarousel

Having an effective WordPress featured post slider can be a great, functional addition to your site that provides ease of access to your viewers as well as SEO benefits.

Recently I wrote about the importance of having a featured a posts section and what it can do for your SEO tasks, to fill this need initially I used a plugin for a WordPress featured post slider on this site called featured content gallery and while it was effective as a WordPress featured post slider it was bloated, slow and conflicted with many of the other things I wanted to try on my site so I started off on a journey to find the most efficient, fast and clean way to showcase my featured content using a WordPress featured post slider. I searched all over the internet and came up with no WordPress featured post slider that did what I wanted how I wanted to do it so I decided to take matters into my own hand and make my own WordPress featured post slider to accomplish it.

WordPress Featured Post Slider

Now that I have my new WordPress featured post slider working on this site I will share how to do it so anyone who is looking for the same type of WordPress featured post slider that I was can find it and benefit from it. I was inspired in part by the way johnchow.com displays his featured posts so I started to look at how he was doing it on his site, which lead me to find jCarousel and the rest is history. Simply follow the steps outlined below and you can use this solution on your WordPress powered site just like I do with my WordPress featured post slider here at AdminDaily.com

To start building your WordPress featured post slider just follow the steps outlined below.

  1. Download jCarousel HERE
    (there has been an update, until I have a chance to check on this please click HERE to download the version that works with this tutorial.)
  2. Extract the zip file and locate the javascript filed named jquery.jcarousel.pack.js and upload it to your server root directory in a folder named js
  3. Create new files and edit your sites theme files as outlined below and as always BACKUP YOUR FILES FIRST

First off, we will make a file named featured.php and place it into your wp-content/themes/your-theme/includes folder, this file will contain the following code, I will explain the functions and parts individually.

At the top of the file, we need to build a container for the WordPress featured post slider, so you have an opening div and the start of an unordered list like so;

[php]
<div id="featured">
<ul id="posts">
[/php]

below this, we will use a custom WordPress query to gather the posts we want for the WordPress featured post slider, start a counter to keep track of what post number each segment is and then start the loop that will display our posts. In this example, I will be taking the last 5 posts from the Featured category; you can change it to your liking.

[php]
<?php $my_query = new WP_Query(‘category_name=Featured&showposts=5’); ?>
<?php $count = 0; ?>
<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
<?php $count++; ?>
[/php]

Continuing on below this, we will include the code that will be used by the loop to display each post, this is again just an example and you can obviously change it around to suit your particular needs. This is what I use in my WordPress featured post slider for my site and it does what I need it to.

As you can see, the above code will query the last 5 posts from the Featured category then display them each by looping using a while statement that is concluded at the end with an endwhile statement, if you want to see what each piece generates look at the page source of my homepage.

[php]
<li id="post-<?php echo $count ?>" class="first">
<a href="<?php the_permalink() ?>"><img class="thumb" src="<?php echo get_post_meta($post->ID, ‘thumbnail’,true) ?>" alt="<?php the_title(); ?>" /></a>
<h3><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h3>
<div class="content">
<p><?php echo get_post_meta($post->ID, ‘feat_txt’,true) ?></p>
</div>
<div class="oops"></div>
<a href="<?php the_permalink() ?>" class="more-link">read more &raquo;</a>
</li>
<?php endwhile; ?>
</ul>
[/php]

Finally, we add the last unordered list to the bottom that will display the numbered buttons to click to show the posts in the WordPress featured post slider that are numbered 1 through 5 like so;

[php]
<ul class="list">
<li><a href="#post-5">5</a></li>
<li><a href="#post-4">4</a></li>
<li><a href="#post-3">3</a></li>
<li><a href="#post-2">2</a></li>
<li><a href="#post-1">1</a></li>
</ul>
</div>
[/php]

Click this link to download a ready to go featured.php file for your WordPress featured post slider to save you some time copy/pasting while making your WordPress featured post slider :-)

Simple enough so far right? Now we move on to the edits we need to put in our themes files, first off we will start out with the header.php file. In this file we need to add the jCarousel script that we previously uploaded to the js folder in the site root directory and add the specific function that controls the operation of the WordPress featured post slider on the page. We will also limit this to only the home page to save loading times on pages that don’t use it by simply not including it on those pages by using a if (is_home()) statement at the beginning. To accomplish this, simply place the below code into your header.php file before the closing </head> tag. (obviously change the script src to reflect your domain)

[php]
<?php if ( is_home() ) { ?>
<script src="http://your.com/js/jquery.jcarousel.pack.js" type="text/javascript"></script>
<script type="text/javascript">
function mycarousel_initCallback(carousel) {
jQuery(‘#featured .list li a’).bind(‘click’, function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
};
jQuery(document).ready(function() {
jQuery("#posts").jcarousel({
wrap: "both",
auto: 10,
scroll: 1,
initCallback: mycarousel_initCallback,
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
<?php } ?>
[/php]

Next, we include the featured.php file wherever you wish to show the WordPress featured post slider within your template files using a php include statement like so:

[php]<?php include (TEMPLATEPATH . ‘/includes/featured.php’); ?>[/php]

You will likely want the featured.php file to be included on your index.php theme file, but you are more than welcome to adjust and style to your taste.

Now that we have the files uploaded, the needed edits made and things ready to roll, we just need to add the styling elements to our themes css file to make the WordPress featured post slider fit the site properly and look nice and professional, this is the part that needs the most attention. The code I am putting here is what I have used on my site to get my WordPress featured post slider to display how I want, you will need to edit it to suit your needs unless you just happen to have the same width available and want to use the same colors I have on my site. Another note on this, you will want to check this over for any conflicting entries to make sure none of this will mess up the existing layout of your site (just change the names in the featured.php and css file if you need to)

[css]
#featured {
width:100%;
height: 199px;
margin:0 0 25px;
font:1.25em/1.5 georgia,serif;
overflow: hidden;
}

#featured:after {
content:".";
display:block;
height:0;
font:0/0 serif;
clear:both;
visibility:hidden;
}

#featured h3 {
font:1.47em/1.1 georgia,serif;
margin:0 0 10px;
color:#1e1e1e;
}

#featured h3 a {
color:#4a8393;
}

#featured h3 a:visited {
color:#4a8393;
}

#featured h3 a:hover,

#featured h3 a:focus {
text-decoration:underline;
}

#posts {
width:636px;
clear:both;
overflow:hidden;
}

#posts li {
float:left;
width:636px;
width/**/:/**/626px;
padding:0 10px 0 0;
}

#posts li.first {
margin:0;
}

#featured .thumb {
float:left;
border:1px solid #d7d7d7;
margin:5px 10px 11px 0;
}

#featured p {
padding:0 0 10px;
}

#featured .more-link {
float:right;
font-size:1.2em;
padding:0 10px;
margin:0 -10px -10px 0;
position:relative;
color:#fff;
background:#404040;
border:1px solid #333333;
}

#featured .list {
float:left;
display:inline;
position:relative;
font-size:.88em;
line-height:2.1;
font-family:arial,sans-serif;
z-index:5;
color:#333;
width:527px;
padding: 0px;
margin:-30px 0 0 0px;
background:#ffffff;
border-bottom: 1px solid #eeeeee;
}

#featured .list li {
float:right;
}

#featured .list li a {
float:left;
color:#333;
background:#f6f6f6;
border:1px solid #eaeaea;
border-right:none;
padding:0 8px;
}

#featured .list li a:visited {
color:#444;
}

#featured .list li a:hover,

#featured .list li a:focus {
color:#fff;
border:1px solid #333333;
border-right:none;
background:#404040;
text-decoration:none;
}

#featured .jcarousel-container {
width:646px;
width/**/:/**/636px;
padding:6px 0 0 10px;
margin:0px;
background:#ffffff;
position:relative;
float:left;
display:inline;
}

#featured .jcarousel-clip {
z-index:2;
position:relative;
overflow:hidden;
width:636px;
}

#featured .jcarousel-list {
z-index:1;
overflow:hidden;
position:relative;
top:0;
}

.oops {
clear:both;
font-size:0;
line-height:0;
width:100%;
overflow:hidden;
display:block;
}
[/css]

Now that we have all that done, we are almost ready to save all this and start displaying a super cool WordPress featured post slider using jCarousel. All that is left to do is to create or edit posts and add them to the Featured category and configure a few simple things in each post to provided the needed information for the featured posts slider, just complete these steps for each post you want to show in the slider and you will be good to go.

  1. Write new or add existing posts to the Featured category (create the category if you don’t have it already)
  2. Add a custom field named feat_txt by clicking where is says “add new” then enter the text you wish to display as the featured text in the slider (i recommend about 20-30 words for this)
  3. Add another custom field for the image you wish to use in the features posts slider and name this custom field thumbnail and place the complete url to the image you wish you use, in the featured.php file I supplied in this tutorial the image will be scaled to 135px by 135px so using and image of any other size will be a waste.

Here is a screen shot showing how the custom fileds section should look for any post you wish to feature.

*edited on 7/19/2010

I have made many modifications to the WordPress featured post slider in use on my site, I have integrated a custom function to pull a special excerpt for this as well as integrated the post thumbnail feature now available in WordPress, if you would like to read more on these additions head over and read “Upgrade your theme for WordPress Post Thumbnails” to get the thumbnails integrated and “WordPress SEO Meta Tags Without Plugins” for the function to use for the custom post excerpt.

screenhunter_01-jun-21-1542

and

screenhunter_02-jun-21-1550

This should be it, if you have any questions please don’t hesitate to post them here. I will be more than happy to answer any questions you may encounter trying to setup your WordPress featured post slider.