WordPress Featured Post Slider Using jCarousel
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 I used a plugin on this site called featured content gallery and while it was effective 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. I searched all over the internet and came up with nothing 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 solution to accomplish it.
Now that I have it working on this site I will share how to do it so anyone who is looking for the same thing 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 here at AdminDaily.com
- Download jCarousel HERE
- 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
- 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 featured posts slider, so you have an opening div and the start of an unordered list like so;
<div id="featured"> <ul id="posts">
below this, we will use a custom WordPress query to gather the posts we want for this section, 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 $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++; ?>
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 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.
<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 »</a> </li> <?php endwhile; ?> </ul>
Finally, we add the last unordered list to the bottom that will display the numbered buttons to click to show the posts in the slider that are numbered 1 through 5 like so;
<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>
Click Here to download a complete featured.php file to save you some copy/pasting :-)
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 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 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 } ?>
Next, we include the featured.php file wherever you wish to show it within your template files using a php include statement like so:
<?php include (TEMPLATEPATH . '/includes/featured.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, 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 it 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)
#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;
}
Now that we have all that done, we are almost ready to save all this and start displaying a super cool featured posts 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.
- Write new or add existing posts to the Featured category (create the category if you don’t have it already)
- 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)
- 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.
and
This should be it, if you have any questions please don’t hesitate to post them here. I will be more than happy to help any way that I can.
-
Bob Gillespie
-
Jesse
-
Maxime Pecherskiy
-
Jesse
-
Maxime Pecherskiy
-
Jesse
-
Maxime Pecherskiy
-
Jesse
-
graefika
-
Jesse
-
graefika
-
Nash
-
Jesse
-
Nash
-
Jesse
-
Nash
-
Jesse
-
achi
-
Jesse
-
omgitsrfb
-
Jesse
-
achi
-
achi
-
Jesse
-
Ricky
-
Jesse
-
Amy
-
Amy
-
Amy
-
Amy
-
Jesse
-
Amy
-
Amy
-
Jesse
-
Amy
-
Jesse
-
Amy
-
Jesse
-
Rhys
-
Jesse
-
farene
-
Jeroen
-
Jesse
-
Jeroen
-
Jeroen
-
Jesse
-
Jesse
-
victor
-
Jesse