Author: Jasmin Kotadia

Displaying events in a clean “Upcoming” and “Past” format is one of the most requested features on WordPress event websites. Whether you’re managing workshops, webinars, conferences, or local meetups—showing events in the right chronological order boosts user engagement and improves navigation.

With JetEngine’s Query Builder, you can easily create two dynamic listings:

Upcoming Events – sorted by closest future date

Past Events – sorted by most recent past date

In this guide, you’ll learn how to build both listings from scratch using JetEngine, Elementor, and your custom event date fields.

Why Use JetEngine Query Builder for Event Filters?

JetEngine gives you powerful control over custom post types, meta fields, and dynamic content. With the Query Builder, you can:

– Filter events by date automatically

– Sort events by ascending/descending order

– Display upcoming & past events on any page

– Reuse the queries across multiple listings

– Avoid writing custom PHP code

Step 1: Prepare Your Event Structure

1. Create a Custom Post Type
   – JetEngine → Post Types → Add “Events”
2. Add an Event Date Meta Field
   – JetEngine → Meta Fields
   – Field Name: event_start_date
   – Field Name: event_end_date
   – Field Type: Date (or DateTime)
   – Save Format: Y-m-d

Step 2: Build the Query for Upcoming Events

1. JetEngine → Query Builder → Add New
2. Query Type: Posts Query
3. Post Type: Events
4. Sorting:
   – Order By: By date
   – Order: ASC ( From lowest to highest values (1, 2, 3; a, b, c) )
   
5. Meta Query:
   – Key: event_end_date
   – Operator: Greater than ( > )
   – Value: Today
   – Type: Numeric
6. Name it: Upcoming Events Query
   

Step 3: Build the Query for Past Events

1. JetEngine → Query Builder → Add New
2. Query Type: Posts Query
3. Post Type: Events
4. Sorting:
   – Order By: By date
   – Order: ASC ( From highest to lowest values (3, 2, 1; c, b, a) )
   
5. Meta Query:
   – Key: event_end_date
   – Operator: Less than ( < )
   – Value: Today
   – Type: Numeric
6. Name it: Past Events Query
   

Step 4: Create the Event Listing Template

1. JetEngine → Listings → Add New
2. Select CPT: Events
3. Add:
   – Dynamic Title
   – Event Start Date
   – Event End Date
   – Featured Image
   – Location
   – View Details Button

Step 5: Add Upcoming & Past Listings on a Page

• For Upcoming Events:
  – Add Listing Grid in Elementor
  – Enable Custom Query
  – Select: Upcoming Events Query
• For Past Events:
  – Repeat with: Past Events Query

Final Thoughts

Using JetEngine’s Query Builder makes event management fast, scalable, and automatic. Your listings update dynamically without manual work, making your website more professional and user-friendly.

If you’re building a WordPress site with dynamic event listings, date-based queries, or complex JetEngine logic, our team can take full ownership of the project—from data structure and query setup to frontend integration and performance optimization.

You can Book a Free Project Consultation to discuss your goals, timelines, and how we can deliver a reliable, scalable solution tailored to your website.

If you’re using Directorist – Business Directory Plugin and want to customize your single listing page layout using Elementor without writing complex templates, you’re in the right place.
In this tutorial, you’ll learn how to structure your single business listing page into a two-column layout and control what content appears on the left or right—using a simple CSS class and small JavaScript snippet.

Step 1: Install the Directorist Plugin

First, install the plugin from the official WordPress repository:

Directorist – Business Directory Plugin (Available in WordPress Plugins Directory)

you can direct download and install from official worpress : https://wordpress.org/plugins/directorist/

You can install it here:
Go to Plugins → Add New → Search “Directorist” → Install → Activate

Step 2: Open the Directory Builder

Once installed, go to:

Dashboard → Directory Listings → Directory Builder → Single Page Layout

This is where you will customize the single listing design.

Configure the Listing Header

Click on Listing Header and toggle ON/OFF the elements you want to display:

• Back Button
• Bookmark
• Share
• Report
• Listing Title
• Location
• Category
• Rating
• Badges
• Pricing

Configure Your Listing Contents

Next, go to:

Listing Contents

Drag, reorder, or remove blocks like:

• Description
• Business Information
• Business Photos
• Location Map
• Reviews
• Related Listings
• Author Info
• Custom Content

After you finish arranging fields, click Update.

Step 3: Assign Left or Right Column Placement

Now we need to tell the system which content belongs in the sidebar and which belongs in the main content area.

Click a section → open its settings → find Custom Block Classes.

Add one of the following:

Class Name	Layout Position
left-side	Appears in left/main content section
right-side	Appears inside the sidebar

Example:

• Description → left-side
• Business Info / Contact Form → right-side

Step 4: Add Custom Elementor JavaScript

Now we’ll use a small script to organize the layout structure.

Go to:

Elementor → Custom Code → Add New

• Name: Create Directory Single Page JS
• Location: Header or Footer (recommended Footer)

Paste this script:

<script>
jQuery(document).ready(function($) {

  // Insert new layout row after the listing header
  $('.directorist-single .directorist-single-wrapper .directorist-single-listing-header').after(`
    <div class="directorist-row directorist-single-bottom">
      <div class="directorist-single-bottom-left directorist-col-lg-8"></div>
      <div class="directorist-single-bottom-right directorist-col-lg-4"></div>
    </div>
  `);

  // Move left-side items into left content area
  $('.directorist-single .directorist-single-wrapper > .left-side')
    .appendTo('.directorist-single .directorist-single-wrapper .directorist-single-bottom-left');
  // Move right-side items into sidebar
  $('.directorist-single .directorist-single-wrapper > .right-side')
    .appendTo('.directorist-single .directorist-single-wrapper .directorist-single-bottom-right');
});
</script>

Save and make sure it applies sitewide or only on Directorist single pages (recommended).

Step 5: Style and Customize

Now that the structure is created, you can:

• Add spacing
• Add backgrounds
• Customize typography
• Style widgets

Make it visually match your directory branding.

Final Output

You’ll now have a clean, structured two-column layout where:

• Main business details appear on the left
• Contact, map, info, and widgets appear on the right sidebar

Conclusion

With just a few simple steps and a small JavaScript tweak, you can fully customize the Directorist Single Listing Page layout using Elementor—without editing plugin files or writing a custom template.

This method gives you complete layout control and makes your business directory look more professional and user-friendly.

If you’re building a business directory, custom listing platform, or Elementor-based marketplace, our team can handle the complete project—from data structure and custom templates to dynamic integrations and performance optimization.

You can Book a Free Project Consultation to discuss your requirements, timelines, and how we can deliver a scalable, production-ready solution for your directory website.

Implementing an efficient search system is one of the best ways to improve user experience and content accessibility on your WordPress website. If you’re using Crocoblock, you can easily build a search filter that scans post titles and returns accurate results—without writing complex code.

With the right combination of JetSmartFilters, JetEngine, and Elementor, you can create a clean, user-friendly search functionality tailored to your website’s needs.

This guide walks you through each step—from plugin setup to query configuration—so you can successfully implement a title-based search on any page, archive, or listing.

Step 1 — Install and Activate Required Plugins

Make sure the following plugins are installed and active:

• Elementor Pro — required for theme builder & dynamic layouts
• JetEngine — creates custom post types, custom fields & listings
• JetSmartFilters — enables advanced search and filtering options

Once installed, confirm that JetEngine Listings are enabled in Crocoblock settings.

After installing the plugin, you can create a meta box using JetEngine and add meta fields to any post type you want.

Based on the meta field ID from that meta box, we can then create a search query using the meta ID.

Step 2: Create a Search Filter

1. Go to JetSmartFilter: Navigate to the WordPress Dashboard and go to Smart Filtersunder the JetPlugins section.
2. Add New Filter: Click on “Add New” to create a new filter.
3. Choose Filter Type: Select “Search” as the filter type to enable a search bar for entering keywords.
4. Choose Search by Custom Field: Set the search type to “By Custom Field (from Query Variable).”
5. Set Query Variable: In the “Query Variable” field, enter a custom variable name, such as p-title, artist_name. This variable will hold the search term.
6. Assign the Filter to Content: Under the “Filter for” section, select the post type or taxonomy you want to filter.
7. Save Changes: Click “Publish” to save your new filter.

Step 3: Add Created Search Filter in Archive Page

1. Open Your Page in Elementor or Gutenberg: Navigate to the page where the filter will be used.
2. Add the Smart Filter Widget: Drag and drop the Smart Filter widget onto the page.
   
3. Link the Filter to the Grid: Connect the filter to the Listing Grid or content display you want to filter.
4. Style the Filter: Customize the appearance of the filter to match your website’s design.

By leveraging JetSmart Filters and configuring query variables, you can easily implement a powerful title-based search feature on your WordPress site. This setup enhances content discoverability, enabling users to quickly find relevant posts or products. With proper styling and configuration, this feature not only improves functionality but also aligns with your website’s design for a cohesive user experience.

Using JetSmartFilters with Crocoblock to search by title and meta values can significantly improve your site’s usability and accuracy. If you need help implementing advanced WordPress features or custom development, Book a Free Consultation.

Connecting content types is essential when building dynamic WordPress websites—whether you’re creating a directory, real estate portal, course platform, portfolio site, or any advanced content system. With Crocoblock’s JetEngine, you can easily create relationships between two Custom Post Types (CPTs) and display related data anywhere on your site.

In this guide, you’ll learn exactly how to create CPT relationships, assign related items, and display them using Elementor, Gutenberg, or JetEngine listings.

What Are Relationships in JetEngine?

A relationship defines how two different post types connect to each other. JetEngine supports:

1. One-to-One

Each item from the first CPT relates to exactly one item from the second CPT.

2. One-to-Many

One post can connect to multiple items from another CPT.

3. Many-to-Many

Both CPTs allow multiple connections—useful for complex relational data.

Example:

• Projects ↔ Team Members
• Courses ↔ Instructors
• Agents ↔ Properties
• Books ↔ Authors

JetEngine makes it easy to build these relations visually, without writing any code.

Step 1 — Create the Custom Post Types

You need two post types:

1. Go to JetEngine → Post Types → Add New
2. Enter:
   • Post Type Name: Projects
   • Slug: projects
3. Click Add Post Type
4. Repeat the same steps to create:
   • Post Type Name: Team Members
   • Slug: team-members

   

Step 2 — Create the Relationship

Now you will link Projects → Team Members.

Steps:

1. Go to JetEngine → Relations → Add New
2. Enter a Relationship Name:
   Project to Team Members
3. Choose:
   • Parent: Projects
   • Child: Team Members
4. Under Relationship Type, choose:
   One-to-Many (One project has many team members)
5. Leave other options as default
6. Click Add Relation

Step 3 — Add Team Members and Projects

Now you will add some content.

Add Team Members:

1. Go to Team Members → Add New
2. Add Name, Photo, Role, Description
3. Click Publish

Add Projects:

1. Go to Projects → Add New
2. Add Project Title, Description, and Featured Image
3. Scroll down to the Related Team Members box
4. Select the team members who worked on the project
5. Click Publish

Step 4 — Create the Team Members Card (Listing Template)

This is the design for each team member shown on the project page.

Steps:

1. Go to JetEngine → Listings → Add New
2. Choose:
   • Listing Source: Posts
   • Post Type: Team Members
3. Design the card:
   • Add Team Member Photo
   • Add Name
   • Add Role
   • Add Description or Link
4. Click Publish

Step 5 — Display Related Team Members on the Project Page

You will now show the connected Team Members on each single Project page.

Steps (Elementor):

1. Go to Templates → Theme Builder → Single Project
2. Edit with Elementor
3. Drag Listing Grid widget onto the page
4. Settings:
   • Listing: Add listing which you created
   • Use Custom post types: Team Members

   

   • Post Query: select Posts & Author Parameters  and use Marcos

   

5. Save the template
6. View any Project — you will now see the Team Members listed beautifully.

Conclusion

Setting up relationships between custom post types with Crocoblock helps you build smarter, more dynamic WordPress websites. If you’re planning a new site or want expert development for advanced CPT features, Book a Free Consultation.