From this tutorial, you will learn how to create a WordPress Single Post page with the JetThemeCore plugin that provides theme builder functionality.
Before you start, check the tutorial requirements:
- Elementor (Free version) or Block editor installed and activated
- JetThemeCore installed and activated
- JetEngine plugin installed and activated
When you use a theme for your website, it usually comes with a default post template. It consists of various elements, including a title, content block, featured image, metadata, comments, and more.
Whenever you publish a new post, it automatically has the layout and design configured in the theme’s template.
Create Single Post Page Template in Elementor
Let’s explore how to build a single post page template with Elementor. Note that you can repeat the same process using the Block Editor, as the building process is similar to the one described.
Things to know
The “CPT Single,” “CPT Archive,” and “CPT Taxonomy” conditions are labeled as legacy. If page templates with such conditions are present on your website, click on the “Convert Now” button, and templates will be rearranged in the template hierarchy tree.
Navigate to WordPress Dashboard > Crocoblock > Theme Builder and then press the “Create new page template” button.
In the Create page template pop-up, click “+ Add Condition” to set the visibility conditions.
Apply the following visibility conditions:
- Set Dropdown 1 to “Include”;
- Set Dropdown 2 to “Singular”;
- In Dropdown 3, select the custom post type — in this case, “Tour”;
- In the “Select” field type “All”.
When done, click on the “Create” button.
Then change the title (set by default) by clicking on it, and the text you enter will be automatically saved.
Now we need to apply the theme’s header, body, and footer to this template.
Click on the “+ Override theme header” and select the “Add from library” (or “Create template”) option. In the Template Library pop-up, select a corresponding header.
Click on the “+ Use” button to apply the relevant heading template. Repeat the same flow to apply the footer template.
Now let’s create the theme body for our template. Click on the “+ Override theme body” and select the “Create template” option to trigger the Create a template pop-up.
In the pop-up, select “Elementor” in the Template content type field, and type the template name in the Template name field. Click the “Create” button when done. Right after that, you’ll get a success message that the template was created.
Click on the “Go to editor” button to be redirected to Elementor.
As the Elementor editor opens, you’ll be able to create the post template and style it according to your needs by using any widget you find appropriate. You can use JetEngine widgets to display dynamic content, such as meta fields or repeaters, on the Single Post page.
Please note that you can display the default post data, such as post title and content, using the Dynamic Field widget.
Next, hit the “Publish” button to save the changes and return to WordPress Dashboard > Crocoblock > Theme Builder.
Finally, we can view the results by opening the custom post on the website.
That’s it; the single page is displayed right as we have built it in the editor.
Create a Single Post Page Template in the Blocks Editor
Similar steps can be followed to create a WordPress single page using the Block Editor, except for Elementor.
For the Block Editor, most steps are basically the same, so feel free to repeat the steps from the first part of this tutorial up to the Create a template pop-up.
In the pop-up, select “Block Editor” in the Template content type field, and type the template name in the Template name field.
Click the “Create” button when done.
Right after that, you’ll get a success message that the template was created.
Click on the “Go to editor” button to be redirected to Elementor.
When you open the Elementor editor, you can create a post template and customize its style with any widgets you find suitable. Utilize JetEngine widgets to showcase dynamic content, like meta fields or repeaters, on the Single Post page.
Things to know
Note that the preview is unavailable if you work with the Block Editor. Some of the blocks are displayed only on the front end.
Click the “Save” button to save your changes.
Go to the front end to view the result. Ultimately, all the blocks pull the dynamic data from the opened post, so the result is achieved.
Build a Single Page Template
Go to WordPress Dashboard > Crocoblock > Theme Builder. Here, all the page templates you create for the WordPress website are kept.
Hit the “Create new page template” button to begin.
Now you can see the newly opened conditions editing window. Press the “+ Add Condition” button to set the first condition or skip it by pressing the “Create” button. Don’t worry; you will have the chance to work on conditions later.
We need to set the following options to display the template directly on the required single page. So, primarily pick the “Include” option, then select “Entire” and choose what the single template is for.
In the covered case, we choose the “CPT” option and specify it in the proceeding selector.
Keep in mind that you can set multiple conditions. To do so, click the “+ Add Condition” button every time you need to set a new one. Once everything is ready, push the “Create” button.
Now you can see the empty page template and notice that the set conditions are displayed here.
You can also change the title set by default by pressing on it. The text you type in will be automatically saved.
Creating a header template
Let’s look at how to do that with the example of the header. Push the “Override theme header” button, and you’ll see two more clickable options, “Create template” and “Add from library.”
If you press the first button, the new pop-up opens. Here, specify the Template content type by selecting between the “Block Editor” and “Elementor” page builder.
In addition, there is one more optional Template name field. The template will obtain the automatically generated title if you don’t complete it.
After filling in the mentioned fields, mind clicking the “Create” button to proceed to the editor.
Now that the template is created, you can decide whether to edit it later or go to the editor. This time, let’s press the “Go to editor” button.
Now, depending on the chosen Template content type, you will be redirected to the chosen editor. Add the desired blocks if you’re working with the Block Editor, and then press the “Save” button when you’re ready.
Or, once you have built a template with Elementor, drag and drop the needed widgets to create the template structure.
Don’t forget to press the “Publish” button to make the header live.
Let’s return to the “Add header” and its additional buttons. This time, we remove the header and hit the “Add from library” button.
If you have already built headers before, they will all be displayed in the Template Library window. Decide what header you want to use and press one of the suggested buttons, “Edit” if you’re going to make some changes to the item, or “+ Use” to leave the template as it is.
In the first case, the editor opens. Here you can modify the picked template. Just keep in mind to press the “Publish” button after inserting the needed elements.
Or, once the “Use” button is pressed, you can observe that the item is now listed as the header.
You can hide the element by hitting the eye-shaped button, “Edit content,” or “Remove” the added item.
The “Remove” button doesn’t delete the item once pressed. If you want to delete the template, go to your WordPress Dashboard > Crocoblock > Theme Templates and find the template you want to delete. Then, click the “Trash” button that appears when you hover over it.
As we have added the header, the same procedure can be applied to add the body and footer.
One more option we need to pay attention to is the “Import page template” button. With its help, you can import the .json file with the page template exported from another WordPress website.
Keep in mind that all the templates can be created with the help of different editors. Look below to see the example.
That’s it; you can check the single page on the front end. The page template will be shown there, with its header, body, and footer defined in the Theme Builder earlier.
That’s all one needs to know to create and customize the single post template using the JetThemeCore plugin on a WordPress website.
