Saltar navegación

Creating Sliders with Dynamic Post Content en WordPress

Dynamic sliders show content from posts and custom types. With Toolset, you can create sliders for any content type, with any field and with your design.

Duración

You’ll use the View block to create dynamic sliders with Toolset. This way, you have full control over which content to query and the appearance of the sliders. Each slide can contain one or several items, with fields, links and anything else that you need.

As sliders usually feature images, be sure to check out our detailed lesson about displaying images with Toolset.

Steps for Creating Dynamic Sliders

Create a View to display your slider

  1. To start, edit or create a page, post or a template and insert the View block.
  2. In the View-creation wizard, enable pagination and in the Select View Loop Style section, choose the Unformatted (last) option.
  3. In the last step of the wizard, select the post type for which you want to display posts.
  4. Click to finish the wizard and your View is ready.

Display post fields and apply custom styling

  1. Insert a Container block so you can add a background to your slider. For example, you can set the slide’s background to be a dynamic image coming from the post’s featured image.
  2. Use Toolset blocks to add other dynamic fields to your slider, like the post title.

Make your View slide automatically

  1. Click to select the main View block.
  2. In the right sidebar, expand the Pagination section.
  3. Select the Pagination enabled with automatic AJAX transition option.
  4. In the Items Per Page dropdown, select 1. You can also tweak other options like the transition effect and duration.

Change the pagination to dots

  1. Click to select the View’s Pagination block.
  2. In the right sidebar, change pagination controls from numbers to dots.
  3. Additionally, you can expand the Advanced section and center align the pagination controls.

Toolset comes with a big collection of blocks to display dynamic sources (custom fields, WordPress fields, and taxonomies). However, you can also display Dynamic Sources using WordPress core blocks and popular block plugins.

Use the following steps to display a Dynamic Source in any supported block:

  1. Insert or select a block.
  2. In the right sidebar, expand the Dynamic Sources section.
  3. Toggle on the option for any of the supported fields in that block.
  4. Use the dropdowns that appear to select the dynamic source you want this block to display for that field.

Display Dynamic Sources inside all text blocks

Toolset allows you to display Dynamic Sources, like custom fields, inside any text blocks like headings, buttons, and more. This includes WordPress core blocks, Toolset blocks, and popular block plugins.

To display any Dynamic Source inline, insert or select a block with a text input and look for the Inline Fields button. Dropdown menus will appear, allowing you to select a Dynamic Source.

For more information, check out the lesson about displaying Inline Fields.

Filtering the posts that display in the slider

By default, your slider displays all posts belonging to the post type that you selected when creating the View.

However, sliders are mostly used to highlight special, featured content. This is why you will probably want to add a filter so that your slider displays only selected posts.

You can filter a slider’s output by custom fields, taxonomies, standard post fields, post relationships, and more.

Use the following steps to add a filter to your slider:

  1. Click to select the main View block.
  2. In the right sidebar, expand the Query Filter section.
  3. Click Add a filter and in the dialog that appears, select what to filter by.
  4. In the right sidebar, select the options for your filter.

Main Toolset Block Used in this Lesson

Cree listas de entradas personalizadas

Updated
junio 1, 2021