If you don’t want to use any page builder, you can use MB Views from Meta Box to create a video gallery page.
This is an example for the video gallery page created with MB Views:
Video Version
Before Getting Started
The page shows a list of videos with some additional information. Each video’s information will be saved in a single post of a custom post type. In particular, the information about the video such as title, description, and author is the default information of the post. For videos, instead of uploading them to the website which makes the site heavy, I’ll use videos on Youtube then store those links in a custom field and display the videos from them.
Since we need custom post type and custom field, we install Meta Box core plugin to have a framework to create them. It’s free and available on wordpress.org.
For advanced features, we also need some Meta Box extensions as follow:
- MB Custom Post Type: to create a custom post type for videos;
- Meta Box Builder: to have an intuitive UI to create custom fields in the backend;
- MB Views: helps us create the template for the video gallery page.
You can install these extensions individually or use Meta Box AIO to have all of them.
Create a New Custom Post Type
Go to the Meta Box > Post Types > New Post Type to create a new custom post type for videos.
When creating the post type, we have the Supports tab which provides some features to add to your post type. In this case, we’ll display the author’s information on the page, so check the Author box.
After publishing, you will see your new post type in the Admin Dashboard.
Create Custom Fields
Go to Meta Box > Custom Fields > Add New to create a new field group.
In this practice, I just display some basic information of the video such as title, author, content, date supported by WordPress by default. As mentioned, I use only one custom field to save the URL of the videos. We should use the oEmbed field for it. It allows the MB Views to render the video preview from the URL directly.
Then go to the Settings tab, set Location as Post Type, and select Video to apply the created field to it.
After publishing, you will see the created custom field in the post editor.
Since we have checked the Author box when creating the post type in the Supports tab, we have the section to choose the author for the post.
Let’s move on to the next step.
Create the Page
First of all, create a new page for the video gallery. Move to Pages > Add New as usual.
To create the template for this page, go to Views in Meta Box and create a new one.
In the Template tab, just add some code or insert field from the list on the right sidebar to get and display information.
First, add the Post title field to display the page's title.
Next, for the section that displays the video’s information, add this code.
{% set args = { post_type: 'video', posts_per_page: 9 } %} {% set posts = mb.get_posts( args ) %} {% for post in posts %} {% endfor %}
In there:
{% set args = { post_type: 'video', posts_per_page: 9 } %}
: is to declare that we’ll get posts from the post type that has the slug as video with 9 posts per page;mb.get_posts()
: this function is to get posts;{% for post in posts %}
: this loop helps to list the posts.
Then, just add some fields from the list on the right sidebar into the loop to display video’s information.
First, choose the Video Oembed to display the video preview.
There will be two options to output data. Since we want to display the video preview, choose the first one.
To get and display the author’s information including avatar and name, we will use the mb.get_user()
function with the following code:
{% set author = mb.get_user( post.post_author ) %}
Now, to display the video’s information, just insert the corresponding fields.
In the right sidebar, go to the User tab, set Post author, and choose the User avatar field.
Choose the Post title for the video title in the Post tab.
Go back to the User tab, choose the User first name.
Then insert the Post content field.
Finally, choose the Post date.
That’s all the information that we want to display for the video.
Go down to the Settings section of the view, choose the Location as Page and choose the Video Gallery that is the name of the page we have created.
Go to the page on the frontend, you’ll see the video displayed.
Style the Page
To style the page, go back to the edit Template in the Views.
Before styling, we should add some div tags and classes for each information of the video.
Next go to the CSS tab of the view, add some code to style the template.
I uploaded all of these codes on Github, so you can refer to it for more details.
Now, go back to the page on the frontend, you’ll see a new look of the page.
Last Words
With MB Views, it’s a convenient and quick way to create a video gallery page anywhere on your site no matter what theme or builders you are using. Let’s try and enjoy it. If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!
- 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
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 a User List On the Frontend with 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 to Display Banners using Meta Box Plugin
- How to Add Guest Authors and Guest Posts - Using Meta Box
- How to Add Related Posts to WordPress Using Meta Box
- 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 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 using Meta Box Plugin
- 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 with Meta Box Plugin
- How to Create a Simple Listing - P2 - Using Meta Box and Bricks
- 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 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 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 -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 Buttons Using Custom Fields with Meta Box Plugin
- 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 Online Admission Form for School or University
- How to Create Online Reservation Form for Restaurants using Meta Box
- 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 Taxonomy Thumbnails & Featured Images - P2 - Using Meta Box and Oxygen
- How to Display Images from Cloneable Fields - P1 - with Gutenberg
- How to Display Images from Cloneable Fields - P2 - with 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
- How to Display Opening Hours for Restaurants - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P1 - Using Meta Box and Gutenberg
- How to Display Product Variations - P2 - Using Meta Box and Oxygen
- How to Display Product Variations - P3 - Using Meta Box and Bricks
- How to Display The Latest Products - P5 - Using Meta Box and Bricks
- How to Display the Latest Products - P6 - using Meta Box and Breakdance
- How to Display the Latest Products - P7 - Using Meta Box + Kadence
- How to Display the Latest Products Section - P4 - Using Meta Box + Zion
- How to Display the Most Viewed Posts - P1 - using MB Views
- How to Display the Most Viewed Posts - P2 - using Meta Box and Oxygen
- How to Display the Most Viewed Posts - P3 - Using Meta Box and Bricks
- How to Filter Posts by Custom Fields - P2 - using Meta Box and FacetWP
- How to Manually Reorder Posts with Meta Box
- How to Show Featured Restaurants on Homepage - P1 - Meta Box + Elementor + WP Grid Builder
- How to Show Posts With a Specific Criteria - P3 - Using MB Views
- How to Show Posts with Specific Criteria - P1 - Using Meta Box and Bricks
- How to Show Posts with Specific Criteria - P2 - Using Meta Box and Oxygen
- How to Show Posts with Specific Criteria - P4 - Using Meta Box + Breakdance
- How to Show Posts with Specific Criteria - P5 - Using Meta Box and Elementor
- How to Show the Featured Restaurants - P3 - using Meta Box and Oxygen
- How to Show the Featured Restaurants - P4 - Using MB Views
- How to Show the Featured Restaurants - P5 - Using Meta Box and Elementor
- How to Show the Featured Restaurants - P6 - Using Meta Box and Zion
- How to Show the Featured Restaurants Section - P2 - Using Meta Box and Bricks
- How to Use Custom HTML Field to Output Beautiful Texts or Output Custom CSS