How to filter custom post types by ACF date field

As I was building out my new website, I started to create a couple custom post types. One of these custom post type’s were for Events and the other for Talks. I wanted to be able to display my upcoming events vs events I have already attended. I didn’t want to have to manually switch them over to a past event once they were completed or have to make any changes, because let’s face it, it wouldn’t happen. I had all of my events in a custom post type with Advanced Custom Fields. And I wanted to make two lists of events, one for upcoming and one for past events. I would need to have a single date field to be able to filter by.

How to make a new custom post type

I make all my themes with Underscores. It’s a great bare bones starter theme. I am still a pretty big fan of Bootstrap, even if it may have a bit of technical bloat, so I add Bootstrap into my Underscores theme. I’ll have a future post talking about how I do that. For now, we are talking about Custom Post Types, so here is the code that I use to add CPT’s to my themes.

Lines 5-13 are commented out so you have a starting point. For each CPT you need, copy and paste that below each array for creating a CPT (example: lines 14-20). Lines 29-66 are global settings for all of your Custom Post Types. For more information on what these are doing, check out Register Post Type in the WordPress Codex.

How to setup Advanced Custom Fields

Advanced Custom Fields is pretty rad. It’s free plan will likely cover everything you need to do, however, if you really start to use it then I recommend you purchase a pro plan so you can take advantage of the JSON synchronization feature.

You can setup field groups for whatever you would like to bundle together. For example, I have a field group for my Events CPT (screenshot below). When I added my events, I entered all the field data for each post. I have Date Range for a more visual date field but also Speaking Date as a field in which I will sort by. The other fields are just informational that I wanted included in all of my events.

How to filter custom post types by ACF date field

I have created an events-upcoming.php file that I include in my theme when I want to display the event lists. The following example is for upcoming events, for past events I just switched line 12 to be less than today.

Line 2 specifies what today’s date is so we can use this later to sort with. Lines 3 through 16 are doing our query for obtaining our posts. You can learn more about some of the details of this in the WP Query doc in the WordPress Codex. The key piece of this is the orderby => meta_value and then the meta_query. In the meta query we are using speaking_date as our key and today’s date as our value to base off of and using compare to grab only the posts with a speaking_date of greater than today (less than today for past events).