Custom Meta Box Thumbnail Slider in WordPress

This Pro tutorial provides the steps to set up an image and YouTube video thumbnail slider in WordPress using Splide and Meta Box.

The site owner/editor will be able to select/add any number of images and YouTube videos (URLs) and these will appear as individual slides in the sliders.

We are going to create a MB field group that has these fields:

Photo or Video? - Group|_Pick one - Button Group (Photo and Video buttons)|_Photo - Single Image (appears when Photo button is clicked)|_Video - Group (appears when Video button is clicked)|___URL - URL|___Thumbnail Image - Single Image

We are also adding a field for video thumbnail which will be output if set, otherwise, the video's thumbnail will be fetched and shown.

While the steps below are for Bricks, this tutorial can be implemented with a few changes in any WP site.

Step 1

Install and activate Meta Box and its AIO extensions.

If you would like to follow along, create a Page called "Composite Meta Box Thumbnail Slider" and import this (mirror) field group.

If you would like to create the fields yourself, add a new field group named say, "Thumbnail Slider" and refer to the above video. Attach the field group to your desired location. In this example, it is a static Page. Set a Field ID prefix so the field IDs can be kept simple.

Step 2

Edit your Page and populate the fields.

Step 3

Set/edit titles for your images either in the Page edit screen or in the Media Library since we are going to show them overlayed near the bottom on the image slides.

Step 4

In Bricks' Settings, check "Generate custom image sizes" or alternatively add the following in child theme's functions.php or a code snippets plugin:

Regenerate thumbnails.

Edit your Page with Bricks.

Add a Section and inside the Section's Container, a Code element.

Set max width to 1200px and left and right margins to auto to center it horizontally.

Paste this code in: