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

Lindsay

About Lindsay

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.

13 thoughts on “How to create a custom slider with Pods! Pt1

  1. jul

    Great tutorial. Please the second part for custom slider with image and text in pods :-)

    • bscdevel

      Jul,
      I am on it. I have already started writing the tutorial for pt2. I’ll reply let you know!

  2. Mike

    Can you explain your understanding of what the ‘search’ => false parameter does, and why it’s necessary in your example?

  3. Looks great! Anyway the tutorial seems slightly outdated. Would you please update the article because I couldn’t find the “Custom Content Type” field in the latest version of Pods. Thanks!

  4. Any news on Pt2? Would love to see what else we can do.

    • Lindsay

      Yup. Working on updating existing tutorials (Pods code has changed a LOT since I’ve written these) and then Pt.2 will include alternative layouts per slide.

  5. As a newcomer to Pods I have noticed the lack of decent up to date tutorials. I am kinda getting there, but just need some gentle nudges in the right direction. Your tutorials have been the most help so far. I will keep an eye out for new stuff.

    Thank you for what you have done so far!

    • Lindsay

      The issue isn’t that there is a lack lovers and users of the Pods Framework, it’s that the framework as a whole is growing in leaps and bounds VERY quickly. Its a testament to how amazing the platform really is. That said, I completely understand how hard it is to find the most up to date info in these types of cases. I am updating each current tutorial as we go will keep adding new ones. Pods is great! I promise!

      I just finished updating this tutorial if you’re trying to understand Pods ACT’s

      Pods Pages and templates and more Pages OH MY!

  6. Thank you, I am having a good look around. I am trying to use WordPress Templates as much as possible, as it will help me understand that area as well.

  7. Lindsay

    Sticking with the WordPress templates will definitely help you in the long run. I have always used the WordPress page templates over any short codes, etc because it gives me finer control of what i want to show AND it’s something I can expand on more in the future if i want to instead of having to rebuild an entire page structure if I one day want to get out of the Pods Templates and get in to something more involved. It’s also good PHP/ Logic practice.

    I just published the image tutorial. Its quick and short but I had it sitting in drafts for a while because I was going to make it part of a bigger tutorial, but since you wanted it, try it out. Let me know if you have issues with my code.

  8. computerinfo21

    Great tutorial, thanks for writing it.  Any news on Part 2?

    A couple of small issues I ran into while doing this, noting fixes to hopefully save other people some time:

    – Params array contains an error on name line. It is missing a single quote after ordderby and the “t.” part was not working, so I changed it to:
    <code>’orderby’ =>’name ASC'</code>

    – Where you say to use esc_url it just has esc in the code, should be:
    <code>esc_url($slides_link)<code>

    – Image size defaults to thumbnail so pictures look blurry if a large slider. Fix by passing the desired image size (in my case I wanted the full size image) as a string to pods_image like:
    <code>pods_image($slides_banner, “full-size”)</code>

    • Lindsay

      Thanks for catching those. I made the changes.. The t.name was something I accidentally carried over from other code and the other issues were definitely the result of doing this too late and night ;) Thanks!!!

      Regarding the image size, I used thumbnail just as a suggestion. If your theme does not actually use small thumbnails you can use the ‘thumbnail’ size to create a custom image size so in some projects I adjust the ‘thumbnail’ size to the size of a slider image. Folks are welcome to change it to whatever you want, however, be warned about using ‘full-size’ because if the website user / administrator does not know how to properly size their images for upload you can wind up with all sorts of issues including long page loads and pictures that are crammed into a smaller spot than they should be.

      Part 2 is in the works, I swear. It’s been a little nuts over here, but I just setup my email subscription form so you can subscribe to this blog and get an email when the post is published (link is in the top menu)

  9. Tom G

    This articile was extremely helpful ~ mostly in opening my mind to the ways which custom content types can be used.. I’m still learning my code and found pods is very different now.. things like adding a permalink field as mentioned do not work in the same way.. so I’m trying to hack away and get it going ~ currently just displays an empty flexslider div.. would love to see part 2 if it does indeed surface !! Keep up the great work

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">