Help Center

How to Create a WordPress Single Post Page Template

How to Create a WordPress Single Post Page Template

From this tutorial, you will learn how to create a WordPress Single Post page with the JetThemeCore plugin that provides theme builder functionality and hundreds of templates

Before you start, check the tutorial requirements:

  • Elementor (Free version) or Block editor (Gutenberg)

  • JetThemeCore installed and activated

  • JetEngine plugin installed and activated

When you use a theme for the website, it already has a post template by default. It consists of different elements: a title, the content block, a featured image, metadata, comments, etc.

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. Mind that you can repeat the same using Block Editor as the building process will be similar to the described one.

Navigate to WordPress Dashboard > Crocoblock > Theme Templates and press the “Add New” button.

crocoblock theme templates

In a pop-up window that asks you to select the Template Type, the “Single” option should be picked. Once done, choose “Elementor” in the Template Content Type drop-down list. Besides, you can enter the Template Name (e.g., Single Page). Or leave the field empty for it to inherit the automatically generated title.

Then click the “Create Template” button to proceed to the editor.

create a template popup

As Elementor editor opens, you’ll be able to create the post template and style it according to your needs using any widget you consider suitable. You can use the JetEngine widgets for displaying dynamic content, like meta fields or repeaters for 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.

single page in elementor

Next, hit the “Update” button to save the changes and return to WordPress Dashboard > Crocoblock > Theme Templates.

We need to set the conditions, so click the “Edit Conditions” button next to the desired single item in the Instances tab.

single page built with elementor edit conditions button

The opened pop-up includes the “Add Condition” button. Push it to activate drop-down menus with further customizations.

add condition button

Among all the presented alternatives, select the “Include” option in the primary selector, then choose the “Single” and “CPT” options to specify the CPT in the last menu.

Mind pressing the “Save Conditions” button to save the selected options.

template visibility conditions

Finally, feel free to view the results by opening the custom post on the website.

single page made with elementor

That’s it; the single page is displayed right as we have built it in the editor.

Create Single Post Page Template in WordPress Editor

Except for Elementor, similar steps can be taken to create a WordPress single page with the help of Block Editor.

Initially, proceed to the WordPress Dashboard > Crocoblock > Theme Templates. There is the “Add New” button, which you should click to open the pop-up with primary customization fields.

crocoblock theme templates

Select the “Single” option in the Template Type field, and define “Block Editor” as the Template Content Type. Additionally, you can complete the Template Name field or skip it as it is not obligatory.

Push the “Create Template” button to open the template editor.

create a template popup

Now you can add the desired blocks to the template. Mind that not all blocks correspond to the widgets available in Elementor. However, the ones presented with the JetEngine plugin also remain in the Block Editor.

Things to know

Pay attention to the fact that the preview is unavailable if you work with the Gutenberg Block Editor. Some of the blocks are displayed only on the front end.

Don’t forget to hit the “Update” button to save the desired changes.

single page in gutenberg

The work isn’t done yet. Now we need to set the template visibility conditions. Return to WordPress Dashboard > Crocoblock > Theme Templates and press the “Edit Conditions” button.

single page built with gutenberg edit conditions button

Hit the “Add Condition” button in the appeared pop-up to define the needed conditions.

add condition button

The first drop-down should be set as “Included,” then proceed to the second one, where the “Single” option should be selected. Once you pick the “CPT” option in the last selector, one more menu should appear to specify the CPT.

Push the “Save Conditions” button after selecting all the required options.

template visibility conditions

Head to the front end to see the result. Ultimately, all the blocks pull the dynamic data from the opened post, so the result is achieved.

single page made with gutenberg

Build a Structured Single Page Template

However, there is one more way to create an even more independent single page with the help of the Theme Builder feature, available with the JetThemeCore plugin. 

So, head 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.

create new page template button in theme builder

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 an opportunity to work on conditions later.

add condition button in the popup

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 “Single” and choose what is the single template for.

singular page conditions options

In the covered case, we choose the “CPT” option and specify it in the proceeding selector. 

Mind that you can set several conditions. To do so, click the “Add Condition” button every time you need to set the new one. Once everything is ready, push the “Create” button.

condition with specified cpt

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 straight on it. The text you type in will be automatically saved.

empty page template

Or, if you have skipped the conditions editing, the page template will stay unassigned. You can change that by clicking on the three dots shaped button and hitting the “Edit Conditions” button.

unassigned template

And there you go; the editing window has reappeared. Here you can add new conditions, delete them, or edit the existing ones. Don’t forget to press the “Save” button every time before you close the window by clicking on the cross-shaped button.

edit template conditions popup

It’s time to set the page structure. As you see, you can add the header, body, and footer by hitting the samely-named buttons.

Let’s look at how to do that on the example of the header. Push the “Add Header” button, and you’ll see two more clickable options, “Create template” and “Add from library.”

add header options

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.

create a template popup

Now the template is created, and you can determine whether you want to edit it later or go to the editor. This time let’s press the “Go to editor” button.

template created window

Now, depending on the chosen Template content type, you will be redirected to the picked editor. Add the desired blocks in case you are working with the Block Editor, and press the “Update” button whenever ready.

header in gutenberg

Or, once building a template with Elementor, drag and drop the needed widgets to create the template structure. Don’t forget to press the “Update” button to make the header live.

header in elementor

Let’s return to the “Add header” and its additional buttons. This time we remove the header and hit the “Add from library” button.

add header options

If you already have built headers before, they all will be displayed in the appeared Template Library window. Decide what header you want to use and press one of the suggested buttons, “Edit” if you want to make some changes to the item, or “Use” to leave the template as it is.

template library

In the first case, the editor opens. Here you can modify the picked template. Just keep in mind to press the “Update” button after inserting the needed elements. For instance, that’s what it looks like in Elementor.

header update

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.

header edit content button
Things to know

The “Remove” button doesn’t delete the item once pressed. If you want to delete the template at all, head to WordPress Dashboard > Crocoblock > Theme Templates and find the required template there. Click the “Delete” button that appears on hover.

trash button

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. Its name speaks for itself; with its help, you can import the .json file with the page template exported from the other WordPress website.

Mind that all of the templates can be created with the help of different editors. Look below to see the example.

page template structure

That’s it; you can check the single page on the front end. The page template is now shown here, with its header, body, and footer defined by you in the Theme Builder earlier.

single page template

Now you know how to create and customize the single post template using the JetThemeCore plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.