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 $399 one-time).

Already a member? Log in below or here.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

You need to be logged in to view and post comments.
Not a member yet? Join here.
magnifiercross
>
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
%d bloggers like this: