How to Sort a Query Loop by an ACF Date Field using GenerateBlocks

Recently, I was working on a project where I needed to sort a Query Loop based on a custom date field using Advanced Custom Fields (ACF). Today, I’m going to show you exactly how to do that.

Step 1: Understand the Query Loop Setup

In this example, I’ve set up a basic event schedule that displays dates and artist names. By default, WordPress orders posts by the date they were published, not by the event date stored in the ACF field. Our goal is to reorder these posts so that the closest upcoming events appear first, and the further events appear last.

Step 2: Set Up Your Query Loop

1. Edit Your Page: Go to the page where you’ve set up your Query Loop and open the editor.
2. Locate the Query Loop Block: In the side panel, find your Query Loop block. The first step is to add a parameter to the loop to ensure the PHP code we’ll add later can interact with it.
3. Set the Order: Within the Query Loop settings, go to Order By and select Date. This is important because we want to sort by date, but since we’re using a custom ACF field, additional steps are needed.
4. Add a CSS Class to the Grid Block: Select the Grid Block within the Query Loop, scroll down to Additional CSS Class, and add a class name that you’ll remember, such as order-by-date.
5. Update the Page: Save your changes by clicking Update.

Step 3: Add PHP Code to Sort the Query Loop

Now that the Query Loop is set up, we need to add PHP code to instruct WordPress to sort the posts by the custom ACF field.

1. Go to Appearance > Theme File Editor: In your WordPress dashboard, navigate to the theme file editor.
2. Open the Child Theme’s functions.php File: If you’re not using a child theme, consider setting one up to avoid losing changes during theme updates.
3. Insert the PHP Code:
   • The GenerateBlocks documentation includes an example for sorting by date values. Copy the relevant PHP snippet.
   • Paste the code into your functions.php file.
4. Customize the PHP Code:
   • CSS Class: Replace order-by-priority with the class name you added earlier (order-by-date).
   • Meta Key: Replace priority with the name of your ACF field (e.g., event_date).
   • Type: Ensure the type is set to DATE.
   • Order: Set to ASC for ascending order (soonest to latest) or DESC for descending order.

//DATE type custom field value
add_filter( 'generateblocks_query_loop_args', function( $query_args, $attributes ) {

    // apply filter if loop has class: order-by-priority
    if ( ! is_admin() && ! empty( $attributes['className'] ) && strpos( $attributes['className'], 'order-by-priority' ) !== false ) {
       
        $query_args = array_merge( $query_args, array(
            'meta_key' => 'priority',
            'meta_type' => 'DATE',
            'orderby' => 'meta_value',
            'order' => 'ASC',
        ));
    }
    return $query_args;
}, 10, 2 );

5. Save the File: Click Update File to save your changes.

Step 4: Test the Query Loop

Go back to your event schedule page and refresh it. Before applying the PHP code, the events might have been out of order. After refreshing, you should see that they are now sorted from the soonest event to the latest.

Additional Tips

• Explore Other Sorting Options: The GenerateBlocks documentation offers other examples, such as sorting by numbers or alphabetically. These can be useful for different types of custom fields.
• Use with Other Custom Fields: This method can be adapted for various custom fields, not just dates, by adjusting the PHP code accordingly.

Conclusion

With a little PHP and tweaking in the Query Loop, you can easily sort posts by a custom field like an ACF date. This can be particularly useful for event schedules or any scenario where the default sorting doesn’t meet your needs.