Month: December 2010

All of my latest projects have involved putting a featured content slider of some kind on the home page. Everybody wants one. There are plenty of plugins both Jquery and WordPress (and Joomla and Drupal) that will build a slideshow for your images. You get a little less to choose from if the content being “slidered” is text and images.
And if using WordPress, you want to be able to use posts, featured images and the_ excerpt or the_content, right?

I’m using loopedSlider by Nathan Searles which has very recently been renamed Slides. I choose this plugin because it lets you choose from several different kinds of of transition effect for the sliding animation, has paging and can handle divs. In short it is highly flexible and extremely simple to use. Thank you, Nathan Searles for creating it and offering to the public.

If it’s so easy why do I need to write a tutorial? Because it got a little complicated when it came to using this plugin for WordPress posts. Here is a code example of a featured content gallery or slider that grabs 6 Posts according to a Tag. The amount of Posts is optional as is the Tag. The example code is not using the Loop and is safe to use in a theme file that is using the Loop – not in the Loop itself – that goes with out saying, I hope.

[php]<div id="featured-slider" class="bigbox">

<div id="slideshow">

<?php global $post;
$tmp_post = $post;
$myposts = get_posts(‘tag=featured&posts_per_page=6’);
foreach($myposts as $post) :
setup_postdata($post); ?>

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<span class="slideimage">
<?php the_post_thumbnail(‘big-slider’);?>
</span>

<span class="slidetext">

<h2><?php the_title();?></h2>

<span class="excerpt"> <?php the_excerpt();?></span>

</span>

</div><!–/post–>

<?php endforeach; wp_reset_query();?>

</div><!–/slideshow–>

<div class="bottom-slider-content">
<div id="slidernav"></div>
</div><!–/bottom-slider-content–>

</div><!–/.bigbox #featured-slider–>[/php]

Purists will not like the use of heading tags inside span tags but I found it somewhat easier to use span tags so that the slider knew when to stop sliding things.

Of course you have to download the slider JavaScript from the Slides Web site. Of course you have to be using Jquery in your theme. On the Slides Web site you will find many option examples and implementation codes. Here is how I configured mine. Note: I built this slideshow using loopedSlider so it might be helpful to visit that page as well for examples.

[js]$(document).ready(function(){
$(‘#slideshow’)
.after(‘<div id="slidernav">’)
.cycle({
fx: ‘scrollDown’,
// choose your transition type, ex: fade, scrollUp,scrollLeft,scrollRight, shuffle, etc…
speed: 1500,
// defines the number of milliseconds it will take to transition from one slide to the next.
timeout: 9000,
// specifies how many milliseconds will elapse between the start of each transition
pause: 1,
// so that pauses when user hovers over a slide
delay: 9000,
// set a delay before 1st slide starts transitioning
pager: ‘#slidernav’
//instructs the plugin to create navigation elements,
one for each slide, and add them to the container
identified by the value of the pager option.
});

});[/js]

Using the Featured Image in the Content Slider

If you look at the content slider code carefully you’ll notice I am using a Featured Image size named big-slider. I added this to my theme functions.php in order to be able to use a specific image size in the slider. Very useful for a consistent look.

Please backup functions.php before editing it!

[php]
add_theme_support( ‘post-thumbnails’ );
add_image_size( ‘big-slider’, 600, 315, true );
[/php]

If your functions.php already has the add_theme_support code don’t add it in again. Also, you can choose whatever size you want.
The first number is the image width, second is the height. You’re supposed to be able to have an open size , example: add_image_size( ‘big-slider’, 600, 999, true );

But I have had difficulty with this.

And then of course you can skip this and just put an array for the featured image directly into the slider query code,
example: the_post_thumbnail(array(600,315) );
instead of the_post_thumbnail(‘big-slider’);.

If you choose to do this you don’t need to add an image size to your functions.php but you should still take a look to see if your theme supports them. I know this is said over and over again but the image size you choose either in the query or the functions.php code does not work on already uploaded images.

In order to have the size you set kick in you must re upload the image and then choose it to be the featured image.

Download the example [download id=”13″]

For CSS (styling) and Javascript please visit Slides or loopedSlider.