Build a custom image slider on your home page using built-in WordPress functions

Image sliders are quite popular and add a nice visual element to any website. You could use a plugin to add one to your site, but wordPress has all of the functionality built-in for you to integrate one in any theme of your liking. If you’re a theme developer, you’ll want to follow along and add this code snippets to your collection.

I recently created a site for my colleague and very good friend Barbara. You’ll see that her home page has a very simpler slider. If we ignore the header, sidebar and footer, this page is very simple. In the following tutorial, I’ll walk you through each step and show you how to integrate a slider like this.

Step 1 – Download the slider

There are a lot of sliders out there, but my favourite is Slides by Nathan Searles. Make sure to grab a copy of it and take a look at his examples. I’ll be using his Standard slider for this tutorial.

Once you’ve downloaded the slider, make a copy of the folder called Standard. The first thing I like to do is to get the slider working with my images and my styles just like the design that was provided to me. I like to approach this as I would a puzzle. I get the slider working on my desktop on it’s own and then integrate it in my WordPress theme.

Taking a look at the index.html, we can see that there’s some stuff in there that we don’t need. We can delete the ribbon, the frame, the footer info and we’ll replace the flickr images with our own. At this stage, you’ll also want to go in the images folder, add your images and delete the ones you don’t need.

Next, we can do the same with the CSS file. What’s important here is the styles that are relevant to the slideshow. Nathan has done a great job with the css and thus you should be able to adjust any settings to ensure that the slider looks great with the images you are using. Please make sure that all of your images are the same size.

Once you have your slider working and it looks great, we can integrate the code into our WordPress theme.

Step 2 – Setting up your WordPress page

Setting up this page is actually easier than you might think. Ideally what we want is a page with a title a paragraph of text and above it the slider. You might not even want any text. Who knows, the world is your oyster.

So let’s go in the admin and create a page call it home or whatever you like. Add your content as you would any other page and upload the images that you want to display in the slider. It’s very important to upload the images this way and not via the Media Library. When uploading images while writing a page or post, the images automatically get “attached” to it, and that’s what we need to create the slider. The same would be true if you wanted to insert a gallery.

Step 3 – Include jQuery the right way

Your working slider example has a few lines on Javascript in the header. We’ll need to set this up in our WordPress theme by updating our functions.php and header.php template.

In your slider example, you’ll see that Nathan has included the following three lines of code in his head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script src="js/slides.min.jquery.js"></script> 

You might be tempted to add these directly to your header.php, but best practice recommends that you enqueue your jQuery.

To do this, you’ll need to add the following to your functions.php.

function blm_init_method() {
    wp_enqueue_script('jquery'); 
    wp_enqueue_script( 'easing', get_template_directory_uri().'/js/jquery.easing.js', array( 'jquery' ), '1.3' );
    wp_enqueue_script( 'slides', get_template_directory_uri().'/js/slides.min.jquery.js', array( 'jquery', 'easing' ) );

}
add_action('wp_enqueue_scripts', 'blm_init_method'); 

You’ll notice here that my function, uses my prefix blm. Feel free to change it to yours.

You will also notice that I am using WordPress’s built-in jQuery and not the one from Google’s library (again, best practice) and I’ve also grabbed a copy of both js files and added them to my theme. You’ll need to do the same thing.

Now here’s a trick: Once you’ve updated your functions.php and uploaded the js files to your server, take a look at your site and look at the source code, Now click on the path of all three js files. You should be able to see the jQuery. If you get to a 404 page, make sure that your paths are ok and the files are in the right folders. Without these, you’re slider will never work and you will be pulling your hair out.

Step 4 – Update your CSS

When you fiddled with the code for the Standard slider, you changed some css. Grab all that code and insert it in your theme stylesheet. Make sure to double check the path to the images and upload the images you need to your theme folder.

Nathan also has a few more lines of jQuery in his header. We’ll need to add these to our header.php and make a very subtle change like so:

<script>
 jQuery(document).ready(function($){ 
	$('#slides').slides({
	preload: true,
	preloadImage: '<?php echo get_template_directory_uri(); ?>/images/loading.gif',
	play: 5000, 
	pause: 2500, 
	hoverPause: true
	
   });
 });
</script>

You’ll notice that jQuery(document) is used instead of $. This needs to be in place for the jQuery included in WordPress to work.
This snippet of code needs to be added right below the .

Step 5 – Build the slider using wp_get_attachment_image

Now that we’ve got everything in place, what we need to do, is create a template for our home page. I normally like to use a template called front-page.php, but you could create a custom template or just use the index.php and start with the following code:

<?php get_header();?>
<div id="main">
 <div id="content">
   My slider will go here
 </div>
</div>
<?php get_footer(); ?> 

Of course, you can modify this template as you need.

If we take one more look at our slider html file, you’ll notice that we need to insert the following code between the content div:

<div id="slides">
 <div class="slides_container">
   Images will go here.
 </div>
 <a href="#"><img src="img/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 <a href="#"><img src="img/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>

We’ve already uploaded our images, so what we need to go is just grab them using the following code snippet:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$args = array(
 'post_type' => 'attachment',
 'numberposts' => -1,
 'orderby'=> 'menu_order',
 'order' => 'ASC',
 'post_mime_type' => 'image',
 'post_status' => null,
 'post_parent' => $post->ID
);

$attachments = get_posts( $args );
 if ( $attachments ) {
  foreach ( $attachments as $attachment ) {
 echo wp_get_attachment_image($attachment->ID , 'full' );
 }
}
endwhile; endif; ?>

So our final template looks like so:

<?php get_header(); ?>
<div id="slides">
 <div class="slides_container">
 <?php if ( have_posts() ) : while ( have_posts() ) : the_post();

$args = array(
 'post_type' => 'attachment',
 'numberposts' => -1,
 'orderby'=> 'menu_order',
 'order' => 'ASC',
 'post_mime_type' => 'image',
 'post_status' => null,
 'post_parent' => $post->ID
);

 $attachments = get_posts( $args );
  if ( $attachments ) {
   foreach ( $attachments as $attachment ) {
  echo wp_get_attachment_image($attachment->ID , 'full' );
 }
}
endwhile; endif; ?>
</div>
 <a href="#"><img src="<?php bloginfo('template_directory')?>/images/arrow-prev.png" width="24" height="43" alt="Arrow Prev"></a>
 <a href="#"><img src="<?php bloginfo('template_directory')?>/images/arrow-next.png" width="24" height="43" alt="Arrow Next"></a>
</div>

<?php get_footer(); ?>

This code will grab all of the images attached to the post and insert them in the order you’ve specified. The CSS and the JQuery will then transform these into a slider. If you want, you could also display your content and title below.

Feel free to download all of the files that I’ve used for this tutorial and please let me know if you run into any issues.

2 comments:

  1. Excellent tute, I’m going to implement this on a friends restaurant site where i’ve just created a Menu system from a custom post type.
    Thanks for sharing!

Comments are Closed.