Display Upcoming Events with Jet Engine’s Listing Grid

To display upcoming events on your website can be a game-changer. It not only keeps your audience informed about what’s happening but also adds a dynamic element to your site. This tutorial by Crocoblock will walk you through how to use the JetEngine plugin to display upcoming events in a listing grid on your WordPress site. We will also cover how to display posts created within a specific time period.

How to Display Upcoming Events

1. Ensure the Date Field is Saved as a Timestamp
   Navigate to JetEngine > Post Types and open the Custom Post Type (CPT) you’re working with. Check that the date field is saved as a timestamp.
2. Create a New Query
   Go to JetEngine > Query Builder and click on “Add New”. Name your query and set the query type to “Post Query”. Choose the post type relevant to your needs (in our case, it’s “Jobs Vacancies”).
3. Set Up a Meta Query
   In the Meta Query section, add a new query. Use the macro jet_engine_meta_field and set the date field with a deadline for applying for a certain vacancy. The “Compare” field should be set to “Greater Than” and the “Type” should be “Numeric”.
4. Apply the Query to Your Listing Grid
   Go to the page with your listing grid in Elementor. In the “Custom Query” tab, apply the query you just created.

Display Past Events

To display past events, you’ll need to create another query. This time, you’ll use a “Date Query” to display posts created in the previous month.

1. Create a New Query
   Go to JetEngine > Query Builder and click on “Add New”. Name your query something like “Previous Month Events” and set the query type to “Post Query”.
2. Set Up a Date Query
   In the “Date Query” section, set the “After” field to “First day of previous month midnight” and the “Before” field to “First day of this month midnight”.
3. Apply the Query to Your Listing Grid
   Go to the page with your listing grid in Elementor. In the “Custom Query” tab, apply the query you just created.

Now, you should see posts created in the previous month on your page. This is a great way to keep your audience informed about past events.

Why This Method is Beneficial

Using the JetEngine plugin to display upcoming events on your website has several benefits. It allows you to:

• Keep your audience informed about what’s happening
• Adds a dynamic element to your site
• Helps you manage your events more efficiently

Tips & Tricks

• Remember to set the number of posts per page in the pagination tab when creating your query. This option in the listing will be ignored when using a custom query.
• Use the “Preview Results” option when creating your query. This allows you to see how many posts with the current conditions you have and check if your settings are correct.
• If you ever create a post exactly at midnight on the first day of the month, tick the “Inclusive” option in your date query.

Common Issues

• Events are not displaying correctly
  Make sure your date field is saved as a timestamp and that you’ve set up your meta query correctly.
• Posts from the previous month are not displaying
  Check that you’ve set up your date query correctly and that you’ve applied the query to your listing grid.
• The number of posts per page is incorrect
  Remember to set the number of posts per page in the pagination tab when creating your query. This option in the listing will be ignored when using a custom query.