Websites that offer trip plans and lodgings typically display the items they offer on a listing grid, be it on a separate page or on the homepage. If you want to create a similar website with WordPress, you can use JetEngine to create a listing grid. JetEngine is a WordPress plugin (or Elementor add-on more precisely) that allows you to create custom templates to display dynamic content. No coding skill is required to create a custom template with JetEngine.
JetEngine itself is a paid plugin that costs $19 per year. You can get it with a one-time purchase option in the Jupiter X theme bundle. You can use the free version of Elementor to use JetEngine.
How to use JetEngine to create a listing page in WordPress without coding
Before getting started, make sure you have installed both JetEngine and Elementor. To create the listing grid, you need to create two required components:
- A custom Post Type
- A listing template
These components can be created with JetEngine so don’t need to install extra plugins.
1. Creating the Custom Post Type
To create a custom Post Type, go to JetEngine -> Post Types. Click the Add New button on the top side.
On the General Settings block, give your custom Post Type a name. You can also set the slug if you want to.
Open the Labels block. You can set the labels for your new Post Type. A label is a text you see on the WordPress dashboard for certain operations. For instance, if you type “New Trip” on the Add New field, you will see a New Trip label when adding a new post type.
By default, each label is set to your custom Post Type name. You can change it as you want.
Open the Advanced Settings block. From this block, you can make some advanced settings such as setting the Dashicon, display the post types using hierarchy, make an archive, and so on.
Open the Meta Fields block. You can add several meta fields according to your needs. For instance, if you want to create a listing page for a travel agency website, the meta fields you might want to add are the trip plan title, date, price, number of persons, image, and so on.
To add a new meta field, click the New Meta Field button. Add the label, field type, description and other parameters you need.
Click New Meta Field to add another meta field. One thing to note. If you want to add a date meta field, make sure to enable on the Save as timestamp option to allow you to save the date meta field in the database.
Once you are done, click the Add Post Type button.
After clicking the Add Post Type button, you should see a new menu item on the sidebar of the WordPress dashboard. Next, add new posts with your new custom Post Type. You can add several posts according to the items you want to display on the listing grid.
You can read this post to learn more about how to create a custom Post Type using JetEngine.
2. Creating the listing template
To create a listing template, go to JetEngine -> Listings. Click the Add New button on the top side. On the appearing window, set the Listing source to Posts and the Form post type to custom Post Type you have just created above. Give your listing template a name and set the Listing view to Elementor. Click the Create Listing Item button.
You will be taken to the Elementor editor. Add a section by clicking the plus icon on the canvas area and add the Dynamic Image widget.
Go to the left panel on set the Source according to the name of the meta field (the meta field on your custom Post Type) you set for images. Set the image size. We recommend you set the image size to Medium.
Add the Dynamic Field widget and set the Source to Meta Data. Set the meta field according to what you want to display. For instance, if you want to display the title, you can set it to Title.
Add another Dynamic Field and set the meta field according to what you want to display on the listing grid. If you want to add the date meta field, enable the Filter field output option and set the Callback to Format date.
Add the rest of the meta fields you want to display on the listing grid. To style each meta field, you can go to the Style tab on the left panel.
Click the PUBLISH button once you are done.
Creating the listing page
Now you can start creating the listing page. To do so, create a new page (Pages -> Add New) and edit it with Elementor. On the Elementor editor, add a new section and add the Listing Grid widget. On the left panel, select the listing you have just created above.
Now, every time you create a new post type according to the custom Post Type you created, it will be added to the listing grid. You can go to the Style tab to style the listing grid. Just play around until you get satisfied with the result.