Working with Custom Post Types
This section contains information on how to add new custom post type and create a template for the custom post type according to your project’s needs with Elementor live page builder.
From this video you can learn more about creating custom post types with JetEngine.
Adding New Custom Post Type
Open WordPress Dashboard and locate JetEngine tab on the left. Navigate to JetEngine > Post Types in order to access the list of custom post types already existing on your site. In the case there are none, the list will be empty.
Click Add New button in order to create a new custom post type. You’ll be redirected to Add New Post Type page where you’ll have to specify the general information about the new custom post type you’ll be adding.
Slug - here you need to type in the slug that will be shown in the browser’s address bar when one opens the archive of the custom posts. Please, pay attention, that the slug shouldn’t contain any spaces, you have to use only lowercase letters, numbers or hyphens.
Name - fill in the name to apply for the post type. It will be shown in the Dashboard as the title of the Custom Post Type.
In this block you’ll be able to customize the label names for the options available for the new custom post type. You’ll be able to set your own labels instead of the default ones. Click Edit button to start editing the labels.
Post type singular name - here you can customize the singular post type name for the newly created post type (e.g., Service, Team member, Portfolio Item, etc.)
Admin menu text - here you can change the way the custom post type title would be displayed on the Dashboard (e.g., Services, Projects, Portfolio).
Add New on Toolbar - this label defines how the Add New option will be displayed on Toolbar.
Add New - this label will be displayed as the title for the option that indicates adding new custom post.
New Item - here you can define the label that is shown on the page where you can add and edit the new post’s content.
Edit Item - here you can define the label that is shown on the page where you can edit the new post’s content.
View Item - here you can change the label that will be shown instead of the default View Item.
All Items - here you can change the label that will be shown instead of the default All Items.
Search for Items - here you can change the label that will be shown instead of the default Search for Items located on the page where all the items are listed.
Parent Item - here you can apply the custom label indicating that the item is one of the main ones.
Not Found in Trash - this text will be shown if the item won’t be found in Trash.
Override the "Featured Image" label - here you can set the text to be shown instead of the Featured Image label text. Please, note, that you’ll also be able to override all the item labels related to the featured image.
The post type archive label used in nav menus - here you can set the custom label to apply for the custom post type archive.
Override the "Insert into post" page label - here you can set your own label to use instead of the default Insert into post.
Overrides the "Uploaded to this post" - here you can set your own label to use instead of the default Uploaded to this post.
Here you can change the key settings for the new custom post that you’re creating. Use the controls to change the settings according to your needs.
Is Public - here you can make the custom posts for this post type visible to all website visitors.
Publicly Queryable - enable this option to make the post seen on frontend and allow it for being queried (if the option is inactive you won’t be able to view the post).
Show Admin UI - enable this option to be able to access this post type from Dashboard top panel on frontend.
Show in Nav Menu - enable this option to able to access this post type from Dashboard on backend.
Show in Rest API (allow Gutenberg Editor) - enable this option to use Gutenberg editor for your custom post type.
Register Query Var - enable this option to be able to query the custom posts using different criterias and using one link.
Rewrite - enable this option in the case you want to be able to rewrite the custom post.
Rewrite Slug - here you can apply your custom slug for this post type.
Capability Type - here you can set the type of capability assigned to this custom post type (post, page, etc.)
Has Archive - enable this option in order to be able to showcase the posts of this type in an archive.
Hierarchical - in the case you want to be able to create subitems, just enable this option.
Menu Position - specify the position of the menu from 10 to 100 to change the location of the custom post type block on the Dashboard.
Menu Icon - click the Icon Picker to select one of the dashicons and apply it to the custom post type (it will mark it on the Dashboard).
Supports - in this block you can specify what blocks will be supported by the custom post type and will be shown on default editing page. These are the default blocks that are available for ordinary WordPress posts.
You can enable the following blocks:
- Title - allows to input the custom post title;
- Editor - adds the default post text editor;
- Comments - adds Comments block, where you can allow comments, trackbacks and pingtracks for the post;
- Revisions - adds the Revisions block for the custom post;
- Trackbacks - adds the field where you can specify the trackback link.
- Author - add this block to be able to select an author of the custom post.
- Excerpt - adds the field where you can type in the custom excerpt to be shown for this post.
- Page Attributes - here you can assign the page/post as the parent one or as a child one to the existing post or page.
- Thumbnail - add this block to be able to add the thumbnail image for the post.
- Custom Fields - add this block in order to be able to add the custom field for this post or page. As a result you’ll be able to add your own custom fields and specify values for them.
- Post Formats - adds Post Format blok where you’ll be able to select the necessary post format (standard, gallery, image, etc).
In this block you’ll be able to create additional meta fields to show and fill in for the custom post type.
To create a new meta field click + New Meta Field option.
In the newly opened block input these kinds of information:
- Title - here you should type in the title that will be shown for the meta field;
- Name / ID - here you have to provide an ID for the meta field that will be recognized with Elementor widgets when you select the needed meta field to display;
- Type - here you have to specify the type of content that will be available for adding with this meta field.
There are such kinds of possible content available for the meta field:
- Text - will perfectly fit if you want to add an extra field with custom text to the post types.
- Date - will help display the date set for the post as a meta field. You can also save the date as a timestamp to allow to query posts by it.
- Time - allows to add the time marker for the post.
- Datetime - provides the convenient way to add time and date to the post. You can also save it as a timestamp.
- Textarea - use this content type to add the text area to the custom posts.
- WYSIWYG - use this content type to add the basic editor in the custom field.
- Switcher - allows displaying switcher for the custom posts.
- Checkbox - adds the checkboxes for the custom posts.
- Iconpicker - the tool provides ability to select the icons for displaying them in the posts.
- Media - will help add and display the images for the posts.
- Gallery - will help add and display the gallery of multiple images for the posts.
- Radio - allows to add the radio options for choosing when creating the post.
- Select - use this content type to add dropdown selector for the post. In case you enable Allow t oselect multiple values option the user you'll be able to select several options at once. This value can be also shown using the proper callback for the Dynamic Field.
- Colorpicker - will add a colorpicker tool for the post.
- Repeater - will help add the repeating content types for every post of the given type.
After everything is set click Add Post Type button to save the changes.
In this block you’ll be able to create additional admin columns to show for the custom post type.
To create a new admin column click + New Column option.
In the newly opened block input these kinds of information:
- Title - here you should type in the title that will be shown for the admin column;
- Type - here you have to specify the type of content that will be available for adding to this admin column;
- Value from meta field - here you have to insert the meta field ID, from which the value to pull;
- Taxonomy - here you have to insert the custom taxonomy ID, from which the content to pull;
- Callback function name - here you have to insert the name of the callback function;
- Column order - here you have to define the order of the admin column;
- Value prefix - here you can add the prefix to the values displayed in the admin column;
- Value suffix - here you add the suffix to the values displayed in the admin column.
There are such kinds of possible content available for the admin column:
- Meta Value - will perfectly fit if you want to display the meta field values in the admin column. To do that you need to insert the meta field ID in the corresponding field;
- Posts Terms - will help display the terms of the current post in the admin column. To do that you need to inser the custom taxonomy ID in the correponding field;
- Custom Callback - will allow to add custom callback to display needed information. Note: this type is recommended for advanced users skilled in PHP. You need to add this code in fuction.php file of your theme.
After everything is set click Update Post Type button to save the changes.
Creating Custom Post Type Template
From this block you’ll learn how to create a template for custom post type using Elementor and special widgets to display dynamic content.
- First, let’s navigate to JetEngine > Listings in WordPress Dashboard. Here you’ll see Listing Items block with all the listings that were already created.
- Click Add New button to create a new listing.
- A Listing Setup Item block will appear. Here you’ll have to select:
- Listing source - here you can choose, if you want to create a listing template for the custom post type or for the term (in other words, the custom taxonomy). In order to create a template for the custom post type let’s select Posts listing source.
- From post type - here you need to specify the post type for which you need to set the template. In our case, it would be Services (just select the title of the custom post type you’ve created).
- Listing Item Name - here you can input the title for the new listing template.
- Click Create Listing Item to proceed with creating a new template for custom post type.
- When Elementor editor opens locate Listing Elements block on the left in the sidebar where all the widgets are usually located. Here you’ll see the set of the specific widgets made for displaying dynamic content.
Just drag and drop them to add the dynamic meta fields content and post terms/data, repeaters, dynamic images, links, meta information, terms, etc.
Please, note, that the fields will display dynamic content already added to the posts or taxonomies, so you’ll have to add it before displaying it with the dynamic widgets.
- Another important thing is that while working with dynamic content widgets you’ll see the content that was added to the latest post / taxonomy type displayed in Elementor. However, the same style settings, layouts and widgets will be applied to all the posts from the selected custom type, or taxonomies.
- In the case the field remains empty (the information is missing for one of the fields in one of the posts), just disable it from being displayed using Hide if value is empty option.
In the case you want to access Listing Item Settings, just click Settings in the bottom left corner. The settings block that allows applying changes in Listing item settings will open.
Here you can change the title and the status for the listing template you’re currently editing.
- Listing Source - here you can change the source of the listing from which the data will be pulled (posts or terms).
- From post type / taxonomy - here you can select for which post type of taxonomy you’ll apply this listing template.
- Preview Width - to make the width of the listing wider or narrower just use the control to set its width in px.