Programming a Slider for WordPress 3.3

If you are a designer or developer starting in the use of WordPress as one of your Content Management Systems of choice, then perhaps there will come a time when you’ll want to implement a Homepage slider.

So what is a Slider exactly? A slider is also known as a “Featured Image Section” that usually transitions from one message to another either by fading in and out or by other effects like SlidingUp or ZoomingIn. In any event, the use of Sliders has been a very popular one because not only is it the most prominent thing in a page because of its size, also it has movement. This combination will attract the eyes of your audience better than anything else, and therefore is a good promotional tool for your site.

Now, you could hard-code the slider in place and be done with it. However, wouldn’t it be better if you could simply upload your images via your WordPress Admin Interface and they would show up in your slider?

Solution

1. Activate Featured Images for your posts in your WordPress Admin Section. This is easily done by adding a couple of lines of code to your functions.php file. If you don’t know what a functions.php file is, then perhaps you need to start by checking out the basic components of your themes and revise the codex to learn more about it first.

   // adds support for the thumbnails in the pages.
   add_theme_support( 'post-thumbnails' );
   

2. Also while you are there, make sure you create a resizing option for the image that is going to be used in your Slider.

   // slider size for Sliders in the Home Page
   add_image_size( 'slider-image', 980, 342 ); // Exact Size of the sliders 980 x 342
   

3. Go to your Homepage template (perhaps index.php) and locate where you are intending to create the slider. Then simply create a new loop and call the Featured Images of a particular Category of Posts:

   /*
   * Selection of Slider by User
   * 
   * 
   */
   
   // create a wp_query for the slider. This loop will only include posts with category slider and limit the amount to 5
   $slider_query = new WP_Query('category_name=Slider&posts_per_page=5'); 
   if( $slider_query->have_posts() ) : while ($slider_query->have_posts() ) : $slider_query->the_post(); 
   if ( has_post_thumbnail() ) :
   // grab the attachment image with the right resizing option and put it in $image.
   $image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'slider-image' ); 
   

   // back to php
   endif;
   endwhile; 
   endif;
   

That’s it, now to use it is very simple. Simply create a new post and select category: Slider. That tells WordPress that this post is to be used in your Slider Section in your Homepage. Then upload an image as a “Featured Image” for that particular post. This image, will be modified by WordPress to display in the right size.
What you are doing behind the scenes is very simple: You are first creating a new loop(see codex if you need more help with understanding loops), then you grab the Featured Image of the posts with category “Slider” and then finally you create an html image tag with the results of that loop. In this case I am limiting the results to 5 posts for speed of loading.

Hope this helps and don’t hesitate to comment below.

Until next time,

Alex