In this post we’re taking a look at creating Custom Post Types using Crocoblock’s JetEngine. Crocoblock used to be Elementor only, and that meant that Custom Post Types and custom fields created using JetEngine could only be used with Elementor, but now Crocoblock themselves added support for Gutenberg and also some third party page builders and Gutenberg block plugins have added support for JetEngine. And that means that Crocoblock JetEngine is no longer Elementor only. Now there are two parts to Custom Post Types. First there’s the creation of the Custom Post Types, custom taxonomies and custom fields. Second, there’s the display of this data on the front end of the website. In this post we’re only looking at the first part. The creation of these dynamic data features and not at the various ways to display them. We’ll look at some of the display options in other posts.
Video Version
Features
When you activate JetEngine, you get a menu item in the admin here. And you’ll see there are a number of sub-menus.
The dashboard page shows you a number of modules or extras that you can enable and use with JetEngine. The is support for a grid gallery, for a slider, for QR code widget, for a calendar, for a profile builder, for map listings, for dynamic visibility, for custom content types, for data stores, for full width block, for dynamic tables, charts, and for a post expiration period.
Skins, this is for import and export of post types.
You can create a short code to output specific fields from Custom Post Types.
And you can create a glossary, which is a custom list of terms. Maybe something like us states or Canadian provinces. Lists that you want to reuse in multiple places on the site. So there are a lot of little extras here. And that’s something to keep in mind when you’re comparing JetEngine with other tools for creating Custom Post Types and custom fields.
Listings. These are your lists of posts are Custom Post Types are archives of different types. They might be something like related posts or recent posts. Anywhere where you use a query. output multiple records.
Post types. This is where we create our Custom Post Types. Now WordPress comes with several post types built in there are posts and pages. Those are built in post types. But media is a post type. And for that matter So our menus. So what is a post type? Post type is a collection of fields, which together makes. a discreet set of content like a post or a page.
Meta boxes are collections of custom fields. As you can see when we create our custom post type with JetEngine, there’s the option to add our custom fields right here on this screen, but there’s also the option to create a box and put your custom fields in it. And you would do that when you will use the same field in more than one place with more than one post type.
Taxonomies. Those are like categories and tags but they’re custom taxonomies that you can create for use with your Custom Post Types.
Relations are an advanced feature of Custom Post Types. And that’s where you want to relate one or more custom post type together.
Option pages. Those are pages inside the WordPress admin.
In query builder. And this is where instead of being stuck with the default WordPress query for say your archive or listing, you can create your own with lots of conditions and customizations. These are the menus of JetEngine.
There’s one more feature that comes with JetEngine. Let’s go take a look at a page real quick. If we look at the list of blocks. I just wanted to point out that JetEngine comes with some blocks for displaying dynamic data. There is a block for fields, for images, for repeater, for our post meta, for links, for taxonomy terms, and a listing grid block for displaying your data in a grid. So these are powerful Gutenberg blocks that also come with JetEngine.
But we’re going to be doing is creating a custom post type. There’s one that I use often in my tutorials and that is called “book.” You can see when I tab down to the slug JetEngine automatically fills that in. Now this is the label which is going to show here. And you can put special characters in there like an apostrophe s and this is the slug that shows in the URL and this needs to be unique And you’ll see their instructions here that it should only contain letters, numbers and a dash or an underscore. Okay So don’t put special fields there This toggle here turns on the option to edit the post type When you’re in the post edit page this toggle. To hide the names of the fields on the post edit screen.
Okay then These are labels You’ll see There’s a long list of them Okay. And. These are the labels that appear on the post creation and edit screens. You can pretty much leave them alone but occasionally you might want to tweak some to customize the wording For example here it says it’s going to say add new item so we could change this to say add new book instead of add new item If we wanted to, I usually leave the labels at the default.
Then there are advanced settings. And if you’ve used a tool like Custom Post Type UI, or Toolset, or Meta Box, or Pods. These advanced settings are pretty much the same as in all of those tools. K Is it public Do you want to hide it from search results? Is it queryable from the front end of the site. Do you want to show it? And the WordPress admin UI. So it’ll create default creation and edit screens. Do you want to have an admin menu item? Do you want to show in the nav menus for the front of the site? Show in the rest API. This is generally good to leave on if you’re going to be using Gutenberg because that’s the way that Gutenberg gets the field information. This is kind of arcane You want to just leave this on for the query. Now the rewrite and rewrite slug in the URL. It’s going to use this slug book If you want it to change that to something else like manuscripts or something then you could work here and change that. And so we’re going to use the post capability type. So you have the regular role permissions just like for posts, admin editor author subscriber. So this is if you want to have an archive list of the records for the custom post type. whether it’s hierarchical, you know pages can have a hierarchy where you can have sub pages, the menu position This is where it shows up here. So I think that 30 is going to set it somewhere around here. And then we can pick an icon. So let’s look for book. Okay And then supports these are the fields that are custom post type will have. So comments if we want comments, I usually like to have revisions case I need to go back track backs Aren’t that important author is if you want to have the option to change the author, you’ll have an author box or you have multiple authors excerpt If you want to have a custom XR. Paige attributes This would be if you set it to be hierarchical then you might want to have the page attributes showing so that you could set the order thumbnail…These are WordPress custom fields. we’re going to be using the JetEngine custom fields. And then post formats, those are things like is it a chat? Is it a quote, you know special post formats which we also don’t need. Okay So those are our advanced settings.
Now we have the option for Meta fields. Custom fields are often called Meta fields or sometimes they’re called Posts Meta, and Crocoblock calls them Meta fields. These are our custom fields. So I’m going to add a couple here. We’ll start with one and we’ll say authors photo. Okay And remember here we don’t want special characters So I’m going to remove the apostrophe in the apostrophe s and just do author’s photo. And then whether we want it to be field accustomed field but you can also make it a container like a tab or a core. or you can make it an end point for rest API which is more for programmers or use with other special tools. So we want it to be a field. And then JetEngine has a number of field types here: text, dated timed date time, text area which is multiple lines. WYSIWYG That is a rich text box. There are a check box, an icon picker, media gallery, radio button, repeater, select you know a drop down, number, color picker, and posts. So we can actually have a field that brings in some other posts. Or HTML. For us this is going to be media. And we can have the ID of the media item, the URL, or an array with ID and URL. But I think we want the URL. And then there’s a description and then. how wide is the field going to be across the page? Let’s say 50%. This is to show and the rest API, this is a little different than the rest API setting above. And so I don’t think we’re going to need this here. And then you can set up conditional logic rules as well for when to show this.
Okay let’s add another field. And we’ll call this one authors. Website. And again I’m going to take out the apostrophe. And this is a field now many custom field plugins have a dedicated field for URLs. JetEngine does not You just use the text field. And we’ll set this to also be 50%. So these two custom fields will show up side by side. We don’t need to limit the number of characters or have a default value. I won’t set it as required. If we enabled this then it would show in the quick edit dialogue. Showing the Rest API and conditional logic and two other options. We’ll leave those So those are our two fields that we’re going to use. Admin columns. If you wanted to show the field in the admin columns. And admin filters This is where you know you have the list of records and sometimes you can filter on the field name and that’s where you would add this. Okay so I’m going to click on add post type. So we have our custom post type called book.
Now let’s go and add a custom taxonomy, and this is very much the same type of process. I’m going to call it Genre. Okay And so we get the slug. And now we can associate this with our Custom Post Type book. Then this is where you can add a link to edit the taxonomy for within the edit page. And here you can hide the field names when you’re on the term edit page. Here we have the labels very much like before and I just go with the defaults. And we have advanced settings. Is it public Is it publicly queryable? Showing the admin UI showing the admin menu. That means it shows like categories and tags. Showing the rest API We want to use that for Gutenberg. If you want a custom query variable, custom rewrite slug, if you want custom capability types, if it’s hierarchical and your description Okay And you can add custom fields to your taxonomies if you want to And that can be a powerful thing. It’s kind of advanced and not use that often but…it’s useful if you need it. Okay so now I’m going to add the taxonomy. Now we have our book Custom Post Type and we have our custom taxonomies genres.
If we go look in the WordPress post editor. See here are typical fields for title for content. For our featured image, but we also have our custom taxonomy and our two custom fields the author’s photo and the author’s website. Let’s fill in the values here for one of the records Okay So this’ll be a boat named the sea queen. And I’m just going to put some dummy text in for the post content. And then for the genre. We’ll call it historical fiction. And then we’ll go find the featured image and it’s this one…And then we’ll choose the author’s photo. Which is this one and then we’ll add a link to the author’s website.
Okay So now I’m going to publish that. And let’s go and view the post on the front end. So here’s the default display for the kittens theme You can see that not only the featured image and the taxonomy the genre don’t show but neither do the custom fields. And that’s the second stage creating the templates to show the Custom Post Type on the front end So we’ll do that in the another post.
Observations and Discussion
So that’s the walkthrough of creating a custom post type using JetEngine. Now for some observations and discussion.
One observation is that the naming labels and options available when creating a custom post type are largely the same whether you’re using JetEngine or Custom Post Type UI, Toolset, Pods or Meta Box. That’s basically because they’re all presenting you with forms corresponding to the core WordPress options.
Still There are ways that they’re different. They may offer more field type options or they may as in the case of JetEngine offer additional extras that leverage the core features and bring additional value. The JetEngine feature modules and advanced query builder are examples of this.
Another way These plugins are different is the extent of support for creating front-end templates for displaying the Custom Post Types and custom fields. On this front, Crocoblock options have been expanding in terms of creating templates:
- Elementor
- You can create templates using Crocoblock JetThemeCore and JetEngine widgets. JetSmartFilters work with Crocoblock and Elementor Pro post widgets.
- Dynamic Content for Elementor now has support for JetEngine custom fields. You can use the template functionality of Dynamic Content for Elementor to create templates fore Custom Post Types.
- Gutenberg
- Crocoblock has added Gutenberg support. So you can now create templates using JetThemeCore, front-end filters using JetSmartFilters, and JetEngine itself adds blocks for working with dynamic data Data in the Gutenberg editor.
- Stackable pro now also supports JetEngine custom fields.
- Other Builders
- Going beyond Elementor and Gutenberg, the Bricks Builder also supports JetEngine Custom Post Types custom taxonomies and custom fields.
So JetEngine used to be Elementor only, but now it has wider support.
