How to create WordPress sliders for static and dynamic content

   Joe Lobo

How to

July 5, 2020
2

If you want to take your website to the next level one of the most important elements to add is a WordPress slider.

A slider brightens up your website and makes it stand out by adding color and great images to your pages. Not only that, but it can also provide useful information to the user about how your product or anything else you display looks and works.

Many people don’t realize that, in addition to a basic static slider, you can also create a custom image slider with dynamic content for your single posts. Furthermore, with Toolset, you can also build sliders that display not just images but all kinds of dynamic content including headings, custom fields and much more.

Below I will go through these three types of sliders and how you can create them with Toolset. 

What is a static slider?

A static slider is a basic slider for images that you will probably be familiar with. You create the slider and add the images and that is it. No matter where the slider appears it will display the same images.

Below you can see a slider that I created by updating one of Toolset’s reference sites. On the travel website demo (which you can check out for free), I have added a static slider on the homepage with some of the locations.

A static image slider.
An example of a static image slider.

I selected the images from my library and included them along with a caption – just like you would when you’re adding a regular image on WordPress.

You can add static sliders anywhere you like on your WordPress website using Toolset’s Image Slider block which is one of the many blocks you can find in Toolset Blocks.

%%tb-image-alt-text%%
Toolset offers its own Image Slider block.

However, there are scenarios when you don’t want your slider to be static. 

What is a dynamic image slider?

If you are building truly custom websites then you will need to add sliders which offer dynamic content.

Continuing with the travel website example, you might want to add an image slider to each of your Tours posts. The best way to do this is by creating a template for your Tours posts. The problem with adding a static slider to your template is that the images will be the same regardless of the Tours post you are looking at. 

For example, if you create a slider with images of Venice and add it to the template it will look great on the Venice Tours post. But it will look strange when you click on a Tours post about Semuc Champey.

A WordPress slider on the front-end with dynamic content.
The Venice Tours post contains a static image slider with additional images of Venice.
A WordPress slider with static content.
Because the image slider is static it will display the same images of Venice regardless of the Tours post you are on.

There are other problems with adding static sliders. For example, imagine that you add a static slider directly onto each of your Tours posts. What would happen if you wanted to edit them? You would have to individually edit each slider which obviously takes time.

This is why you need a dynamic slider. With a dynamic slider, you create the slider once in your template, add a dynamic source and the slider will appear on each of your posts with the correct images for that post. Now when you want to edit the slider (for example, by adding captions) you can do it once and each image slider will update.

Below you can see the post for Semuc Champey with a dynamic slider. We no longer display images of Venice on this post.

A WordPress slider with dynamic content.
Now that the image slider is dynamic it contains the correct images for each post.

What about sliders with dynamic post content?

Sometimes you need more than just images on your slider. With Toolset you can build sliders that contain all types of dynamic content.

On my travel website, I might want to add a slider on the front-end that not only contains images of my tours but some information about them as well such as the destination, price and a brief description. You can do all of this using Toolset’s View block.

A slider with dynamic post content.
This is my slider with dynamic post content. Each slide contains the correct information related to that tour.

How to create a static slider with Toolset

We can create a static slider in minutes using Toolset. We will use the travel reference site as an example. Remember to check out our video on how to create a static slider for an in-depth tutorial on all of the features I will mention below.

I will add the slider to my homepage here.

A homepage missing a static slider.
I will add my static slider here.

As I mentioned above, you can add a slider by inserting Toolset’s Image Slider block. You can then just insert the images you want and even rearrange the order using Toolset’s drag and drop feature.

Rearrange the image order of a slider.
Rearranging the order of your images is easy. Just drag and drop your images.

As soon as you click Insert gallery your image slider is ready to go. However, there are a few ways you can style it to make your slider stand out even more.

Styling your static slider

On the right-hand sidebar, there are a number of options to style your slider. Under the Display Settings tab you can find four features:

  1. Columns Number: Change the number of images you see at any given time. Below you can see I have set it to two which means you can only see two images.
Columns number for a slider
Simply enter a number to adjust the number of images you see at any given moment.
  1. Crop images: Make sure that your images are the same size by cropping them. Or you can toggle the option off as I did below. Notice how the images are of different (their original) sizes.
Crop your slider's images.
Crop your images to ensure they are all the same size.
  1. Captions: Choose whether or not to display captions at the bottom of each image. You can also enter captions by clicking on the caption area and adding your text.
Add a caption to your sliders.
You can add the captions option and enter the text.
  1. Choose the slider style: Toolset offers three slider styles. 
    1. Image list with a lightbox when the user clicks on the image.
    2. An image list with a larger selected image. The other images will appear below the selected image.
    3. Image list without a lightbox.

I’ve selected the image list with a lightbox. You can see the lightbox when I click on the image on the front-end.

A lightbox for your slider.
This lightbox appears whenever a user clicks on one of the slider’s images on the front-end.

There are further ways to style your image slider. First, if you include captions you can style them in many ways including by changing the font, line spacing, and background color.

Style your caption for your slider
You can style your caption using Toolset’s options without any coding.

In addition to the caption, you can further style the slider itself under the Style Settings tab. You will be able to add a background color, margin/padding, a border, and much more.

Edit the style settings for your static slider.
You can also style the slider itself using the sidebar without coding.

How to design sliders for different screen sizes

Another advantage of using Toolset is that its designs are responsive so you can change its appearance for different screen sizes. For example, a template might look great for a laptop screen but may not fit a screen for mobiles. Check out our lesson on creating responsive designs to find out everything you need to know.

There are two ways you can edit your slider for different screen sizes. You can either click on the different icons at the top of the editor or within the boxes for each of the features. Once you click on an icon the editor will change so you can see how your slider will look for different screen sizes.

Responsive screen sizes for your slider.
There are two ways you can edit your content for different screen sizes.

You can adjust all of the styling options I mentioned above for different screen sizes.

Once you’ve made your edits you can save the page and check out your slider on the front-end. 

The static slider on the front-end.
Here is the static slider on the front-end.

How to create a slider with dynamic content

Now you get to see the true power of Toolset as we create a custom image slider with dynamic content for our Tours posts. We also have a tutorial video on creating sliders with dynamic post content if you want a step by step walkthrough.

To build a slider for the images of my Tours posts I first created a custom post type for my trips called Tours. You can check out our guide to creating custom post types for more on how I did it.

Add a custom post type.
To create your custom post types you simply need to enter the names and you are ready.

When you create a slider with dynamic content you need to consider what will be the source for your images. Generally, that source will be a custom field for images. 

Naturally, a slider needs multiple images. However, custom fields usually only store one piece of information. But with Toolset you can make your custom fields repeating in order to store multiple images which will be displayed on the image slider.

I’ve created a number of custom fields for my Tours post type. One of those is a gallery image field. To make the gallery field repeating I simply had to check the relevant box. 

Make a field repeating.
I simply need to check the box above to make the field repeating.

You can find out all you need to know about custom fields and repeating fields in our guide to creating custom fields.

Once you have created your custom field it is time to add the images to each of the Tours posts. As I create each new Tours post under the Gallery image custom field I simply click the + button to add additional images.

Add additional images to your repeating field.
To add additional images to my repeating I just click the + button and upload them.

We now have the “source” for our slider. Next we just need to add the slider to our template for Tours posts. If you are unsure how to create a template take a look at our video tutorial on how to create templates to display custom posts.

Similar to our static slider we start by inserting the Image Slider block into our template. However, instead of uploading or choosing images to add, we select the dynamic source.

Select a dynamic source for your image slider.
To start adding dynamic content simply click the Dynamic Source button.

You are now able to specify which field will be your source. This is where I select the Gallery image custom field that I’d created beforehand.

Select the correct image custom field. for the image slider.
When you add dynamic content you just need to select from which field you want to draw the images from.

Your slider will now appear displaying the images from your Gallery image custom field.

Dynamic image slider.
The dynamic image slider displays images from the Gallery image custom field.

Here is where you know that the slider is truly displaying dynamic content. Simply use the dropdown at the top of the editor to switch between the Tours posts. You can see each tour post now with different images. These are the images from the Gallery image custom field for each post.

Use the dropdown to switch between posts.
I can use the dropdown at the top of the editor to switch between the posts.

On the right-hand sidebar, you have the same styling options as for a static slider. The only difference is that you can change the source for your images using the dropdown.

Switch between the sliders using the sidebar.
I can switch between the fields that my slider draws from using the sidebar.

Once you’re happy with the template you can save it and check out each of your Tours posts on the front-end.

Dynamic image slider on the front-end.
Here is how my dynamic image slider looks on the front-end.

How to create a slider with dynamic post content using Toolset

While dynamic image sliders will make your website look pretty, sliders with dynamic post content will truly show your visitor how powerful your website is. To get the full guide check out our video on creating sliders with dynamic post content.

Just like with our dynamic image slider (also known as a View slide) you will need a custom post type. I’ll stick with the one I created called Tours and will use the content from its custom fields.

You can create your slider anywhere you like on your website. Once again, I’ll add this one to my homepage.

Unlike the image sliders, to add a slider with dynamic post content I need to insert Toolset’s View block so that I can create a View. A View is what you create in Toolset to load posts from the database and display them in fancy lists – such as a slider. 

%%tb-image-alt-text%%
To create a slider with dynamic post content I need to add the View block.

When you head into the design wizard you have the option to add pagination to your slider which is important as it acts as the page-turner for visitors to switch between the slides.

You also select the loop style. For this View slide, I want to use the Grid style as I want to display three Tours posts at any one time in a grid. However, you can use other styles including the unformatted style depending on the type of slider you want.

Add pagination and adjust the loop style.
In the design wizard you need to add pagination for a slider with dynamic post content and a loop style.

As part of the wizard, you can also choose whichever post type you want to display on your slider. For example, below I selected the Tours post type. 

Choose which content the View will display.
As part of the wizard you need to select which post type you want to display.

Once you finish your wizard you have now created your View. You can now use the View block controls which you can find on the navigation tool on the top left to define how the View works. 

Some of the edits you will need to make on the right sidebar include:

  • Enabling pagination with automatic AJAX transition – to automatically switch been the slides
  • Choosing the number of items you see – I’ve selected to display three of my tours posts at any one time.
  • Removing the spinner – this is unnecessary for a slider

There are also some other edits you can make to your slider:

  • Show each page for (seconds) – decide how long until the slider transitions to the next slide
  • Pause pagination transition – the slider will not transition to the next slide if the mouse is hovering over it
  • Transition effect – choose the type of transition
  • Transition duration – the length of time between each transition
Select the View block and edit it in the right sidebar.
1. Select the View block. 2. Make the necessary edits using the right sidebar.

We can now add Toolset’s Container block which is an incredibly useful block to “host” your other blocks inside so that you can apply the same styling to them.

Add the container block to apply the same styling to fields.
Add the Container block so that you can apply the same styling to your fields.

Once we have the Container block we can start to add our content which we will draw from the custom fields for our Tours.

For example, I add the featured image for each Tour post by including the Image block and making the source dynamic so that the content comes from the Featured Image.

Use the sidebar to select the source for the image block.
I can use the sidebar to select the source for my Image block within the slider.

We can do the same with some of the other custom fields by adding the relevant block, making the block dynamic and selecting the correct source. As an example, below the image, I’ve inserted a regular column and then added the Heading block with dynamic content. I chose the City field as the source.

Select the city field as the source for the heading block.
For my Heading block I select the City field as the source.

I can add further custom fields in this way until my View slider is complete with custom fields.

A View slider with all the custom fields.
I have now added all of the custom fields I wanted to display to the View slider.

Another great trick is that you can filter your posts to display only those that match a certain requirement. For example, below I added a filter to show only those that are promoted tours.

Use the query filter to select only those that are promoted.
I have included a Query Filter to select only those tours which I’ve selected as “Promoted.”

If you want to learn how to get the most out of this useful tool, check out our documentation on filtering views query by custom fields for more information.

Build your slider with Toolset today!

Now that you know how to build both static and dynamic sliders all that is left is to try it out yourself.

Here are the steps to take:

  1. Download Toolset 
  2. Check out one of our Toolset courses to learn all about creating sliders and other features with Toolset
  3. Practice adding your sliders and other features using one of Toolset’s free reference sites.
  4. When you are ready, install and register Toolset on your own website and get started!

 

Comments 2 Responses

    • Hi Carletto,

      Thank you for getting in touch! Let me try and help you with this.

      To understand better what you’re looking for could you explain to me your setup?

      Are you currently using images in your child post which you would like to display as rotating images when you display your parent post? If not, let me know your situation.