How to create a custom slider with Pods! Pt1

Have you ever been insanely frustrated with the selection of sliders out there? Ever feel like the available sliders just don’t work the way you wanted or don’t have the fields or content areas you want? I have. For a long time too. Then I found the Pods Framework.

I have made more Pods sliders than I can count and each one is unique, but each one is as easy to make as the next. I’ve made sliders that simply slide images, I’ve made ones that slide custom text, ones that slide images and text, and ones that slide dynamically generated content from WordPress (like a featured post slider).

Content Slider Example

Here is an example of an image slider that was made with Pods and Flexslider.

In part 1 of this tutorial I will show you how to make a basic image slider. This is great if you have a client who wants to simply log in to their site, upload a new slide image, and have it link to anywhere within their site or externally.

Step 1: Set Up Your Pod

First, we create  new Pod called “Slider” and select the “custom content type” option. I also like to choose the “Show Admin Menu in Dashboard” option so that it appears on theleft hand admin menu with the posts and pages links. When you create this pod you will see a number of fields already created for you. You can remove any fields you do not want there, but you absolutely must keep the name and permalink field.

Create a new field called “Image” and choose the file/image/video field type and click on the additional field options. In there you will choose “single select” and I prefer to use the Plupload option because it is a faster/ easier interface.

Create another field called “Link To” and choose plain text. This is the field where we will paste in the link to the location that we want the slide to go to. ** I use plain text instead of ‘website’ because if I am linking within my own site I use relative paths instead of an entire url and the ‘website’ field does not like that. 

Save your Pod

Step 2: Getting the Pod Data

The above code is pretty self explanatory. Here we are getting the pod called “slider” and finding it by the name in ascending order. The last line of code is getting the total number of slides which is useful for checking if there are no slides.

Now that we have all of our slides in $slides, we need to get the content of the fields while we loop through each slide and assign them.

Step 3: Build the Slider’s Structure

So now that we have all of our ‘slider’ pods and the data inside the fields, it’s time to use that data! This is where the fun slider part comes in. You can really use any javascript or HTML structure that you want, but I have been partial to the Woo Flexslider because its light weight, easy to work with, and it allows you to drag and slide with your finger on touch devices.

You can have a quick look at the Woo Slider documentation to see what type of structure they want, or simply have a look at your preferred slider script and follow them and replace their actual paths to images and links with our new variables we set in the previous step.

This is the basic structure we will use:

So to combine the two things we need to look at this logically. We can not put all of the HTML structure in our “while” loop because we really only want the <li></li> elements to be looped and repeated and not the exterior containers.

This is how we will put the HTML with the PHP to make it loop in the appropriate way.

 ** I have included the ‘permalink’ field in this because we can use it’s value to create a unique ID for every slide. If you do not want this or need this you can simply remove it, but it is very handy for slide-specific tweaks if you wanted to go there. 

Note that the link code is using WordPress’ esc_url to sanitize links to output the url target of the slide.

Step 4: Hook up your stylesheets and javascript files 

Don’t forget to upload your javascript files to their appropriate folder in your theme and link to it. I strongly suggest you use the enqueue_script and enqueue_style method to call your scripts as outlined in this tutorial.

Paste this in your functions.php for flexslider scripts

Paste this in your functions.php for flexslider styles

 Step 5: Initialize Your Javascript

Finally, you need to initialize your javascript. Again, this will be different if you choose a different type of javascript slider.

Paste the following code in your footer before the closing </body> tag

So that is it! You now have an easy to manage image slider where you can set the custom link location!

I can not stress enough how many things you can do with this! You can start adding all types of content to your slides and make various layouts and settings for each slide via the Pods interface.

In Part 2 I will show you how to make a custom content slider where you can include headlines, text, and images in your slides. 

Wanna know why this web designer’s blog looks a little basic and untouched? Check out what this blog is all about and the Web Design For Idiots project

The_Idiot

About The_Idiot

Self made millionaire.. Oops I mean web developer.. who started out learning how to build websites with tables and dreamweaver, I now almost entirely focus on CMS-based development, usually WordPress. I love coding and designing and regularly switch between my left and right brains.