How to Create a Video Gallery Page - P3 - Using Meta Box and Breakdance

In the previous posts of this series, we’ve gone through some ways to create a Video Gallery page using page builders. In today's practice, we're going to find out how to do it with another page builder: Breakdance.

Table of Contents hide

1. Video Version
2. Before Getting Started
3. Create a New Custom Post Type
4. Create Custom Fields
5. Create a New Global Block
6. Create the Page
7. Style the Page
8. Last Words

The example of creating a video gallery page with Meta Box and Breakdance

Video Version

Watch this video on YouTube

Before Getting Started

The page shows a list of videos with additional information. Each video's information will be saved in a single post. In particular, the information about the video is the default information of the post. For videos, instead of uploading them to the website which makes the site heavy, I will use videos on Youtube and store those links in custom fields and display the videos from them.

So, we need Meta Box core plugin to have a framework for creating custom post types and custom fields. It’s free and you can download it directly from wordpress.org.

For the advanced features from Meta Box, we need some of its extensions:

MB Custom Post Types & Custom Taxonomies: to create custom post types;
Meta Box Builder: to have an intuitive UI to create custom fields in the backend;

They’re all in the Meta Box AIO. If you haven’t had it, you can download and install each one individually.

Since this page is built by Breakdance, make sure you have it on your site.

Create a New Custom Post Type

Go to Meta Box > Post Types > Add New.

Create a new custom post type for videos

Since I want to show the author information for each video, I’ll go to the Support tab, and check this box.

In the settings of the post type, choose some features of the Supports tab to add them to the post type.

After publishing, you will see a new Videos menu like this in the Admin Dashboard.

This is a new post type that we created

Create Custom Fields

Go to Meta Box > Custom Fields to create custom fields.

Create new custom fields for videos

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 Breakdance can display the video preview directly from the link saved in this field.

Choose oEmbed fields that allow you to save the link and display it as the video preview on the frontend.

In the Settings tab, choose Location as the Post Type, and select Video to apply the field to it.

In the Settings tab, set the Location as the Video Post Type to apply the created field to this post type.

Then, you will see all the custom fields in the post editor of the Video post type.

In the Post Editor, you will see the created custom field.

Create a New Global Block

With Breakdance, you should create a global block to get and display information from a post first, then use this global block to display them anywhere on your site.

Go to Breakdance > Global Blocks > Add Global Block.

Create a global block to get and display information from a post

Remember to set a post for live preview.

Set a post for a live preview

Add a Div element to cover the block. Then add a Video element inside. You’ll see a preview of a random video display.

Add Div and Video elements to cover the block

Click on the icon Insert Dynamic data, then choose the field in the Meta Box section. The video preview will display.

Choose the field in the Meta Box section

For the other information for the video, add a Column element to separate them into two columns.

Add a Column element to separate other information for the video

In the first column, add the Author element. It will automatically get information about the author from the post.

Add the Author element to automatically get information about the author from the post

You should configure it a little bit to choose which information of the author will be displayed.

Choose informations of the author will be displayed

Add the Post Title for the video title to the second column.

Add the post title for the video title

Add a Text element, there’ll be an icon when you hover it to insert dynamic data. Choose the Author Name field from the Author section.

Add a text element and choose the author name field for the video

Add the Post Content element.

Add the post content element for the video gallery

For the publish date, also add a Text element, then insert data from the Post Date. You can add some text or symbol before or after the date by using the prepend and append settings.

Add some text or symbol to video gallery

That’s all to display a video in the block.

Create the Page

Go to Pages > Add New to create the page, then edit it with Breakdance.

Add a Section element to cover all the content in the body of the page. Then add the Post Title element to display the name of the page.

Add a section element to cover all the content in the body of the page

Next, look for the Post Loop Builder. In the Global Block section, choose the one we’ve just created.

In the global block section, choose the one we’ve just created.

Then move to the Query section, choose Custom, and edit the query. Choose the Post Types as Videos to get data from this post type.

Choose the post types as videos to get data from this post type.

Then your wanted information about the videos will be displayed.

The video gallery on the page before styling

Style the Page

Still in the page editor, change the settings of each element to have the look as your desire. Just customize one by one.

Change the settings of each element to have the look as your desire

Then you will see the new look of the page.

The video gallery page have a new look after styling.

Last Words

We’ve found out how to create a video gallery page using Meta Box and Breakdance. Let’s try it and share the result with us. If you want to suggest any tutorials, feel free to leave a comment and keep track of our blog. Thanks for reading!