Theme
← Back to tutorials

Order Elementor loop by ACF date field

2 min read By Josh Denedo Dynamic Content

Introduction

In this tutorial, you’ll learn how to order your Elementor loop grid based on an ACF meta field. 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.

Steps

Create and apply loop grid template

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

Elementor Loop Template ordered by date created
Elementor loop grid ordered by post date created

Apply the custom query filter

By default, Elementor does not have an option to order by meta field. But 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 back to your loop grid widget and apply the query ID “dd_event_date” under Content > Query > Query ID

Add query ID to elementor loop grid

PHP Code Snippet

Order by Date

Replace the start_date with your own 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

Replace the start_date with your own ACF meta field key. 

<?php 

function dd_query_by_event_date( $query ) {
    $query->set( 'orderby', 'meta_value' );
    $query->set( 'meta_key', 'start_date' );
    $query->set( 'meta_query', array(
        array(
            'key'     => 'start_date',
            'value'   => date( 'Y-m-d' ),
            'compare' => '>=',
            'type'    => 'DATETIME',
        ),
    ) );
}
add_action( 'elementor/query/dd_event_date', 'dd_query_by_event_date' );
php code snippet to order loop grid by acf field
Elementor Loop Template ordered by ACF date field
Elementor loop grid ordered by ACF date field

22 comments

  1. Channing Krendler

    How old is this post, please? There’s no date on this post, so it’s unclear if this info is potentially out of date with Elementor’s versions / updates.

    1. David Denedo

      Apologies! I’ve now included the publish/update date.

      The tutorial is still working fine with the latest version of Elementor.

  2. MPDigital

    Great tutorial! This is exactly what I needed. Thank you and keep it up.

  3. MikeB

    Magic – thanks so much for this, I was wondering how to achieve this in Elementor. Every day is a learning day!

  4. Tomagiro

    Perfect! Thanks David!

  5. William Cox

    THANK YOU! THANK YOU! THANK YOU!
    If I wanted a post to be un-published on the day AFTER an event, how would that code change?

    1. David Denedo

      You can change the ‘today’ in the strtotime() function to ‘tomorrow’ and see if that suits your needs (assuming it is a one-day event).

      1. William Cox

        Awesome! Thanks again!

  6. Hammad-ur-Rehman

    hi i want to sort it according to last name my field name is last_name according to your code i placed it but its not working . So what i can do know ??? Any idea??

  7. Hammad-ur-Rehman

    Hi sir !
    i saw your tutorial today Order by Date
    Replace the start_date with your own ACF meta field key.

    set( ‘orderby’, ‘meta_value’ );
    $query->set( ‘meta_key’, ‘start_date’ );
    }
    add_action( ‘elementor/query/dd_event_date’, ‘dd_query_by_event_date’ );
    my question is that i want to sort my loop grid according to last name and my acf field is last_name according to your code i did it but its not work can you help howb can i do it that ???

    1. David Denedo

      You can try this code instead. In Elementor, use the query id “dd_last_name”.

      
function dd_query_by_last_name( $query ) {
    $query->set( 'orderby', 'meta_value' );
    $query->set( 'meta_key', 'last_name' );
}
add_action( 'elementor/query/dd_last_name', 'dd_query_by_last_name' );
  8. Kimberly Watters

    When I copy and paste your code I get yellow and red errors all over it. I’m setting it up for concerts and using the exact setup you did with ACFs.

    1. David Denedo

      Hi Kimberly
      May I know where you’re adding the code? Is it a code snippet plugin or your child theme? You can share a link via the contact form or by email and I’d be happy to take a look.

  9. Oreva

    This tutorial was such a life saver. Thank you so much.

  10. gareth

    THANK YOU! 🙂

    I’ve been looking at how to do this for a while now and even Elementor support were not very helpful. This is perfect.

    Could I ask what the code would be if you wanted to display events by a certain date e.g. all events on x June

    Thanks again

    1. David Denedo

      You can tweak the compare to be “=” instead of “>=” and change date(‘Y-m-d’) to the specific date you want to compare it with, e.g. 2025-05-26.
      So something like:

      
function dd_query_by_specific_event_date( $query ) {
    $query->set( 'orderby', 'meta_value' );
    $query->set( 'meta_key', 'start_date' );
    $query->set( 'meta_query', array(
        array(
            'key'     => 'start_date',
            'value'   => '2025-05-26',
            'compare' => '=',
            'type'    => 'DATE',
        ),
    ) );
}
add_action( 'elementor/query/dd_event_date', 'dd_query_by_specific_event_date' );
  11. James Douglas

    Hi David,
    Thank you so much for all this! Worked like a charm to order my events. I’ve tried using the bonus snippet to automatically remove events from the page once the date is been and gone, however, I have added a test event with yesterday’s date on and it displays on the page. What would I need to change from your code to have it working please?

    1. David Denedo

      Hi James.
      I had planned to remove the code but I forgot. It isn’t working for now.
      I’ll work on it as soon as I can.

  12. James Douglas

    Hi there, I’m using your code for the limit the earliest date and unfortunately, it is not working on a test event I have scheduled for a week before, it is still displaying. Here is the code I am using:

    function dd_query_by_event_date( $query ) {
    $query->set( ‘orderby’, ‘meta_value’ );
    $query->set( ‘meta_key’, ‘date’ );
    $query->set( ‘meta_query’, array(
    array(
    ‘key’ => ‘date’,
    ‘value’ => date( ‘Y-m-d’ ),
    ‘compare’ => ‘>=’,
    ‘type’ => ‘DATETIME’,
    ),
    ) );
    }
    add_action( ‘elementor/query/dd_event_date’, ‘dd_query_by_event_date’ );

    my ACF fields is ‘date’ – so I am thinking there may be a conflict with this wording? Can you explain further on how I can fix this please?

  13. Mediumstudio

    IS there a way to display by time. I am using an ACF custom field for Taxonomy and custom times. I altered the code:

    function dd_query_by_event_time( $query ) {
    $query->set( ‘orderby’, ‘meta_value’ );
    $query->set( ‘meta_key’, ‘start_time’ );
    $query->set( ‘meta_query’, array(
    array(
    ‘key’ => ‘start_time’,
    ‘value’ => time( ‘H:i:s’ ),
    ‘compare’ => ‘>=’,
    ‘type’ => ‘STARTTIME’,
    ),
    ) );
    }
    add_action( ‘elementor/query/dd_start_time’, ‘dd_query_by_start_time’ );

    I think I may have an issue because I am using categories rather than the Time Picker. Thanks for any insight.

    1. David Denedo

      I’ll have to investigate it properly but yes you can’t really order by a taxonomy. What ACF field type are you using for the start_time and in what format are you saving them? Also, the type should properly be TIME not STARTTIME.

  14. Niki Miskou

    Hello David,

    I am wondering if there are any differences between PODs and ACF? If I have to change something in your PHP? Because it is not working on my website.

    Kind regards

Leave a comment

Name and email are required. Your email won't be published.

Not published. Used only for moderation.