Another Featured Content Slider Tutorial

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.

<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 class="slidetext">       
      <h2><?php the_title();?></h2>       
      <span class="excerpt"> <?php the_excerpt();?></span>

  <?php endforeach; wp_reset_query();?>

    <div class="bottom-slider-content">
      <div id="slidernav"></div>
</div><!--/.bigbox #featured-slider-->

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.

		.after('<div id="slidernav">')
			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.

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!

add_theme_support( 'post-thumbnails' );       
    add_image_size( 'big-slider', 600, 315, true ); 

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 Featured Slider Example (1854)

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

Never Listen to Electric Guitar

What do you do with a bit of free time? Make another Photoshop brush, of course. This download contains The Rays of Excellence, 3 Bad Stars and 1 man with an electric guitar and a mic at his feet (Photoshop CS3). I’ve also included a smaller,horizontally flipped of the man/guitar/mic brush. And the download is free as always, my friends.

Download: Man, Guitar, Microphone Photoshop CS3 Brushpack (1386)

Ubiquitous Grunge Photoshop Brush Pack

Download Here » Some Grunge Bits (1450)

Download Includes:

  • 1 Photoshop Brush of a Ubiquitously Grungey Piece of Tape
  • 1 Photoshop Brush of a Ubiquitously Tattered Piece of Notepaper
  • 2 Photoshop Brushes of Odd Little Flourishes (what do you call them?) * warning * use the eraser on the annoying lines that form if using more than 50% opacity.
  • 1 Photoshop Brush of a Grunge Sploogey Thing (for usage with the Eraser set to some level of Transparency to Impart that Grunge Feel on Background Layers)
  • 1 Photoshop Brush of a Extremely Excellent Horizontal Bar with Scratchiness and Blurriness built right in!
  • 3 .PSD Files Admirably Executed for Example Usage