Creating a Content Slider for WordPress using TinySlider

I know that I have to make some kind of introduction about WordPress and content to connect it to the article’s headline but it seems that today I have no inspiration. So – you have a WordPress site, you need a content slider, you’ve tested a couple WordPress plugins and you’re not happy with the result. In that case – this is the post that you want to read, the tutorial you want to follow: we will create a content slider based on one category and the TinySlider developed by Michael Leigeber.


Small introduction to TinySlider

TinySlider is a lightweight javascript component – 1.5KB – that can be easily integrated in any website. It is easy to alter it visually through CSS which makes it a perfect component for designers. Another point that needs to be reminded is that the component is cross-browser compatible – yes, IE6 too. You can take a look at the demo from www.leigeber.com.

Download TinySlider Script

To use it you will have to download it, upload it onto your server and link it to your slider page(both the script and CSS styling). To use it with WordPress … follow the next 5 steps.

Step 1 – Analyzing TinySlider

I’ve removed the previous and next button for the posts because you can choose to put them or not, since you have the bullet navigation on top of the slider. Below is the structure of the slider that we will follow in order to create a content slider for WordPress using TinySlider.

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="slider">
	<ul>
	<li></li>
	<li></li>
	<li></li>
	</ul>
</div>
<ul id="navigation">
	<li onclick="slideshow.pos(0)">1</li>
	<li onclick="slideshow.pos(1)">2</li>
	<li onclick="slideshow.pos(2)">3</li>
	<li onclick="slideshow.pos(3)">4</li>
</ul>

So, after seeing this code, what we want to do is get an image from a blog post and place a link towards that post. To do that we will use a function in order retrieve the first image from the post.

Step 2 – The Thumb Function

This is a very common function that you will find it on numerous sites. All you have to do is – take the code and place it inside the functions.php file, in your WordPress theme folder. If you don’t have such a file, you can create a new one with this name – functions.php.

1
2
3
4
5
6
7
8
9
10
11
12
<?php if ( function_exists('register_sidebar') )
register_sidebar();
 
function the_thumb($size = "medium", $add = "") {
global $wpdb, $post;
$thumb = $wpdb->get_row("SELECT ID, post_title FROM {$wpdb->posts} WHERE post_parent = {$post->ID} AND post_mime_type LIKE 'image%' ORDER BY menu_order");
if(!empty($thumb)) {
$image = image_downsize($thumb->ID, $size);
print "post_title}' {$add} />";
}
}
?>

What this function does when it is called, it gets the first image from your post and you can mention the size of the image (thumb, medium, large). You can set your values in Settings->Media – in WordPress administration.

Step 3 – Retreive Posts’ Images

Let’s assume that we already have some posts inside a category which is entitled – featured. We will use WP_Query in order to get the images from posts within featured category.

1
2
3
4
5
6
7
8
9
<div id="slider">
<ul>
	<?php $sliders = new WP_Query();
	$sliders->query('category_name=featured');
	while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li><?php the_thumb('large');?></li>
	<?php endwhile; ?>
</ul>
</div>

First we create a loop to go through featured category. Then we display the image using the_thumb function. So, for now, we created a list with large images from all featured posts.

Step 4 – Creating Navigation Bullets

In order to create the navigation, we will need to retrieve the link for each post. And we can do that by creating a loop, but we won’t. We will reuse the first one with the help of rewind_posts().

1
2
3
4
5
6
<ul id="navigation">
<?php rewind_posts(); $i = 0;while ($sliders->have_posts()) : $sliders->the_post(); ?>
	<li onclick="slideshow.pos(<?php echo $i; ?>)">
	<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php $i +=1; endwhile; ?>
</ul>

You can see that our slider will display the name of the post as navigation items. You can change that and for instance leave it empty, and then stylize the bullets as you wish. You can also print i variable and you will have numbers as navigation. The possibilities are endless and it is up to you how the slider will look in the end.

Step 5 – Initialize the Slider

Place this script in the footer of your site – before closing the body tag in order to make this slider work. Also, as stated in the start of the tutorial, link to the script file and CSS stylesheet in the head of your document.

1
2
3
4
5
6
7
8
9
var slideshow=new TINY.slider.slide('slideshow',{
	id:'slider', // ID of the parent slideshow div
	auto:3, // Seconds to auto-advance, defaults to disabled
	resume:true, // Resume auto after interrupted, defaults to false
	vertical:false, // Direction, defaults to false
	navid:'pagination', // Optional ID of direct navigation UL
	activeclass:'current', // Class to set on the current LI
	position:0 // Initial slide position, defaulting to index 0
});

Conclusion

Assemble all these lines, add the styling you want and good luck. Please let me know if for some reason the tutorial is hard to follow or you have other question to ask. Don’t forget to check first Michael Leigeber’s site for more info about TinySlider component.

Cheers!

4 ideas on “Creating a Content Slider for WordPress using TinySlider

  1. Deluxe Blog Tips

    I think we should use the post thumbnail feature in the WP 2.9 to get the thumbnail. It’s easier than raw SQL query.

    • Andy Gongea

      Yes, it can be done using post thumb feature.
      But, if I recall correctly you need to upload a custom image for that. Here you will get the image automatically from the post, which means less work.

  2. Wall Stickers by Alex

    Well, i use post thumbnails that is under WP, although might try Tiny silder!
    Thanks,

    Alex

  3. Brett Widmann

    Great post. It works great!