Ready to beautify your website with a stunning video gallery? In today's practice, we're going to find out how to do it with Meta Box and Kadence.
This is my example.
Video Version
Before Getting Started
The page is an archive page with a list of videos. Each video is kept in a post of a custom post type.
The information of the video is also the default information from the post, even the short description, author, or date. Just the videos are saved in a custom field.
So, we need the Meta Box core plugin to have a framework that allows creating a custom post type and a custom field for videos. You can download it directly from wordpress.org.
Besides, we need some Meta Box’s extensions for advanced features:
- MB Custom Post Type: to create a custom post type for videos;
- Meta Box Builder: to have a UI on the back end to create a custom field to store the video URL.
You can download and install each extension individually or use the Meta Box AIO which has all the Meta Box extensions.
Finally, I have Kadence with its pro version to have some extra types of blocks to flexibly display the information.
Create a New Post Type
Go to Meta Box > Post Types to create a new post type for the videos.
Since I want to show the author information for each video, go to the Supports tab, and check the Author box to enable the author feature for the posts.
After publishing, you will see a new menu displayed. It's your post type.
Create a Custom Field
Move to Meta Box > Custom Fields > Add New to create a new field group.
In this practice, the related information of the video is the default supported by WordPress. So, I use only one custom field to save the video. Also, instead of uploading the video, I use a URL from another place. However, I won’t use the URL field. The oEmbed field will be the best choice in this case because Kadence can display the video preview directly from the link saved in this field type.
After creating the field, in the Settings tab, choose Location as the Post type, and select Video to apply these fields to it.
Now, you’ll see the created custom field in the post editor.
Pay attention to the Author box. This section is available since we set it to enable the author feature for the Video post type when creating it.
Let's add some information and some videos as well.
Now, let’s move on to the next step.
Create a Query Card for the Video
To get information about each video from posts, you should create a query card first. This is a new feature of the Advanced Query Loop from Kadence. It allows us to define the template for individual posts within the loop.
Go to Kadence Blocks > All Query Cards and create a new one.
After choosing the wanted layout for the card, you will see some default blog posts displayed.
Go to the right sidebar, set the preview as the post type that we created.
The preview will change, but please notice that it’s just changing in the preview, not querying any data.
So now, you can remove some unnecessary blocks, and choose the suitable blocks to get the corresponding information.
First, to get the video preview, choose the Dynamic HTML block to have more options to customize the display of the video preview.
Then, set the HTML Content as Post Custom Field and select the field of the video.
Now, you can see the videos displayed immediately.
For the additional information of the video, we style it into 2 columns like this:
So, add a Columns block, and choose the layout for it.
In the first column, add an Advanced Image block to display the author’s avatar. Instead of selecting any image, just enable dynamic image for this block.
Click on the button as the image below shown, and choose the Author Image from the dropdown list.
After that, you will see the author's avatar appear.
Move to the second column, choose a Section block to cover all the rest information. Next, add a Text Advanced block to get the name of the video stored in the title of the post.
Now, enable dynamic content, and choose the Post Title option.
Next, choose the Author Name block. The name says it all!
For the video’s description, choose the Dynamic HTML block again. Then, set the HTML Content as Post Excerpt.
And the last information is the published date, choose another Dynamic HTML block and connect it to the post date.
That’s all the information in the videos that I want to show.
Now, we can change some parameters in each block to have a better look.
Display the Video Gallery on the Page
It’s time to display the video gallery on the frontend.
Create a Page
First, go to Meta Box > Pages to create a new page as usual.
Add Query
We’ve regulated how the information displays in the Query Card, but haven’t stipulated where it will query from yet. So now, add the Advanced Query Loop block provided by Kadence, and create a new query.
For the layout, I will do it later, so skip choosing any pre-made layout.
There’ll be a place to choose which post type we want to query from on the below screen. Choose the post type that we use for the videos.
And, don’t forget to select the created card for the layout of each video display. Then, this loop will inherit its layout and styling.
Now, the page displays all the videos along with their information already. You can change the layout of the gallery by changing some settings.
You also can use some CSS as well.
Let’s see how they look on the page!
So, we've created the page for the video gallery.
Last Words
After reading our tutorial, you'll be able to effortlessly create your own video gallery page using Meta Box and Kadence. You can walk through this series to see some ways to work with other page builders. Furthermore, you may want to display an attractive video playlist on your sites as well.
Don’t hesitate to share your results with us in the comments. And, follow our channel to see more helpful tutorials!
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page - P7 - Using Meta Box and Kadence
Other case studies you might be interested in
- Create A Dynamic Landing Page in WordPress Using Custom Field
- Create a Filter to Find Hotels by Location
- Create an OTA Website Like Booking.com with Meta Box Plugin - P1: Create a Page to Introduce Hotel Rooms
- Create an OTA Website Like Booking.com with Meta Box Plugin - P2: Create Filters on the Archive Page
- Create an OTA Website Like Booking.com with Meta Box Plugin - P3: Create Filters for Single Hotel Pages
- Create Dynamic Favicon in WordPress using Meta Box plugin
- Create Posts Series in WordPress Using Meta Box
- Display The Latest Products Section - P2 - Using Meta Box and Elementor
- Display The Latest Products Section - P3 - Using Meta Box And Oxygen
- How to Add Custom Fields for WooCommerce - P2 - Using MB Views
- How to Add Custom Fields to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts - Using Custom Fields
- How to Build a Hotel Booking Website Using Meta Box - P1
- How to Build a Hotel Booking Website Using Meta Box - P2 - Booking Page in Backend
- How to Build a Hotel Booking Website Using Meta Box - P4 - Booking Management Page
- How to Build a Hotel Booking Website Using Meta Box – P3 – Booking Page for Customer
- How to Create a Classified Ads Website using Meta Box
- How to Create a Custom 404 Page in WordPress - P1 - Using Meta Box and Elementor
- How to create a FAQs page - P5 - Using Meta Box and Breakdance
- How to Create a Product Page - P2 - Using Meta Box and Oxygen
- How to Create a Product Page - P3 - Using Meta Box and Bricks
- How to Create a Product Page - P4 - Using Meta Box and Elementor
- How to Create a Product Page - P5 - Using Meta Box and Gutenberg
- How to Create a Product Page - P6 -Using Meta Box and Breakdance
- How to Create a Product Page - P7 - Using Meta Box + Kadence
- How to Create a Product Page - P8 - Using Meta Box and Brizy
- How to Create a Product Page - P9 - Using Meta Box and Divi
- How to Create a Product Page using Meta Box Plugin
- How to Create a Reading Progress Bar in WordPress Posts - P1 - Using MB Views
- How to Create a Recipe - P2 - Using Meta Box and Oxygen
- How to Create a Recipe - P3 - Using Meta Box and Elementor
- How to Create a Recipe - P4 - Using Meta Box and Bricks
- How to Create a Recipe - P5 - Using Meta Box and Zion
- How to Create a Recipe - P6 - Using Meta Box and Brizy
- How to Create a Recipe - P7 - Using Meta Box and Breakdance
- How to Create a Recipe - P8 - Using Meta Box and Kadence
- How to Create a Recipe - P9 - Using Meta Box and Divi
- How to Create a Recipe with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- How to Create a Simple Listing - P3 - Using Meta Box and Breakdance
- How to Create a Simple Listing - P4 - Using Meta Box and Elementor
- How to Create a Simple Listing - P5 - Using Meta Box and Kadence
- How to Create a Team Members Page - P1- Using Meta Box and Elementor
- How to Create a Team Members Page - P2 - Using Meta Box and Oxygen
- How to Create a Team Members Page - P3 - Using Meta Box and Bricks
- How to Create a Team Members Page - P4 - Just Meta Box
- How to Create a Team Members Page - P6 - using Meta Box and Breakdance
- How to Create a Team Members Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page - P2 - Using Meta Box + Bricks
- How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance
- How to Create a Video Gallery Page - P4 - Using Meta Box + Elementor
- How to Create a Video Gallery Page - P5 - Using MB Views
- How to Create a Video Gallery Page - P6 - Using Meta Box and Zion
- How to Create a Video Gallery Page - P7 - Using Meta Box and Kadence
- How to Create a Video Gallery Page Using Meta Box + Oxygen
- How to Create ACF Flexible Content Field with Meta Box
- How to Create an Auto-Updated Cheat Sheet in WordPress
- How to Create an FAQs Page - P1 - Using Meta Box and Elementor
- How to create an FAQs page - P2 - Using Meta Box and Oxygen
- How to create an FAQs page - P4 - Using Meta Box and Bricks
- How to Create an FAQs Page - P6 - Using MB Views
- How to Create an FAQs Page - P7 - Using Meta Box and Divi
- How to Create an FAQs Page - P8 - Using Meta Box and Kadence
- How to Create an FAQs Page - P9 - Using MB Blocks
- How to Create an FAQs Page -P3- Using Meta Box
- How to Create Buttons with Dynamic Link using Custom Fields
- How to Create Category Thumbnails & Featured Images Using Custom Fields
- How to Create Download and Preview Buttons - P1 - Using Meta Box and Bricks
- How to Create Download and Preview Buttons - P2 - Using Meta Box and Oxygen
- How to Create Download and Preview Buttons - P3 - Using MB Views
- How to Create Download and Preview Buttons - P4 - Using Meta Box and Kadence
- How to Create Download Buttons in WordPress - Using Custom Fields
- How to Create Dynamic Landing Page in WordPress - P1 - Using Meta Box and Elementor
- How to Create Dynamic Landing Page in WordPress - P2 - Using Meta Box and Bricks
- How to Create Menus for Restaurants - P1 - Using Meta Box and Elementor
- How to Create Menus for Restaurants - P2- Using Meta Box and Bricks
- How to Create Notification Using Custom HTML Field
- How to Create Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- How to Create Reading Time to Your WordPress Posts - Using MB Views
- How to Create Relationships - P1 - Using Meta Box and Oxygen
- How to Create Relationships - P2 - Using Meta Box and Bricks
- How to Create Relationships - P3 - Using MB Views
- How to Create Relationships - P4 - Using Meta Box and Breakdance
- How to Create Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Create Taxonomy Thumbnails & Featured Images - P3 - Using Meta Box and Bricks
- How to Create Taxonomy Thumbnails & Featured Images - P4 - Using MB Views
- How to Create YouTube Video Timestamps on WordPress Website - P1 - Using MB Views
- How to Display a Video Playlist - P1- Using MB Views
- How To Display All Listings On A Map With Meta Box
- How to Display Author Bio in WordPress - P1 - Using Meta Box and Bricks
- How to Display Author Bio in WordPress - P2 - Using MB Views
- How to Display Dynamic Banners in WordPress - P3 - Using MB Views
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P3 - with Elementor
- How to Display Images from Cloneable Fields - P4 - with Bricks
- How to Display Opening Hours for Restaurants - P1 - Using Meta Box + Gutenberg