In this article I’m going to explain how to create a Podcast using Elementor Pro so that we can create a dynamic listing page but before that we will need some additional Custom Post Type plugin.
In this article we’re gonna work with Jetengine which will allow us to create the custom post types and custom fields which will be useful to create the whole structure of the Episode Page .
To create an Episode page we probably need to create a custom post type. This post type can have different custom fields and even its own custom category structure.
Custom post types are a great way to show content differently, for example, they can be used to improve aesthetic needs or another example would include specific permalinks structure that you need for your site. Finally additional fields in input text which allow the user more control over how their information appears on the website and it is functional too!
How to Create a Custom Post Type?
We have talked about the importance of WordPress Custom Post Type, let’s start the process of creating one. As we discussed beginning we need to install some additional plugins Custom Post Type, Advanced Custom Fields these two plugins are free & limited features only so we’re going to work with Jetengine.
You can get JetEngine on the official website of Crocoblock. Once you install and activate the plugin, go to your WP Dashboard Admin Menu JetEngine.
Create a New Post Type
To create a new custom post type select Post Types, now you can see the option like below screenshot, add a unique name for your post type. For Eg `Episodes` “Post Type Name” field in our article we gave Episodes next “Post Type Slug” it will automatically generate which you give the post name or you can change the slug whatever you want and click “Add Post Type”.
After successfully creating the post type you may see the “Custom Post Types List” like below.
Create a New Meta Field
WordPress Custom fields are a great way to add additional information that isn’t included in the post or page you’re editing.
You can also create your own fields using the options menu at top right corner of each post or page, which is hidden unless you click on them with three dots Paw icons displayed
Once in edit mode select “Custom Fields” from within that tab for more customization opportunities!
To add a new custom field, you can click the New Meta Field and also set the object type to field type. This is the field which we are going to show in elementor page.
Custom fields are an excellent way to add any additional information you might need about your posts, pages or content types. You can display this meta-data in whatever theme that suits best!
Repeat the same steps mentioned above to add more custom fields according to our needs.
These are the Field types available.
Once you add the custom fields click the Update Post Type. After successfully adding you can see the fields like below to create a new custom post for the Episode.
Create a New Episode (Post)
In WordPress, Create a Post by clicking Add new Episode,
When the new episode editor comes up, the first thing to do is add a title and some podcast episode info. Go ahead and do that first. When that is done, scroll down some until you see the “Podcast Episode Show Notes” section. Enter all the relevant details for this particular podcast episode.
Follow these steps below to embed podcasts on WordPress sites.
1. Get the embed code
Click the“Embed This ONE Episode” button under more option in the bottom right side of the page (or under the podcast logo for sharing the channel)
2. Toggle to “embed” to get embeddable player options.
3. Copy the code
On a separate line create a new block, and search for “Custom HTML.” In that section paste the embed code in there.
Now, when you preview your WordPress post (or page) you’ll see the embedded player with the content!
Customize Episodes (Post) using Elementor Pro Theme Builder
Next we need to create a template in Elementor Pro Theme Builder, in the website default blog Post or custom post we need the same design, for example the Title, Paragraph, Images, Buttons also the category section and other links (if needed).
With the Elementor Pro Single Post Template feature we can set up one design for all the posts, so that we can change all the posts design in one place. We can create this design template with Theme Builder Tab -> Single Post -> Add New.
Enter your template name in our article ”Single Episode”.
Enter your template name and click the Create Template button and edit it with Elementor.
Once you have created a template you will see an elementor editor window. Using JetEngine and Elementor pro widgets which includes, Post Title, Post Content, & JetEngine Dynamic Fields.
These four widgets give you everything you need to design high-quality episode pages for your podcast website without using a single line of code. The Final Preview of Your Very Own Podcast Website using Elementor will look like this.
Wrapping Up
With just a few tools, you can have your podcast website up and running in no time. Using Jet engine and Elementor Pro, a powerful duo that minimises your workflow so you can focus on what matters most for creating engaging content!
To know more about CSS, Angular, Elementor, and other design-related kinds of stuff visit our Blog.