Creating custom post types (as well as custom fields) is one of the ways to maximize the power of WordPress as an open source CMS. You can create a custom post type to accommodate a content type that is not available in WordPress by default.
In most WordPress themes, the content of the custom post type is displayed by the default single post template. In other words, your custom post type is considered a regular blog post. If you want to create a certain website type, say a movie database website, you certainly want the content of the custom post type to be displayed in a different layout than blog posts. To accomplish it, you can create a custom template dedicated to displaying the content of your custom post type.
There are two ways to create a custom template for custom type. First, you can do so manually. This method requires PHP knowledge. Also, you need to master HTML and CSS to create a decent template. The second option, you can use a theme builder plugin like Elementor (the pro version), Divi Builder, and Brizy (the pro version). Unlike the first method, the second method requires no coding skills. You can create a custom template for your custom post type using a visual editor.
In this article, we will show you how to create a custom template to display the content of your custom post type using Elementor Pro.
How to Create a Custom Template for Custom Post Type Using Elementor Pro
Elementor is the most popular page builder plugin for WordPress which is released as a freemium plugin. The pro version comes with a theme builder feature in which you can use it to create custom templates for your theme parts, including single post and custom post type.
Before we get started, make sure you have installed the pro version of Elementor, which you can get on its official website. By the way, you can read our previous article to learn how to create a custom post type using CPT UI.
Once you are ready, go to Templates -> Theme Builder on your WordPress dashboard. On the Theme Builder screen, go to the Single Post tab and click the Add New button to create a new template.
Give your template a name and click the CREATE TEMPLATE button to start editing the template.
Elementor offers several premade templates for single post in case you are interested. If you want to create the custom template for scratch, you can simply close the appearing templates library to open the Elementor editor. On the Elementor editor, you can prepare the layout by adding the necessary sections and columns before adding the widgets. If you are new to Elementor, you can read this article to learn how to use it.
Some widgets you can add to your custom template are:
- Post Title
- Post Content
- Featured Image
- Post Info
If you want to add custom fields on your custom template, you can refer to this article to learn more.
Once you are done editing the template, you can click the PUBLISH button on the bottom side of the settings panel.
On the appearing dialog, you will be asked to add a display condition. Simply add one by clicking the ADD CONDITION button. Select a custom post you want to assign the template to and end by clicking the SAVE & CLOSE button.
That’s it. You have successfully created the custom template for your custom post type. For more detailed instructions on how to create a custom template for single post you can refer to this article.