Order Elementor loop by ACPT date field with some priority listing items at the top

Introduction

In this tutorial, you’ll learn how to order your Elementor loop grid based on an ACF date field while prioritising some events based on a toggle field in ACPT. You can then prioritise some items to be at the top of the listing. This is quite useful when showcasing upcoming events, ensuring that only current events are displayed in ascending order, starting with those closest to the current date while also taking into account the users who have paid to have their listings at the top.

Steps

Create your CPT and meta fields

For this example, I created a CPT using the ACPT plugin called “Events” with the slug “events”.

Then I created a field group with the name events-field-group and a metabox group called “event-fields”. Then within that group, I created a couple of meta fields for my Events CPT including a date field with the name “start-date” and a toggle field with the name “priority”.

Create and apply loop grid template

Begin by designing your loop grid template within your Elementor page and applying the loop grid widget to the page. The loop grid widget is very powerful and easy to use, but Elementor Pro is required to use this feature.

Apply the custom query filter

By default, Elementor does not have an option to order by meta field. Fortunately for us, elementor has provided a way to apply a custom query filter. You can learn more about it from the Elementor Developer Docs.

Using your favourite method for applying custom PHP code snippets, such as using a script organiser plugin like Code Snippets Pro or WPCodeBox, or using your child theme (my preferred method), apply the code snippet provided in the next section.

Add query ID to loop grid

Finally, return to your loop grid widget and apply the query ID “dd_event_date” under Content > Query > Query ID

PHP Code Snippet

Order by Date

Replace the start_date with your own ACPT or ACF meta field key.

<?php 

function dd_query_by_event_date( $query ) {
    $query->set( 'orderby', 'meta_value' );
    $query->set( 'meta_key', 'start_date' );
}
add_action( 'elementor/query/dd_event_date', 'dd_query_by_event_date' );

Limit the earliest date to today’s date and add priority field

Replace the event-fields_start_date and event-fields_priority with your own ACPT or ACF date and toggle or true/false meta field keys.

<?php

function dd_query_priority_future_events($query)
{
    // Set up meta query for filtering and sorting
    $meta_query = array(
        'relation' => 'AND',
        'start_date_clause' => array(
            'key'     => 'event-fields_start-date',
            'value'   => date('Y-m-d'),
            'compare' => '>=',
            'type'    => 'DATE',
        ),
        'permanent_clause' => array(
            'key'     => 'event-fields_priority',
            'compare' => 'EXISTS',
        ),
    );
    $query->set('meta_query', $meta_query);

    // Set ordering using meta query clauses
    $query->set('orderby', array(
        'permanent_clause' => 'DESC',
        'start_date_clause' => 'ASC',
    ));
}
add_action('elementor/query/dd_priority_and_future_events', 'dd_query_priority_future_events');