Create a Custom Content Type Listing Template with JetEngine & Elementor

Creating a custom content type listing in WordPress can be a breeze with the right tools. In this tutorial, we’ll walk you through the process using JetEngine and Elementor. We’ll cover everything from setting up your custom content type to creating a listing template.

Prerequisites

Make sure you have the following installed and activated:

• JetEngine
• Elementor (Free version)

Create a Custom Content Type (CCT)

Step 1: Activate Custom Content Types in JetEngine

1. Navigate to JetEngine in your WordPress dashboard.
2. Make sure “Custom Content Types” is enabled.

Step 2: Add a New Custom Content Type

1. Click on “Add New” under Custom Content Types.
2. Name it “Publications.”
3. Configure the database table name (it’s usually created automatically).

Step 3: Configure Additional Settings

1. Enable “Single Page” for the CCT.
2. Under “Related Post Types,” choose “Post.”

Tip: This configuration optimizes web speed performance by storing meta fields in a specific database table.

Step 4: Add Meta Fields

1. Add a field for “Publication Title” (Type: Text, Required: Yes).
2. Add a field for “Publication Details” (Type: WYSIWYG).
3. Add a field for “Publication Date” (Type: Date, Save as Timestamp: Yes).
4. Add a field for “Author” (Type: Text).
5. Add a field for “Language” (Type: Radio, Use Glossary: Yes).
6. Add a field for “Cover Image” (Type: Media).

Populate Your Custom Content Type

Step 5: Add New Entries

1. Navigate to “Publications” in the admin column.
2. Click “Add New.”
3. Fill in all the fields: Title, Details, Date, Author, Language, and Cover Image.
4. Save and repeat for additional publications.

Create a Listing Template

Step 6: Navigate to Listings in JetEngine

1. Go to JetEngine > Listings.
2. Click “Add New.”

Step 7: Configure Listing Settings

1. For “Listing Source,” choose “Custom Content Type.”
2. Select “Publications” as the content type.
3. Name the listing item “Publication CCT Template.”
4. Choose Elementor as the page builder.

Step 8: Design the Listing Template in Elementor

1. Add a dynamic image for the cover.
2. Add dynamic fields for the title, author, date, and language.
3. Customize the layout and styles as needed.
4. Save the template.

Display the Listing on a Page

Step 9: Create a New Page

1. Go to Pages > Add New.
2. Name the page “Publications.”
3. Use Elementor to design the page.

Step 10: Add the Listing Grid

1. Drag and drop the “Listing Grid” widget onto the page.
2. Select your previously created listing template.
3. Publish the page.

Conclusion

You’ve successfully created a custom content type listing template using JetEngine and Elementor. This setup not only makes your website more organized but also optimizes it for better performance.