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).

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

<?php
$slides = pods('slider');
$params = array(
      'search' => false,
      'pagination' => false,
      'limit' => -1,
      'orderby =>'t.name ASC'
);
$slides->find($params);      
$total_slides = $slides->total();
?>

<?php

$slides = pods('slider');

$params = array(

'search' => false,

'pagination' => false,

'limit' => -1,

'orderby =>'t.name ASC'

);

$slides->find($params);

$total_slides = $slides->total();

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.

// if there are no slides, do not run this code
if( $total_slides > 0 ) : 

//looping through each slide     
while ( $slides->fetch() ) : 

      // set our variables
      $slides_name = $slides->field('name');
      $slides_banner = $slides->field('image.guid');
      $slides_link = $slides->field('link_to');
      $slides_perma = $slides->field('permalink');

// if there are no slides, do not run this code

if( $total_slides > 0 ) :

//looping through each slide

while ( $slides->fetch() ) :

// set our variables

$slides_name = $slides->field('name');

$slides_banner = $slides->field('image.guid');

$slides_link = $slides->field('link_to');

$slides_perma = $slides->field('permalink');

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:

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
  </ul>
</div>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

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.

<div class="flexslider">
<ul class="slides">
     <?php
     // if there are no slides, do not run this code
     if( $total_slides > 0 ) : 

     //looping through each slide     
     while ( $slides->fetch() ) : 

           // set our variables
           $slides_name = $slides->field('name');
           $slides_banner = $slides->field('image');
           $slides_link = $slides->field('link_to');
           $slides_permalink = $slides->field('permalink');

?>
    <li id="<?php echo $slides_permalink; ?>" >
             <a href="<?php echo esc($slides_link); ?>">
             <?php echo pods_image($slides_banner); ?></a>
    </li>

<?php endwhile; ?>

<?php endif; ?> 

</ul>
</div>

<?php

// if there are no slides, do not run this code

if( $total_slides > 0 ) :

//looping through each slide

while ( $slides->fetch() ) :

// set our variables

$slides_name = $slides->field('name');

$slides_banner = $slides->field('image');

$slides_link = $slides->field('link_to');

$slides_permalink = $slides->field('permalink');

<?php echo pods_image($slides_banner); ?></a>

</li>

<?php endwhile; ?>

<?php endif; ?>

</ul>

</div>

** 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

function flexslider_scripts()  
{  
wp_register_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ) );  
wp_enqueue_script( 'flexslider' );  
}  
add_action( 'wp_enqueue_scripts', 'flexslider_scripts' );

function flexslider_scripts()

{

wp_register_script( 'flexslider', get_template_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ) );

wp_enqueue_script( 'flexslider' );

}

add_action( 'wp_enqueue_scripts', 'flexslider_scripts' );

Paste this in your functions.php for flexslider styles

function flexslider_styles()  
{  
    wp_register_style( 'flexslider-style', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), ' ', 'all' );  
    wp_enqueue_style( 'flexslider-style' );  
}  
add_action( 'wp_enqueue_scripts', 'flexslider_styles' );

function flexslider_styles()

{

wp_register_style( 'flexslider-style', get_stylesheet_directory_uri() . '/css/flexslider.css', array(), ' ', 'all' );

wp_enqueue_style( 'flexslider-style' );

}

add_action( 'wp_enqueue_scripts', '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

<script type="text/javascript"> 
jQuery(window).load(function($) {
jQuery('.flexslider').flexslider({
		animation: 'fade',
		controlsContainer: '.flex-container'
	});
});
</script>

jQuery(window).load(function($) {

jQuery('.flexslider').flexslider({

animation: 'fade',

controlsContainer: '.flex-container'

});

</script>

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

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

jul November 21, 2012 at 11:45 am

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

Reply ↓
1. bscdevel Post authorNovember 21, 2012 at 6:11 pm
  
  Jul,
  I am on it. I have already started writing the tutorial for pt2. I’ll reply let you know!
  
  Reply ↓