Programming a Slider for WordPress 3.3

December 14th, 2011 admin Location: Raleigh, NC, Topic: Web Design | Digital Media

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

About the Author

Alex Centeno MBA., is an international creative director and digital media strategist. Currently residing minutes away from the Research Triangle Park (RTP) - North Carolina, and with over 10 years of interactive marketing training and experience, Alex leads Merkados' international clients to maximizing their online business strategies. One of Alex's biggest strengths is his world-class capacity to effectively combine interactive marketing, digital media design and web development.

You may find further information about Alex Centeno MBA. at: and Twitter.

Sobre el Autor

Alex Centeno MBA., Es un director creativo y estratega de medios digitales reconocido internacionalmente. En la actualidad reside a tan solo minutos del Research Triangle Park (RTP) - Carolina del Norte, y con más de 10 años de entrenamiento y experiencia en marketing interactivo, Alex lidera a los clientes internacionales de Merkados™ para maximizar sus estrategias de negocios en línea. Una de las mayores fortalezas de Alex es su capacidad global de combinar de manera efectiva, mercadeo interactivo, diseño de medios digitales y desarrollo web.

Para más información sobre Alex Centeno MBA. puede visitar: y Twitter.