Creating a Product Slider in WordPress with Slides jQuery Plugin

/ Wordpress / by Paul Robinson / 0 comments
This post was published back on October 25, 2011 and may be outdated. Please use caution when following older tutorials or using older code. After reading be sure to check for newer procedures or updates to code.

First thing we need is to make sure we have jQuery attached to our site. Now I’m sure you can all remember how to do it the nice neat WordPress way, but for those that are joining us for the first time here it is again.

I’ve used Google’s hosted jQuery, but if you have your own copy you can just use get_bloginfo('stylesheet_directory').'/path/to/file.js' instead.

What Are We Making?

A good question. I love a good image for illustrative purposes & this tutorial is no different. In true Blue Peter style, here’s one I made earlier.

Example of a Product Slider in WordPress using Slides jQuery Plugin

Images © Lisa Marie Art & Illustration. Used with permission.

This slider is slightly different from others we’ve gone over before in that it doesn’t show images from different posts. Rather it shows all the available images for one post. As such it would generally be used on the single post view (single.php) of your WordPress site.

What is Slides?

Slides is a jQuery plugin by Nathan Searles which can be used to make practically anything slide. Text, images, anything. First thing you need to do though is go and grab it. So, go download it from the Slides website and then attach it to your page using the technique I mentioned earlier (for attaching jQuery). Those familiar with WordPress might like to throw in a conditional such as is_single() to only load the Slides plugin on single post pages.

Slides jQuery

In a strange twist we are going to start with the Javascript this time. It’s pretty simple to setup the slides.

I’ve chosen to use bloginfo() to fill in the URL to my preloader image. Feel free to hard code it instead. You may also be wondering why I turned off the pagination. Well the answer should become clear very soon.


Okay, now we get onto the HTML. The reason I chose to do the Javascript first is because it’s easier to explain the HTML & PHP together. First let’s take a peek.

You might be able to see that the reason I turned off the pagination is so we could generate our own using images. Let’s go through what exactly is going on here.

First notice that the slides plugin requires us to have an outer container (slides) and inside that a slide container + the pagination.

First inside the slides container. We use get_posts() to grab the attachments for this post. The options are fairly self explanatory. You may be wondering why posts_per_page is set to -1 though, it just means we want all of the images attached to this post. Also post_mime_type limits it to only pulling back attachments that are images.

We run through each post using a foreach and use the attachment’s ID to grab the full size image. You can easily swap out full for a different size such as thumbnail, medium, large, you can even use a custom one if you are using the WordPress thumbnail system.

Inside the pagination we use reset() to move the internal pointer back to the start of our posts, and then we run through the posts again this time grabbing a custom thumbnail size that Lisa Marie made for her website using the WordPress thumbnail system. Again though you can use your own, or one of the predefined sizes.

Slides CSS

I’m not able to give the CSS used as it’s Lisa Maire’s, but here are two basic, needed CSS rules.

These two rules define the width & heights needed by the slides. Also display none is needed in the slides container as it stops a horrible flash of unstyled contented while the Javascript/images is/are loaded.

That’s it. Hopefully this tutorial has been helpful to you. If you have any questions or you need any additional help let me know via the comments. Or if you are in need of hands on help you can hire me via my Hire Me page.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

I'll keep your WordPress site up-to-date and working to its best.

Find out more