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><img src="photos/sea-turtle.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/coral-reef.jpg" width="500" height="300" alt="" /></li>
	<li><img src="photos/blue-fish.jpg" width="500" height="300" alt="" /></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 "<img src='{$image[0]}' alt='{$thumb->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!

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers! Follow Andy on Twitter: @andygongea

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends

RSS User Experience Bookmarks