Here’s a request that I get often: “Can we have an image slideshow that appears on top of every page and can you set it up so that we can change the images from time to time?”
In WordPress there’ s many ways you could set this up and in most of them you would probably want to set up custom fields to accomplish this task. Before you start, however, there are a few questions that you should clear up:
- Do I want the same slideshow/carousel to appear on every page that uses the same template header? Or should there be a different slideshow on each page?
- Will the image dimensions differ or should they all be the same?
- How many images should the carousel be able to load at most?
- Should the images appear in any particular order or load randomly page load?
In this tutorial I’ll show you how to create an image carousel for your WordPress theme with the following assumptions (answers to the above questions):
- We want the the same carousel to appear on every page using the same template header.
- All the images that are to be loaded in the carousel will have the same dimensions.
- We will set a hard limit of 5 images for the carousel. That is, up to 5 images can be loaded in the carousel.
- The images will appear in a random order per page load.
Also, to accomplish this task we will make use of the fantastic Advanced Custom Fields (ACF) WordPress plugin and the useful Woo Themes Flexslider, which, is a fully responsive jQuery slider plugin. They are both free of cost which is great. You can either download ACF and upload it to your testing server’s wp-content directory or install it directly from within the WordPress admin site under the Plugins section. You will, however, need to download Flexslider to your machine and upload it to your theme’s directory containing JavaScripts. I usually have a directory called js within my theme just for JavaScripts. Speaking of themes I’ll be working on the Twenty Eleven theme that comes with every WordPress 3 install for demonstration purposes, nevertheless, feel free to retool this for your custom theme. Also, it should go without saying, but I’m going to assume that you have a basic understanding of WordPress theme development, PHP, JavaScript and CSS. If not, then it might be a bit difficult to follow.
Assuming you have both the ACF plugin and Flexslider plugin uploaded to their respective places we can start. We will divide the job into steps:
- Step 1: Create a static page for the carousel images and a custom field group using ACF
- Step 2: Populate the custom fields for the static page
- Step 3: Create a custom theme template file to pull down the advanced custom field data from the WordPress MySQL database
- Step 4: register the and load the Flexslider jQuery plugin the WordPress way
- Step 5: connect the carousel HTML with the Flexslider plugin and style it with CSS
