This is another example of a custom loop to display upcoming events. Using Metabox made handling the input of the custom fields very easy with the date picker element. A few interesting things I ran into on this project:
The date comparison that filters post output to only show upcoming and not past events didn't work until I put the date into a variable outside of the $args array? Not sure why...
Your server may not be in the same time zone as your client. In my case, the server was in Pacific and the client in Mountain. Took me a bit to realize that was the reason some posts weren't displaying as expected. Using date_default_timezone_set() solved this for me.
The HTML for this layout is mostly copied from an Oxygen Easy Posts template. I had to use a custom loop to include the meta query since the Easy Posts element currently doesn't support this.
The end result looks like this. I have this query on multiple pages and just edit the category filter in the query so the client can choose where to display a post with checkboxes on the backend.
Setting up the custom post type in Metabox:
Setting up the custom fields in Metabox:
The author view of creating a new event post in wp-admin:
And the code that handles the display of the loop output:
For the styling, I set the code block to display = flex, direction = row, and wrap to true. The event container was set to a width of 50%. Most of the styling can be copied from an Easy Posts template of your choice.
