JetEngine: How to Create a Listing Template for Post Types

With the JetEngine plugin, you have an opportunity to pull the content from the back-end dynamically to the Elementor page builder in order to display it on the front-end. In this tutorial, we’ll uncover the way you can create a listing in order to display the content in the Listing Grid with dynamic content.

Before you start with the listing you have to create a Custom Post Type. Follow this link if you need some guidance in it. And now let’s go in for the Listing Template.

Creating a new listing

1 Step — Add New Listing Item

First, proceed to the JetEngine > Listings. Here you’ll see the Listing Items screen and you need to click the “Add New” button.

2 Step — Set up Listing Item

Once the Setup Listing Item window has opened you should fill in the fields:

Listing source. We are now talking about the Listing Template for the Posts, so choose the “Posts” option in this drop-down menu;
From post type. Here you have to select the post type from which the content will be pulled. For example, it can be named “Country”. Take into consideration, that you can create a listing template for the default WordPress Posts as well;
Listing Item Name. Choose the name of the listing and type it in here;
Listing View. In this drop-down menu, you can choose either to create the listing with the means of the Elementor page builder or with Blocks of Gutenberg editor.

Afterward, click the “Create Listing Item” button.

Filling the listing with content

Now, let’s make sure we have all the necessary content added to the listing. You should choose dynamic widgets depending on what you need to display. In our case, we want to display the title of the post and the image from the meta field. Follow these tutorials on Dynamic Field and Dynamic Image widgets to learn more.

Moreover, you can adjust needed settings for the listing in the Listing Item Settings section, which you can open by clicking the gear icon at the bottom of the page.

If you have changed your mind and want to select other Listing source, you can do it here. In the From post type drop-down list, you can pick another post type. It is also possible to change the Preview Width and Make listing item clickable (in that case you will be able to add links to the listings).

When everything is done, click the “Publish” button. Now we are ready to display the listing through the Listing Grid Widget.

Displaying the listing template

1 Step — Add the Listing Grid widget

Open the page, where you want to show a listing, in the Elementor editor. Drag and drop the Listing Grid widget and select the listing that you have just created from the dropdown. Learn more about it in the Listing Grid functionality overview.

Also, you can customize the content and style options of the widget right here.

As you might have noticed, the appearance of the posts is exactly like the listing template we have created previously.

2 Step — Customize the Queries

You can include or exclude some posts with its ID, sort posts by ascending and descending order or create any other sorting combinations by customizing the Query according to your needs.

Then update the changes and feel free to preview the results (note, that you should set the proper conditions in order to display the listing grid on the post’s archive page).

That is pretty much it. Now you are ready to create your listings templates, pulling dynamic content using the JetEngine plugin.