Anastasiia Mykytiuk
Updated on
Product Updates

JetEngine. Start Working with Dynamic Content While Using Elementor

Creating custom post types and custom taxonomies without direct working with PHP and CSS has been one of the most important trends for a while, right along with page builders.
So many people all around the world prefer an intuitive approach to creating content and building websites.

And what would you say if you could combine both trends in a single powerful product, that will allow creating custom post types, custom taxonomies, and would provide the means to build templates for post types and taxonomies with Elementor page builder? Well, this product is already included in Crocoblock subscription, and it is called JetEngine plugin!

What is JetEngine?

Speaking of JetEngine plugin, it’s easy to underestimate it, because its functionality seems to be more on the backend, then on frontend (at least, this can be the first impression, however, it’s not true).
Most people even don’t know what the custom posts and taxonomies are needed for. They work with pages and posts only, and they are quite confident at it.

If you’re not familiar with JetEngine yet, but want to get to know with it right now, we can recommend taking a look at awesome video tutorial from our partner WPTuts. Here you go!

But what about adding services, team members, portfolios, or projects? You might need to create a custom post type to add projects, and it would also be great to have several categories or tags around to be able to query the projects by different criteria. Sometimes, you’ll need even more than a category and a tag – and this is when you will be looking for custom taxonomies.

Even More Functionality for Your Projects

  • With JetEngine you’ll be able to create custom post types with all the needed meta fields for all kinds of content, from text areas and media to icon pickers, and set repeaters for the meta fields.
  • The plugin also allows creating custom taxonomy type to add for the existing posts and pages as well as for custom post types.
  • Another part of the functionality provided by JetEngine is the ability to create listing templates for the custom post types or taxonomies with Elementor and the set of special widgets for displaying dynamic content.
  • After the template is created, its style will be applied to every post of the given type, which is very convenient, as you won’t have to duplicate a template with the same settings for every page or post.
  • Right after, you’ll be able to display the existing custom posts or the terms from taxonomies using Elementor and Listing Grid widget in the listing or grid layouts.

Let’s look a little closer at JetEngine to get a feel of how this plugin works.

Creating a Custom Post Type

Let’s start with creating a new custom post type. E.g., we might need to add Services custom post type in order to showcase the services provided by the enterprise.

    1. On the left of the Dashboard, you’ll see JetEngine tab. Just hover on it and click Post Types submenu item. You’ll see Custom Post Types list, which will be empty in the case you haven’t created any custom posts yet. Click Add New button to add a new post type.
    2. You’ll proceed to the page where you can set the most important details and provide information for the custom post type you’re creating.
    3. In General Information block you’ll be able to add the name and the slug for the post type (e.g., Services / services). Just a bit below you’ll see Labels block, where you can change the labels to use for the custom post type (e.g., replace Add New text by Add New Service, etc).
    4. In the Settings block you’ll have access to the most important settings of the new custom post type: if the post would be public, if it would be accessible from the Dashboard, if it is to have an archive, etc).
    5. The Supports block is the most important one, here you can select which default fields usually available for the posts will be available for this custom post type (e.g., you might want to add Thumbnail to add an image for the service, and also add Excerpt, Title and Editor to have the fields where you can add content).
    6. In Meta Fields block you’ll be allowed to add new meta fields in addition to the default fields already selected in Supports block. To add a new meta field you’ll have to fill in its title, ID and then select its type (text, date, icon picker, switcher, selector, etc.) You’ll also have an opportunity to use a repeater – to add a set of meta fields for this custom post type.
    7. When the changes are saved you’ll see the new post type in your Dashboard and will be able to add new posts for this custom post type using all the default and meta fields available for it.

Creating a Custom Taxonomy

    1. To create a custom taxonomy you’ll need to navigate to JetEngine > Taxonomies block in Dashboard. Here you’ll see the Custom Taxonomies List, which should also be empty in the case you haven’t created any taxonomies yet. To add a new taxonomy you need to click Add New button in the top left. The General, Settings and Labels blocks are pretty much the same as the ones available for Custom Posts, but still, there are some essential differences. For one, in General Information block along with the Title and Slug you’ll also have to select the post types to which you want to add this custom taxonomy type (e.g., default posts, or the newly created Services custom post type). I’ll name my custom taxonomy Service Types and set it for the Services custom post type.
    2. In the Settings block you’ll be able to enable Hierarchical option to allow creating parent and child taxonomies (when one taxonomy features several minor ones).
    3. In Meta Fields you’ll be able to add more extra fields with any type of content you might want to display for the taxonomy (e.g., to add an image to it you can select Media content type and create a meta field called Thumbnail).
    4. When everything is set just click Add Taxonomy button to add it to the post type you’ve selected. After that, you’ll be able to locate it in the dropdown for the selected post type in your Dashboard.
    5. Now you can create different categories (or service types, tags, etc) and add them for the posts to categorize them and to be able to query them.

Creating a Listing Template

    1. To create a new listing template and apply it to the post or taxonomy, navigate to JetEngine > Listings and here click Add New button in the top left.
    2. In Setup Listing Item form you need to choose the listing source (posts or terms), select the specific post type or taxonomy type in From post type/taxonomy dropdown, and provide the title for the listing template in Listing Item Name field (e.g., for Service listing you’ll have to select Posts > Services and I’ll set the name “Single Service Template”.
    3. When Elementor editor opens you’ll see the list of widgets for displaying dynamic content on the left in Listing Elements block. There is a set of widgets, let’s take a closer look at them.
      • Dynamic Field – this widget allows displaying post data added to the default fields and the meta data added to the meta fields. Please, note, that in the case you want to display the content different from the text and it is pulled from the database, you might need to use filter for the output.
      • Dynamic Image – use this widget to display thumbnail images or images added as media content type in the meta fields.
      • Dynamic Link – this widget allows adding dynamic permalinks and links from the meta fields.
      • Dynamic Meta – this widget helps add the dynamic meta information, such as information about comments, post author and publishing date, for the default posts and custom post types.
      • Dynamic Repeater – use this widget to display the repeating fields in you have chosen Repeater kind of content with different meta fields inside (e.g., icon, text block). It works with macros codes and you’ll have to use a bit of HTML to allow the content to be displayed correctly.
      • Dynamic Terms – this widget allows displaying the terms for the posts or custom post types to allow easy filtering and query. Every widget from this list has different style settings that allow extensive customization for each type of information.
        You’ll be delighted to know how easily you can change the appearance of each content block in about several clicks!
    4. And in case you want to change the listing settings and apply it for another post type or taxonomy, just open Settings > Listing Settings block. Here you’ll be able to change the listing source and also set the preview width.

Creating Custom Posts and Taxonomies Layouts with Listing Grid

If you have already added the listing template for the custom post type and single taxonomy type, you’re ready to create a layout using Listing Grid widget.

Before using it, please, make sure that there are at least several custom posts and a ready custom post type layout set for this post type. If everything is fine, we’re ready to go.

    1. Let’s navigate to JetEngine > Listings and here select the needed source and fill in the name for the layout (e.g., Service types layout). Click Create Listing Item to proceed.
    2. Drag and drop Listing Grid widget to the needed column on Elementor editing page. You’ll see the notice asking you to select the listing to show. In Content > General you need to specify the listing you want to be displayed (just select it from the dropdown). E.g., I’ve selected Service Type layout.
    3. In Posts/Terms Query you can set additional parameters for query in the newly created layout.
    4. There are also the settings allowing to change the number of columns for the grid (1 column stands for listing layout). You can also enable Use as Archive template option to pull the number of posts to be displayed from Reading settings and to be able to use this template as Archive template on your site.
    5. Also, you can change the Listing Settings in the Settings block to change the listing source and taxonomy or select another preview width.

JetEngine. The Bridge Between Elementor and PHP

Creating custom post types, taxonomies, and displaying them with Elementor seems no longer a complicated task with JetEngine. This powerful plugin becomes an irreplaceable part of CrocoBlock subscription, and perfectly compliments JetThemeCore, which now allows creating Archive and Single page templates.
With JetEngine you’ll be able to bring to life even the most complex projects while keeping working on them using Elementor live page builder.
JetEngine makes everything possible. Make sure to give it a try!