Using Advanced Custom Fields and Ele Custom Skin To Create A Video Blog Archive.
In this tutorial, we will learn how to create a video archive template for your website using Elementor Pro, along with Advanced Custom Fields and Elementor Custom Skin.
Finished Video Blog Example
Step One: Create A Post Category In WordPress
First, we need to create a post category for our videos. I am naming this one Music Videos for this tutorial.
Step Two: Create A Custom Field In Advanced Custom Fields
We now need to create a custom field to place our URL for the video. We can accomplish this by creating a simple text field in ACF. I have found to work better than a URL field or others. I am naming this Media URL and placing a default YouTube link in the value area. This is the only field we need to make this tutorial work but you could add more for your needs.
Step Three: Create A New Video Post
We now need to create a new post in this category. I have created the post here with the title, lyrics, and featured image. I placed the URL of my video in the ACF field at the bottom of my post. I set my category to be Music Videos and publish it.
Step Four: Create An Elementor Custom Skin Loop
To create a custom archive in Elementor, we need to use an additional add on. For this tutorial, I will be using Elementor Custom Skin. The download will be at the bottom. We will only be using the free version for this tutorial.
Here is the loop we need to create. It only requires three elements. We add a video widget and in the dynamic settings, we pull the Media URL from the ACF field. We add a post title widget and set it to link to the post URL. We then add a button widget and also set that to link to the post URL as well.
Step Five: Create A New Post Archive In Theme Builder
We now create an Archive Template in Elementor. Select the Archive as the type and name it.
Here we have added a heading widget and set it to show the archive name. We then add a posts widget to our page. From the skin type, select custom and then select our video loop. Set the columns for devices. We also need to query our video category as the term.
Next, we publish our template. In the display conditions, I am setting this to only show if the category is Music Video.
We now have a video post category that has a playable video rather than the standard featured image.
Step Six: Create A New Single Post Template
To display our video post we need to create a custom single template as well. Create a new single post template in our theme builder.
We now create our single post template. Once again I have added the video widget and called the ACF field. I also added the featured image, post title, excerpt, and social linking. For the body, I used a post title widget and the post content widget.
I finally need to set the display conditions for this template. I will choose the Music Video category.
We now have a finished single post for our videos.
Enjoy
We now have a video post blog. You can edit your templates further as needed
To view this in action, visit the Jasmine Cain website.