How to Create a Dynamic Slider in WordPress

If you were compiling a list of the website features which will make your WordPress site stand out a slider will be high on the list. But if you truly want an impressive custom website you will need a slider with dynamic content capabilities.

What is Dynamic Content?

Dynamic content is content that changes on a web page depending on data from the website or user behavior.

The opposite of dynamic content is static content. With static content that web page will stay exactly the same regardless of the user or time.

A good example of where you tend to find static content is on landing pages which will usually display the exact same title, description and call to action regardless of who clicks on it.

Below you can see a landing page to download WordPress. Regardless of how you arrive on that page you will see the exact same information because it is static.

However, there are times when static content will not work. For example, if you run a blog you would most likely want the most recent post to appear at the top. If the content was static then your blog would always display the same post at the top. However, if it is dynamic then each time you publish a new post the order will automatically (or dynamically) change.

Below is the WPExplorer blog. Each time WPExplorer posts a new blog posts it automatically appears as the most recent post on the top left.

There are other examples of when you might need dynamic content. If you run a travel website which sells tour packages you will want a custom post type for your tours with each tour displayed on its own post.

Now you could individually design each tour post but that would take time and effort. And what happens if you wanted to change the tour layout? You would have to individually edit each tour so that they have the same structure. Again, you would be creating unnecessary work for yourself.

The best solution is to create a template to display your custom posts. On this template, you can add dynamic content for your post title, images, price and much more. It means that now when you click on each different tour post the content will change. For example, a tour post about Semuc Champey will contain content about Semuc Champey while a tour post about The Valley of the Kings will…well you get the idea.

What Type of Dynamic Sliders are There?

There are two types of dynamic sliders which will enhance your custom website.

1. Dynamic Image Slider

A dynamic image slider is an image slider that you can add once to your template and will display different images from the database depending on which post you click on.

For example, on a gym website, you might have a custom post type for your gyms which will hold a number of gyms posts. On each gym post, you will want to display an image slider with images from that gym. Therefore, the images will be different for each of the gyms posts you click on.

The easiest way to do this is by creating a dynamic image slider. While a static image slider would display the same images whether you clicked on “Downtown Fitness Center” or “Balance Gym”, a dynamic image slider shows whichever images you added to each of those posts on the back-end.

2. Dynamic Post Content Slider

At times sliders will contain more than just images. In fact, a great many of the sliders you might encounter on homepages will hold further information related to the images.

For example, on a gym website you might want to create a slider with three images, each one displaying a different gym. The problem is if you just display the images how would the user know what the gym is called, its membership price and the facilities available? The easiest solution is to add a slider with dynamic post content based on custom fields.

You might be wondering why this content needs to be dynamic? Think of each slide on our slider as a page. As you turn the “page” of each slider you want the content to change to display the information about a different gym.

Of course, if this content was static then it would not change and you would simply display the same background image, post title, call to action etc. But with dynamic content you will ensure each slide displays the information from each gym.

What are the Best Plugins to Create Dynamic Sliders?

There are a number of great slider plugins which ensure you can include both types of dynamic sliders regardless of your coding ability.

1. Toolset

The first plugin is one of the most versatile resources out there for building custom websites, Toolset.

Toolset has created Toolset Blocks, a Gutenberg extension, which specializes in making it easy for WordPress users of all experience levels to display custom content such as sliders but also custom fields, design templates, archives and much more without coding.

Instead of PHP, you can use Toolset’s unique set of blocks which come dynamic content ready.  One of the great advantages of Toolset is its functionality. Besides sliders, you can create a number of other important features such as a search, front-end forms and maps.

2. Slider Revolution

Slider Revolution is an excellent plugin if you want as many options as possible to customize your sliders. One of those options is dynamic sliders.

However, while you are able to build dynamic sliders you cannot create the custom fields from which you might want to draw the content. You will need to choose a theme that includes built-in custom fields, or code them yourself.

Slider Revolution does offer more than 200 templates so you can instantly build websites containing sliders.

3. Smart Slider 3

Smart Slider 3 allows you to create dynamic sliders with content generated from a host of sources including WordPress posts and pages, WooCommerce products and social media channels including Facebook.

With the pro version of Smart Slider 3 you are able to import your predefined slider examples and you can also draw from 20 sources in WordPress.

How to Create a Dynamic Image Slider

Now that you have an idea of what dynamic sliders can add to your website and the best plugins I’ll now show you how to create them. For this example, I will be using Toolset and its Gutenberg blocks.

For a detailed step-by-step video tutorial, you can check out Toolset’s guide to dynamic sliders for templates.

I will use Toolset’s free gyms reference site and will add my dynamic image slider to its gyms post type. Each of my gyms will contain a dynamic image slider displaying its images.

1. Create a Custom Post Type with Custom Fields

Before we add the slider itself we need to add the information that we will display within the slider and also build the structure on which it will appear.

We need to create two pieces of custom content – the custom post type and the custom fields.

Below you can see how you can create a custom post type with Toolset by simply adding in its name.

Once you have your gym post type you next need to add the content. To do this you need to setup the structure of each post by creating custom fields.

For a dynamic image slider, you will need a custom field for images. Of course, the image slider will contain more than one image but custom fields usually only store one piece of data. So how do you add more?

With Toolset, you can create repeating custom fields that store multiple data. In this case, we will be able to store multiple images and display all of them on our dynamic image slider.

In order to make a custom field repeating all you need to do is select the relevant box when creating the field. You can see below how I made my “Gym Photo Gallery” repeating.

As you can see, I already have a number of custom fields for my gyms post including a Rating, Address and Opening Hours.

2. Add Media to Posts

Now that we have our custom field for our slider we need to add the media that we want to display in the form of images. To do this we head to each of our posts and click to add the images, just like you would for a featured image.

Simply click the “+” button to upload images.

These images will now serve as the “source” for the dynamic slider. Meaning that each gym post will display whatever images are added to its “Gym Photo Gallery” on the front-end.

3. Add a Slider

With your custom field ready and content added, you can now use them to create a dynamic slider. Before creating a dynamic slider you will need to have already created a template for your posts.

To start, I insert Toolset’s Image Slider block into the template. Because we have already uploaded our images to the Gym Photo Gallery we can select Dynamic Sources and choose the custom field we want to pull the images from.

Your slider will display the images you upload to the custom field.

You can check whether the slider is truly displaying dynamic content by switching between posts using the dropdown at the top of the editor. Once you select a new post it will load content for that post – including the dynamic image slider.

While the above example uses Toolset, most WordPress sliders with a dynamic content option work in the same way. In most cases you’ll need to create your content first, then select a “dynamic” source when adding your slider to a post, page or template.

How to Create a Slider with Dynamic Post Content

Besides just images you can also add multiple fields to the slider ( including custom fields such as a price, rating, button, excerpt etc). Toolset also offers a full step by step video for creating custom sliders.

1. Create a Custom Post Type with Custom Fields

Just like with a dynamic image slider you need to create a custom post type with custom fields first. I will reuse the gyms post type.

2. Add Dynamic Sources to Slider

However, unlike with the dynamic image slider you will use Toolset’s Views block. This allows you to load posts from the database and display them as lists – including as a slider.

After inserting the View block,use the wizard to set parameters for your slider. For example, below I have added pagination so the user can switch between the slides and I have left the style as unformatted.

You also need to select the post type that will be the source of your content.

You have now created your View. There are a number of edits you can make on the right sidebar for your slider. You first need to select the View block from the Block navigation option on the top left.

With the structure set for the slider you can insert a container block to add content. For example, you can add a background, images, text, prices, reviews – pretty much anything you added a custom field for. When inserting elements simply select Dynamic Sources and choose your custom field accordingly, then customize to suit your needs (changing colors, fonts, placement, etc).

3. Use your Slider

We can now save the slider and check it out on the front-end. Based on what you’ve added you should see a stunning dynamic content slider.

Just like with dynamic image sliders, when it comes to dynamic content sliders most WordPress sliders include similar options. Toolset offers a dynamic content source selection box, Slider Revolution includes built-in dynamic content modules, etc. For the most part you will need to insert the content module of your choice to add dynamic content to your sliders.

Start Building Your Dynamic Sliders Today!

Now that you have seen how easy it is for WordPress users of all experience to build sliders it is time to give it a go. Choose your slider plugin and get to work!