Ravi Kiran Katha

WordPress has a site-level timezone setting configured from the admin back-end. All dates and times displayed on the front-end are typically displayed in this timezone.
This plugin enables the display of dates/times in the front-end using the browser’s timezone. This is done by overriding the WordPress’s ‘timezone_string’ and ‘gmt_offset’ options to match the user’s timezone for the duration of a particular request 
ONLY on the front-end interface.
<h4>Browser Timezone Detection</h4>
The browser’s timezone is detected using one of the following two methods
<ol>
<li><a href="http://pellepim.bitbucket.org/jstz/" rel="nofollow ugc">jsTimezoneDetect</a> (default)</li>
<li><a href="http://caniuse.com/geolocation" rel="nofollow ugc">HTML5 Geolocation API</a> and <a href="https://developers.google.com/maps/documentation/timezone" rel="nofollow ugc">Google Timezone API</a></li>
</ol>
jsTimezoneDetect (default) 
 This is the default timezone detection mechanism. Please refer to the script <a href="http://pellepim.bitbucket.org/jstz/" rel="nofollow ugc">home page</a> 
for the compatibility and other notes
HTML5 Geolocation API 
 Detects the current geo-location using <a href="http://caniuse.com/geolocation" rel="nofollow ugc">navigator.geolocation.getCurrentPosition</a>. The location thus detected will be sent to the <a href="https://developers.google.com/maps/documentation/timezone" rel="nofollow ugc">Google Timezone API</a> 
which returns the timezone id – similar to “Asia/Kolkata”.
This method requires you to
<ul>
<li>Enable the “Google Timezone API” option on the plugin options page</li>
<li>Specify a valid <a href="https://developers.google.com/maps/documentation/timezone/get-api-key" rel="nofollow ugc">Google API Key</a>
<ul>
<li>The key should be a browser key</li>
<li>The “Accepted HTTP Referrers” should include the domain name used by the hosting wordpress site or left blank to allow all referrers</li>
</ul>
</li>
</ul>
If the required options for the usage of Google Timezone API are not met, the detection mechanism falls back to the default one.
<h4>Post Timezone Detection</h4>
<ul>
<li>If the browser’s timezone id is not detected successfully, everything else behaves as if this plugin is not installed.</li>
<li>If the browser’s timezone id is detected, the following actions take place
<ul>
<li>A cookie will be set in the browser, based on the cookie options specified on the plugin options page</li>
<li>If a cookie already exists previously with the same id, no action is taken</li>
<li>If a cookie doesn’t already exist previously or exists with a different timezone id, then a window.reload is triggered to refresh the page so that the dates/times on the page are updated</li>
</ul>
</li>
</ul>
<h4>EventON Hook</h4>
This plugin provides a feature to hook into the EventON plugin. When enabled, all EventON dates/times are updated to reflect the browser’s timezone.
<h4>Shortcodes</h4>
This plugin defines the below shortcodes
<ol>
<li>[wp_user_timezone_id] => Returns the timezone id of the browser or null if not available.</li>
<li>[wp_user_timezone_offset] => Returns the timezone’s gmt offset in hours of the browser or null if not available.</li>
</ol>
<h4>Options</h4>
This plugin defines the below options to retrieve the original timezone_string and gmt_offset defined at the site level
<ol>
<li>get_option( ‘site_timezone_string’ ) => Returns the original timezone_string option for the site</li>
<li>get_option( ‘site_gmt_offset’ ) => Returns the original gmt_offset option for the site</li>
</ol>
<h4>Actions/Hooks</h4>
This plugin defines the below filters/hooks
<ol>
<li>apply_filters( ‘wp_user_timezone_id’, $tz_id ) => Allows you to override the timezone string determined by the plugin. This filter can be used to apply user’s timezone preference. If any plugin or wordpress core implements a feature to accept and store user’s preferred timezone, the ‘wp_user_timezone_id’ can be used to apply that timezone value to the front-end. Reference: <a href="https://core.trac.wordpress.org/ticket/18146" rel="nofollow ugc">Add user-level timezone setting</a>).</li>
</ol>
<h4>Admin Backend Dates/Times</h4>
Important: The admin back-end is not modified by this plugin. All dates/times displayed in the back-end are still in the original timezone specified by the WordPress General Settings.

WP User Timezone

Magnificent

WP User Timezone displays the front-end dates & times in the browser's local timezone without actually modifying your database.

Sanket Parmar

Enable world clocks for the sites with different timezones, with a custom block for the WordPress block editor (Gutenberg).
<h3>Overview</h3>
World clocks are an essential tool for tracking the current time across different time zones around the globe. They are widely used in various contexts, such as international business, travel, and global communication.
Inspiration: <a href="https://www.commoninja.com/widgets/world-clock/wordpress" rel="nofollow ugc">World Clock for WordPress</a>
<h3>Configuration</h3>
There are two blocks available with this plugin:
<ol>
<li>World Clocks – The parent block consists of different clocks.</li>
<li>Single Clock – The single (child) clock block which can be added inside the World Clocks block.</li>
</ol>
<h3>Block: World Clocks (Parent Block)</h3>
<h3>Insert World Clocks Block</h3>
Try to search for World Clocks block while adding a new block to the block editor.
You can find various methods to insert a block into the block editor using this documentation: <a href="https://wordpress.org/documentation/article/adding-a-new-block/" rel="ugc">Adding a new block</a>.
<h3>Select Layout</h3>
Once a block is inserted, it will ask you to select a layout.
There are four layouts:
<ol>
<li>Digital Row – Default : This will show world clocks as digital clocks in rows.</li>
<li>Digital Column : This will show world clocks as digital clocks in columns.</li>
<li>Clock : This will show world clocks as analog clocks in columns with timezone showing below the clock.</li>
<li>Clock Reverse : This will show world clocks as analog clocks in columns with timezone showing above the clock.</li>
</ol>
You can also skip selecting a layout, and it will be set to default layout: Digital Row
You will be able to change the layout from the block settings even after you have selected one or skipped.
<h3>Block Settings</h3>
The World Clocks block has three settings panel:
<ol>
<li>Visibility Settings</li>
<li>Layout</li>
<li>Marks Format</li>
</ol>
<h3>Visibility Settings</h3>
The Visibility Settings panel has different options based on the selected layout.
<ul>
<li>
Clocks per row
<ul>
<li>When the selected layout is Digital Column, Clock or Clock Reverse, this setting will be shown to manage the number of clocks in a single row. You can show up to 4 in a single row. Default is 2.</li>
</ul>
</li>
<li>
Stack on mobile
<ul>
<li>When the selected layout is Digital Column, Clock or Clock Reverse, this setting will be shown to manage the stacking of the clock cloumns. If enabled, the clock columns will be stacked for below 768px device sizes. Default is enabled.</li>
</ul>
</li>
<li>
Show Clocks AmPm Indicator
<ul>
<li>When the selected layout is Clock or Clock Reverse, this setting will be shown. If enabled, it will show AM/PM indicator inside the clock face. Default is enabled.</li>
</ul>
</li>
<li>
Show Digital Time
<ul>
<li>When the selected layout is Clock or Clock Reverse, this setting will be shown. If enabled, it will show digital clock as well right below/above the analog clock depending on the layout. Default is disabled.</li>
</ul>
</li>
<li>
Time Format
<ul>
<li>When the Show Digital Time setting is enabled or the selected layout is Digital Row or Digital Column, this setting will be shown. It allows to show digital time in allowed time formats. Default is h:i:s A, i.e., 01:01:01 AM.</li>
<li>Reference for the <a href="https://wordpress.org/documentation/article/customize-date-and-time-format/" rel="ugc">time format string</a>.</li>
<li>The date format keys (“d”, “j”, “S”, “l”, “D”, “m”, “n”, “F”, “M”, “Y”, “y”, “c”, “r”, “U”) are not allowed in time format.</li>
</ul>
</li>
<li>
Show Date
<ul>
<li>This setting will be shown with all the layouts. If enabled, it will show the date right below/above the analog/digital clock depending on the layout. Default is disabled.</li>
</ul>
</li>
<li>
Date Format
<ul>
<li>When the Show Date setting is enabled, this setting will be shown with all the layouts. It allows to show the date in allowed date formats. Default is Y-m-d, i.e., 2024-01-01.</li>
<li>Reference for the <a href="https://wordpress.org/documentation/article/customize-date-and-time-format/" rel="ugc">date format string</a>.</li>
<li>The time format keys (“a”, “A”, “g”, “h”, “G”, “H”, “i”, “s”, “T”, “c”, “r”, “U”) are not allowed in date format.</li>
</ul>
</li>
</ul>
<h3>Layout</h3>
There are four available layouts to choose from: 
1. Digital Row – Default : This will show world clocks as digital clocks in rows. 
2. Digital Column : This will show world clocks as digital clocks in columns. 
3. Clock : This will show world clocks as analog clocks in columns with timezone showing below the clock. 
4. Clock Reverse : This will show world clocks as analog clocks in columns with timezone showing above the clock.
<h3>Marks Format</h3>
This setting panel will only appear if the selected layout is Clock or Clock Reverse.
There are three available options to choose from: 
1. Number – Default : This will show the marks as numbers in analog clock. 
2. Combine : This will show the marks as combined in analog clock. The numbers – 3, 6, 9 and 12 – will be shown as numbers, and the rset will be show as a line. 
3. Line : This will show the marks as line in analog clock.
<h3>Block: Single Clock (Child Block)</h3>
You can insert Single Clock block as many as you’d like inside the parent World Clocks block.
<h3>Select Timezone</h3>
You can select any timezone from the available list by just clicking on the timezone textbox and start typing. You can remove existing selected timezone and search for more.
A custom timezone selector with autocomplete is created for this. A custom helper method outputs the available timezones, similarly <a href="https://developer.wordpress.org/reference/functions/wp_timezone_choice/" rel="nofollow ugc">wp_timezone_choice()</a>.
<h3>Timezone Label</h3>
You can override the default timezone label with your own.

World Clocks

Enable world clocks for the sites with different timezones, with a custom block for the WordPress block editor (Gutenberg).

WP User Timezone vs World Clocks