Timezone-adjusted release date and time display for LearnDash lesson schedule
By the end of this tutorial, your the release date/time of your scheduled lessons will be localized to the visitor’s computer!
You can see a live demo on our test site.
When I was a kid living in the DC area, my family would occasionally watch Jeopardy (RIP, Alex Trebek).
I recall it aired every weeknight at 7:30 PM. Being in the DC area, I was in the Eastern Standard Time (EST) zone.
Sometimes, we’d visit family in the Central Standard Time (CST) zone, which means the clocks move back by one hour.
Jeopoardy would still air at the same absolute time, as in I couldn’t teleport to CST and somehow get an early showing relative to EST.
Although when Jeopardy started in CST, the clock read 6:30 PM.
Why am I telling you this story about Jeopardy
Because I want to make the scope of this tutorial very clear.
This will only affect the display of time, based on the timezone according to the computer or device the online course is accessed from.
This will not have any affect on the absolute time a lesson is released. That would be very complicated and not something I would recommend without careful consideration.
Step #1: Set up your test environment
We’re going to need the following:
- A WordPress timezone setting set to “UTC” (no offset, no matter where you happen to be located).
- One course, with at least two scheduled lessons with specific date scheduling.
- One non-admin user, who has not yet progressed to the first scheduled lesson referenced in the list item directly above.
When you’re done, you should see something like the following from the perspective of that non-admin user.
Why UTC time
- Keep my WordPress timezone setting set to my local time (New York / EST)
In my search for a library, I found Luxon. Their documentation reads:
Don’t make servers think about local times. Configure them to use UTC and write your server’s code to work in UTC. Times can often be thought of as a simple count of epoch milliseconds; what you would call that time (e.g. 9:30) in what zone doesn’t (again, often) matter.
So when I set my WordPress timezone setting to my local time, I was going against the above guidance because I was making servers think about local times.
Now this does have ramifications beyond our specific use case. Whenever you see time anywhere in WordPress, it’ll show you UTC time.
When it comes to the user experience of showing a student their local time when it comes to scheduled lesson releases, I believe the pro outweighs the con.
Step #2: Add a snippet
The goal here is for the user’s browser to automatically adjust the UTC time to local time.
To get started, add this PHP snippet to your WordPress site:
Explanation of the snippet
It comes in two parts.
Part 1: A wrapper for the date/time
For example, from the string “Available on May 1, 2021, 11:30 AM” I needed to pick out just the “May 1, 2021, 11:30 AM” part.
The obvious path forward would be to simply wrap that part in an HTML element.
Turned out that was a bit too tall of a task, because it would’ve involved circumventing a few levels of WordPress escaping functions, and any HTML I tried to output got escaped.
Instead, I decided to wrap the date [within bracket characters].
I also need to insert the letters “UTC” before the closing bracket character.
Basically, to cite one example, I want to change:
Available on May 1, 2021, 11:30 AM
Available on [May 1, 2021, 11:30 AM UTC]
Part 2: The actual timezone adjustment
First, we define variables like the aforementioned “start character” ([) and the “end character” (]) to pluck out the actual date/time string.
Step #3: Confirm the snippet works
You can zero in on one time.
In my case, I literally wrote out the UTC time as my lesson title to make it easy to remember.
I like to use Wolfram Alpha for tests like this.
So I typed in “May 1, 2021 11:30 UTC in EDT” and confirmed that that time does indeed equal 7:30 AM in EDT.
Quick thanks to Shakeel of How-To WP for helping me test!
Time is complicated and it helps to have extra sets of eyes to make sure the timezone-adjusted strings display as expected.