This is meant for secondary loops like when you want to show the future events on say, the homepage or another static Page. For limiting the events on the events archive page to future ones, follow this tutorial instead.
On the desktop layout, we shall show the first event on the left in a larger size with the other two events at the right one below the other using CSS Grid. Event start date with time and name will be overlayed at the bottom left of the event's featured image.
At smaller viewport widths, we shall show them one below the other with a smaller square images.
where the list of events is like this as on 19 Sep 2021 is:
Two methods are provided:
- Easy Posts which uses the traditonal
- Code Block which uses the
Add a Section and inside that, an Easy Posts component.
Set the WP Query to advanced and edit the custom settings of the query.
Add the parameters like this:
This is a premium members-only content.
To view the rest of the content, please sign up for membership ($47/month or $599 one-time).
Already a member? Log in below or here.