Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

JetEngine: How to Create a Custom Post Type

Custom Post Type is one of the JetEngine features for organizing the website content. From this tutorial, you will discover what a CPT is, how to create one, and in which way it can be used.

 

Find out how you can create a Custom Post Type with the JetEngine plugin. You will learn how to use all the features, add meta fields, admin columns, and filters.

What is a Custom Post Type?

The Custom Post Type, also called CPT, is a post type different from simple posts. It can have other properties, templates, slug, and archive, etc.

For example, you have a website that is specialized in renting. All the properties should be posted the same way and have the title, picture, and description. If you want to show all those properties in a grid, you should manually add all the information you have already added to the single post pages again.

With JetEngine, you can create a Properties CPT and add the “title,” “picture,” and “description” meta fields to it. The data you place into the meta fields can be further displayed in a grid automatically without re-entering it. Besides that, you can use it not only in the grid but in any fields supporting dynamic tags.

The Custom Post Type posts are gathered and stored in a separate tab of the website’s dashboard.

Creating a Custom Post Type

1 Step — Add a new CPT

Go to the JetEngine > Post Types section on the left-hand menu in the WordPress Dashboard.

Here you’ll see the Custom Post Types List screen, where all your CPTs will be shown after you add them. Click the “Add New” button to create your first CPT.

jetengine post types

2 Step — Configure the CPT settings

Now you should fill in the information that is necessary to indicate the new custom post type.

General settings

Begin with the first available tab to adjust the most basic settings.

post type general settings
  • Post Type Name — the CPT’s title that will be visible in the website’s dashboard;
  • Post Type Slug — a slug that is generated automatically from the name you previously entered. The slug is a post type’s ID that will be used for various purposes. Please note that slug should include non-capitalized letters, numbers, and “-” or “_” characters;
  • ‘Edit post type/meta box’ link — this toggle creates a shortcut from every post editing page of this custom post type to the page you are now. If enabled, a little gear-shaped icon appears in the right top corner of the meta fields block on the post editing page. Once users click on it, they will land on the Custom Post Type editing page.
edit post type link

Labels

As the Custom Post Type is visible in the dashboard, its name will be used for several options. In the Labels block, you can choose how the CPT name will be displayed. 

For example, instead of the “Add New Item” option, you can select the “Add New Property” label. Go through the list of adjustable labels and change them if necessary. However, you can leave these fields blank to use the default values.

post type labels

Advanced settings

Advanced Settings block contains a set of features that systemize the CPT view on the dashboard.

the first part of the post type advanced settings screen
  • Is Public — a toggle that makes CPT visible and accessible in the dashboard and can be seen by admins and users;
  • Exclude From Search — a toggle that disables custom content type visibility for the front-end search tools. Activate it if you want to create a CPT that will be used by the admins only;
  • Publicly Queryable — a toggle that is connected with the Is Public one. If it is enabled, the queries of this CPT can be performed on the front end;
  • Show Admin UI —  if disabled, this toggle will hide the tab to edit the posts of custom type on the dashboard;
  • Show in Admin Menu — a toggle that allows setting the visibility of the CPT more specifically. You can decide whether you want to hide the CPT from the admin menu;
  • Show in Nav Menu — a toggle that enables the CPT display in the nav menu.
the second part of the post type advanced settings screen
  • Show in Rest API — a toggle that lets you hide the CPT from the REST API;
  • Register Query Var — a toggle that registers a query var for this CPT;
  • Rewrite — a toggle that can be disabled if you want to manage the posts of this CPT rewrites. You can also change the Rewrite Slug that by default is similar to the CPT’s slug and choose whether to Rewrite With Front, which means pretending with $front property;
  • Capability Type — a field to define what string will WordPress use to build capabilities of this CPT;
  • Has Archive — a toggle to be enabled if you want the CPT to have archive posts;
the third part of the post type advanced settings screen
  • Hierarchial — a toggle, which enables adding the posts of this CTP into a hierarchy of website pages;
  • Menu Position — define the position in which this CPT’s tab will be shown in the dashboard;
  • Menu Icon — an icon for the CPT’s tab. Each tab of the dashboard has a unique icon;
  • Supports — a drop-down menu that lets you select the additional supporting blocks that will be shown on the CPT post’s editor page.

Meta fields

In the Meta Fields block, you can create necessary meta fields for adding extra content to the CPT. These fields can contain any information you need.

You should make sure to choose the proper meta field type for the custom post (e.g., Mediafield type will add a thumbnail image, you can display the date and a date picker by setting the Date field type, etc.).

To learn more about creating different kinds of meta fields for the CPT, take a look at this tutorial.

For example, let’s create a Textarea meta field.

post type meta fields example first part
  • Label — a name displayed while the post editing;
  • Name/ID — a meta field key that will be stored in the database. This value usually corresponds to the label and should be represented within the existing typing rules. That means it should contain only Latin letters and numbers. Use “-” or “_” characters to make the key more understandable. It may be helpful if the meta field name consists of two or more words;
  • Object type — a drop-down list where you can choose the type of the meta box object;
  • Field type — the menu that represents available options for the field display.
post type meta fields example second part
  • Description — a field with the information shown next to the field and explaining for which purposes it can be used;
  • Field width — meta field width that can be set to organize meta fields in the desired way;
  • Character limit — a default length that can not be exceeded while filling out the field. Leave this field empty if you don’t want to limit the input characters;
  • Default value — information displayed in the field by default. It can be deleted and changed during the post editing;
  • Is Required — a switcher that makes the meta field completing obligatory;
  • Quick edit support — a toggle that adds the corresponding meta field to the Quick Edit section on the CPT page. We will check its work a little further;
  • Conditional Logic — a toggle that makes a meta field visible only under some specific conditions you set.

Admin columns

The Admin Columns block provides an opportunity to add some extra admin columns to the custom post type displayed in the WordPress Dashboard. You can show post terms and date and use a custom callback to add the needed information to admin columns.

For instance, we can create a column that pulls out the meta value for the admin column.

post type admin columns

If you need to display the featured images (thumbnails) in the admin column, you need to set the correct callback.

Select the “Custom Callback” option as the Type, and hit the “Select from existing callbacks” button.

admin column settings for thumbnails

In the pop-up, select the “jet_engine_custom_cb_render_image” callback.

callback for featured image

In the following pop-up, you can change the Size of the thumbnails shown in the column. Don’t edit the Set field since it contains the name of the default WordPress meta field for the post thumbnails. When you finish, press the “Apply” button, and don’t forget to update the post type.

image size

Move to the post type with the newly created admin column. If your posts don’t have thumbnails yet, add some and check how they are displayed.

featured images in admin column

Admin filters

The next tab configures posts sorting in the Custom Post Type admin panel. The fields added at this point will be shown as the select filters.

Applying Admin Filters is essential if you are willing to have many posts within the Custom Post Type.

post type admin filters

When you’ve completed the new custom post type, click the “Add Post Type” button on the right. The new CPT should appear on the left in the Dashboard.

Moreover, you can build taxonomies for the CPT if you haven’t done it while creating Admin Filters. Taxonomies will come in handy for the content organization.

3 Step — Check the created CPT

Next, navigate to the newly created CPT on the Dashboard and click “Add New” to create a post (it can be another label if you’ve set the different one in the Settings block).

Choose the preferable page builder and adjust all the needed settings.

built custom post type

By the way, let’s take a look at the Quick Edit Support feature. We have toggled the corresponding switcher while creating the “Address” meta field.

Hover over the needed post and click on the “Quick Edit” button.

quick edit button

Everything works fine. The “Address” field is right here. You can fill it out without even entering the “Edit” section. 

Don’t forget to push the “Update” button every time you change something while quick editing.

quick edit support overview

Creating the Content

You can start filling up the post with the content. Here you can see all the blocks we have added on the previous stages: the meta fields, comments, featured images, etc. Take into consideration that you’ll have an opportunity to change the post’s view in the page builder later on.

After the post is ready, click the “Publish” button.

Please note that to make it possible to edit the new post type in Elementor, you’d need to enable the editor for this post type. Feel free to read more about how to do it here.

Now you know how to create custom post types using the JetEngine plugin. And if you want to create a custom content type, check out this tutorial