Have you ever needed to adjust the order of posts in a WordPress archive page? By default, WordPress will display posts on archive pages by the date they are published, but ordering by post date isn’t always the best solution. When you need to order posts by something else, here’s how to order the WordPress archive templates by ACF date picker field:
About the ACF Date Picker
Advanced Custom Fields (ACF) is a popular WordPress plugin which allows you to create additional content fields for WordPress posts and pages. The ACF Date Picker field allows users to associate a unique date with a page, post, or custom post type. For example, if you have a custom post type of “event,” you could utilize the ACF Date Picker to create an event date field to store and display a date associated with each event.
How WordPress Archive Pages Work
By default, all WordPress archive pages display posts in reverse chronological order based on the time and date they were published. This means that the most recently published post will appear first and the oldest published post will appear last. If you want to order the posts by a different date, there are a few steps you can take to accomplish it:
How to Order the WordPress Archive Templates by ACF Date Picker Field
1. How to Alter the Query in Functions.php
Let’s assume we have a post type called “event”. For our event post type archive, we want to order by the event date, not the published date of the post. We also want the earliest date to appear first and the latest date appearing last. We can use WordPress Hook pre_get_posts to alter the query before it is run.
function mind_pre_get_posts( $query ) {
if( is_admin() ) {
return $query;
}
if( isset($query->query_vars['post_type']) && $query->query_vars['post_type'] == 'event' && $query->is_main_query() ) {
$query->set('orderby', 'meta_value');
$query->set('meta_key', 'event_date');
$query->set('order', 'ASC');
}
return $query;
}
add_action('pre_get_posts', 'mind_pre_get_posts');
We don’t want to alter the query in the admin. So, in the code block above, we use the WordPress function is_admin to check if the query occurs in the admin and, if so, to return the query unchanged. The “event” post type archive page is the only place we want to alter the query. This can be done by checking if the post type is set, if the post type is “event”, and if it is in the main query.
If those conditionals are met, the query parameters are changed using $query->set. In order to query by the ACF Date Picker field and display the posts in ascending order, set ‘orderby’ to ‘meta_value’, the ‘order’ to ‘ASC’ and the meta_key to the name of the ACF Date Picker field. (Note: this will also alter the query for any other archive pages for the specific post type, such as taxonomy and date archive pages.)
2. How to Get the Meta Key of the ACF Field
The meta_key will be the field name of your ACF Date Picker field. In our case, the meta key is ‘event_date.’
3. Only Display Future Dates
The query will now display the events custom post type in the desired order. In this specific case, however, we may not want to display past dates. This can be achieved by adjusting our query to pull only dates from today onward. The ACF Date Picker returns dates in the (yyyymmdd) format. By using the PHP Date function, we can compare the value of the current date to the event date.
function mind_pre_get_posts( $query ) {
// do not modify queries in the admin
if( is_admin() ) {
return $query;
}
// only modify queries for 'events' post type
if( isset($query->query_vars['post_type']) && $query->query_vars['post_type'] == 'event' && $query->is_main_query() ) {
$query->set('orderby', 'meta_value');
$query->set('order', 'ASC');
$query->set( 'meta_query',
array(
array(
'key' => 'event_date',
'value' => date('Ymd'),
'compare' => '>='
)));
}
// return
return $query;
}
add_action('pre_get_posts', 'mind_pre_get_posts');
Now, we should only see events with an event date of the current date and future dates.
Conclusion
By using the pre_get_posts filter, WordPress developers can alter the order of archive pages. The ACF Date Picker can be a very useful way to order the archive pages in WordPress.