Published on Aug 17, 2020

Countdown Timer for Posts in Oxygen

Sridhar Katakam

In the comments section of Countdown Timer using ACF in Oxygen tutorial a member asked:

can we have the ACF time picker field elsewhere than in the Options? And how to do if i want to have more than 1 countdown on a page (within a Oxygen repeater) with time deadline located in ACF field (not in Options)?

In this members-only tutorial we shall

  • add "Event Date" custom field of the type Date Time Picker to Event Custom Post Type
  • show 5 latest events using a Repeater
  • use pre_get_posts to limit the events to only those that are future/upcoming i.e., having the Event Date higher than today
  • set the event date and time info as the value of a custom data attribute, data-countdown-date for each event
  • add JavaScript to loop over the events list, pull the data attribute's value and setup countdown timer for each event

Step 1

Install and activate Advanced Custom Fields.

Go to Custom Fields > Add New.

Create a group named say, Event Fields .

Add a field having the label of say, Event Date and set the field type as "Date Time Picker".

Set your desired Display and Return formats. It need not be F j, Y H:i:s as mentioned in the earlier tutorial.

Set the field group to appear on Event CPT entries.

Step 2

Edit the Page where you would like to display the upcoming events with Oxygen.

Add a Section having a Repeater.

Set the query to this manual query:

post_type=event&posts_per_page=5&no_found_rows=true

Select the Repeater Div and add the post title and link it to permalink.

Step 3

Let us change the query so it only pulls future events.

Add a Code Block above the Repeater.

PHP & HTML:

This is a premium members-only content.

To view the rest of the content, please sign up for membership ($47/month or $499 one-time).

Already a member? Log in below or here.

tagschevron-leftchevron-rightchainangle-rightangle-upangle-downfolder-omagnifiercrossmenuchevron-downarrow-right