chrisyau83

TimeNow

Display live, accurate clocks on your WordPress site without writing any JavaScript. Choose from four widget styles and customize colors, fonts, timezone, and format. The clock updates every second and respects daylight-saving transitions automatically.
<h4>Widget types</h4>
<ul>
<li>Text Clock — Plain-text format (“The time in London is currently 14:32:08 BST”). Great for inline use in posts and pages.</li>
<li>Digital Clock — Bold digital readout. Configurable size, color, 12/24h, optional date.</li>
<li>Word Clock — The classic 11×10 letter grid that spells out the time (“IT IS HALF PAST NINE”).</li>
<li>Analog Clock — Traditional clock face with hour, minute, and second hands.</li>
</ul>
<h4>How to use</h4>
Three ways to embed:
<ol>
<li>Gutenberg block — Add the “Time.now Clock” block in the editor. Configure via the block sidebar.</li>
<li>Shortcode — <code>[time_now_clock type="text-clock" iana_timezone="Europe/Paris"]</code> anywhere posts or pages support shortcodes.</li>
<li>Classic widget — Drop “Time.now Clock” into any widget area via Appearance > Widgets.</li>
</ol>
<h4>Privacy</h4>
The plugin embeds an <code><iframe></code> pointing at <code>https://time.now/widget/<type>/render/</code>. No JavaScript runs on your site. No analytics or tracking scripts are loaded by the plugin itself. The Time.now widget endpoint logs standard HTTP request information (IP, user agent, referer) for abuse prevention and aggregate stats — see https://time.now/info/terms-privacy for details.
<h4>Attribution</h4>
By default the plugin renders only the iframe — no visible “Powered by” link is shown. If you want to credit Time.now (which helps support the free service), enable the “Show attribution” option on any embed. The attribution is a single <code>nofollow</code> link to https://time.now/ below the clock.

Time.now Clock Widget

Embed beautiful, customizable clock widgets from Time.now on your WordPress site — text, word, digital, and analog clocks.

Bernhard Riedl

<ul>
<li>based on PHP timezones database (please read the <a href="https://wordpress.org/plugins/timezonecalculator/faq/" rel="ugc">FAQ</a> for further information)</li>
<li>fully settings page configurable with GUI or manually</li>
<li>easy to integrate (ships with multi/sidebar- and dashboard-widget functionality)</li>
<li>display clock in WordPress Admin Bar</li>
<li>possible to integrate in “Right Now” box or to display as widget on the dashboard and on the user’s profile page</li>
<li>Calculator section in Tools-Menu with individual timezone-selection for every user</li>
<li>optional Ajax refresh with jQuery</li>
<li>fully compatible with <a href="https://codex.wordpress.org/Administration_Over_SSL" rel="nofollow ugc">https/SSL/TLS-sites</a></li>
<li><a href="https://wordpress.org/plugins/timezonecalculator/other_notes/" rel="ugc">API for developers</a></li>
<li>fully multisite network compatible</li>
<li>clean uninstall</li>
</ul>
Plan your travels with the free <a href="https://www.journeycalculator.com/" rel="nofollow ugc">JourneyCalculator</a> which is based on TimeZoneCalculator.
Please find the version for WordPress
<ul>
<li>3.8 and higher <a href="https://downloads.wordpress.org/plugin/timezonecalculator.zip" rel="nofollow ugc">here</a></li>
<li>3.3 to 3.7 <a href="https://downloads.wordpress.org/plugin/timezonecalculator.wordpress3.3-3.7.zip" rel="nofollow ugc">here</a></li>
<li>2.8 to 3.2 <a href="https://downloads.wordpress.org/plugin/timezonecalculator.wordpress2.8-3.2.zip" rel="nofollow ugc">here</a></li>
<li>1.5 to 2.7 <a href="https://downloads.wordpress.org/plugin/timezonecalculator.wordpress1.5-2.7.zip" rel="nofollow ugc">here</a></li>
</ul>
Plugin’s website: <a href="https://www.bernhard-riedl.com/projects/" rel="nofollow ugc">https://www.bernhard-riedl.com/projects/</a>
Author’s website: <a href="https://www.bernhard-riedl.com/" rel="nofollow ugc">https://www.bernhard-riedl.com/</a> 
Attention! – Geeks’ stuff ahead! 😉
<h4>API</h4>
With TimeZoneCalculator 2.00 and higher you can also realize a html select which displays for example the airtime of your internet radio station or your broadcasts in your users’ local time. Another possibility for the usage of the upcoming function is the integration of date, time and timezone information into your travelling blog.
Parameters can either be passed <a href="https://codex.wordpress.org/Function_Reference/wp_parse_args" rel="nofollow ugc">as an array or a URL query type string (e.g. “display=0&format=0”)</a>. Please note that WordPress parses all arguments as strings, thus booleans have to be 0 or 1 if used in query type strings whereas for arrays <a href="https://secure.php.net/manual/en/language.types.boolean.php" rel="nofollow ugc">real booleans</a> should be used. – Furthermore you have to break your timezones with \n : <code>America/New_York;EST;EWT;New York, NY, US;New York, NY, US;0;0\nEurope/Vienna;;;sleep longer in winter;get up earlier to enjoy the sun;1;0</code> if you want to use different timezones in a query_string. In case you use an array, an array should also be used for the timezones.
<code>function $timezonecalculator->output($params=array())</code>
$params:
<ul>
<li>
<code>query_time</code>: any unix timestamp (where <code>-1262304000 <= query_time <= 2145916800</code>) or any English textual datetime description in the range of <code>1930-01-01</code> and <code>2038-01-01</code> which can be parsed with <a href="https://secure.php.net/manual/en/function.strtotime.php" rel="nofollow ugc">PHP’s strtotime function</a>; default is set to current UTC
</li>
<li>
<code>query_timezone</code>: origin-timezone of <code>query_time</code>; you can choose a <a href="https://secure.php.net/manual/en/timezones.php" rel="nofollow ugc">PHP timezone_string</a>; otherwise <code>UTC</code> will be used
</li>
<li>
<code>before_list</code>: default <code><ul></code>
</li>
<li>
<code>after_list</code>: default <code></ul></code>
</li>
<li>
<code>format_timezone</code>: default <code><li><abbr title="%name">%abbreviation</abbr>: %datetime</li></code>
</li>
<li>
<code>format_datetime</code>: default <code>Y-m-d H:i</code>
</li>
<li>
<code>timezones</code>: alternative timezones-array – each array entry has to be a string as described in the Manual Selection Section of the Admin Menu; default is the timezones-entries array which can be modified in the Admin Menu
</li>
<li>
<code>prefer_user_timezones</code>: prefer user set timezones – if they exist – to global or function call timezones; default is <code>false</code>
</li>
<li>
<code>user_id</code>: determines which user’s timezones should be used; not set as default -> use the timezones of the user who is currently logged in
</li>
<li>
<code>use_container</code>: if set to <code>true</code> (default value), the current UTC is used as <code>query_time</code> and the same selected timezones and format is used as set in the admin menu, TimeZoneCalculator wraps the output in a html div with the class <code>timezonecalculator-refreshable-output</code> – the class <code>timezonecalculator-output</code> will be used for all other output; if you set <code>use_container</code> to <code>false</code>, no container div will be generated
</li>
<li>
<code>display</code>: if you want to return the timezone-information (e.g. for storing in a variable) instead of echoing it with this function-call, set this to <code>false</code>; default setting is <code>true</code>
</li>
<li>
<code>format_container</code>: This option can be used to format the <code>div</code> container with css. Please note, that it should only be used to provide individual formats in case the class-style itself cannot be changed.
</li>
<li>
<code>no_refresh</code>: If set to true, TimeZoneCalculator will not produce any Ajax-Refresh-code, even if you have enabled the Ajax refresh in the admin menu.
</li>
</ul>
Example for including a world-clock in your <a href="https://codex.wordpress.org/Theme_Development" rel="nofollow ugc">post-template</a> (usually single.php or post.php in wp-content/themes) using <a href="https://codex.wordpress.org/Template_Tags/the_date" rel="nofollow ugc">WordPress the_date() function</a>:
Find something similar to
<pre><code>the_date();
</code></pre>
or
<pre><code>the_time();
</code></pre>
and replace it with
<pre><code><?php $timezonecalculator->output(array('query_time' => the_date('U', '', '', false))); ?>
</code></pre>
This outputs your selected timezones, whereas calculations are based on the timestamp of your post instead of using the current UTC.
<h4>Shortcodes</h4>
<a href="https://codex.wordpress.org/Shortcode_API" rel="nofollow ugc">How-to for shortcodes</a>
General Example:
Enter the following text anywhere in a post or page to inform the clan when to meet up again:
<pre><code>let's meet tomorrow for a new challenge at:

[timezonecalculator_output query_time="tomorrow 8pm" query_timezone="Europe/Vienna" timezones="Europe/Vienna\nAsia/Bangkok"]
</code></pre>
Available Shortcode:
<pre><code>timezonecalculator_output
</code></pre>
Invokes <code>$timezonecalculator->output($params)</code>. Please note that you have to use a query_string to select timezones which can be parsed into an associative array. – For example: <code>America/New_York;EST;EWT;New York, NY, US;New York, NY, US;0;0\nEurope/Vienna;;;sleep longer in winter;get up earlier to enjoy the sun;1;0</code>
<h4>Filters</h4>
<a href="https://codex.wordpress.org/Function_Reference/add_filter" rel="nofollow ugc">How-To for filters</a>
Available Filters:
<pre><code>timezonecalculator_defaults
</code></pre>
In case you want to set the default parameters globally rather than handing them over on every function call, you can add the <a href="https://codex.wordpress.org/Function_Reference/add_filter" rel="nofollow ugc">filter</a> <code>timezonecalculator_defaults</code> in for example timezonecalculator.php or your <a href="https://codex.wordpress.org/Writing_a_Plugin" rel="nofollow ugc">own customization plugin</a> (recommended).
Please note that parameters which you hand over to a function call (<code>$timezonecalculator->output</code>) will always override the defaults parameters, even if they have been set by a filter or in the admin menu.
<pre><code>timezonecalculator_dashboard_widget
</code></pre>
Receives an array which is used for the dashboard-widget-function call to <code>$timezonecalculator->output($params)</code>. <code>display</code> and <code>use_container</code> will automatically be set to true.
<pre><code>timezonecalculator_dashboard_right_now
</code></pre>
Receives an array which is used for the right-now-box-function call to <code>$timezonecalculator->output($params)</code>. <code>display</code> and <code>use_container</code> will automatically be set to true.
<pre><code>timezonecalculator_world_clock_tools_page
</code></pre>
Receives an array which is used for the world-clock-function call on the tools-page to <code>$timezonecalculator->output($params)</code>. <code>display</code>, <code>use_container</code> and <code>prefer_user_timezones</code> will automatically be set to true.
<pre><code>timezonecalculator_user_profile
</code></pre>
Receives an array which is used for the user-profile-function call to <code>$timezonecalculator->output($params)</code>. <code>display</code>, <code>use_container</code> and <code>prefer_user_timezones</code> will automatically be set to true.
<pre><code>timezonecalculator_admin_bar_clock
</code></pre>
Receives an array which is used for the admin-bar-clock-function call to <code>$timezonecalculator->output($params)</code>. <code>display</code> will automatically be set to false and <code>use_container</code> to true. Moreover, the <code>timezones</code> will be set to Local_WordPress_Time. The filter <code>timezonecalculator_admin_bar_clock_format_container</code> will be used as default format for the clock.
<pre><code>timezonecalculator_admin_bar_clock_format_container
</code></pre>
Receives a string which represents the container style.
<pre><code>timezonecalculator_admin_bar_clock_position
</code></pre>
Position of the clock in the Admin Bar (see <code>wp-includes/class-wp-admin-bar.php</code> function <code>add_menus</code>). Default is <code>1000</code> which is the last position.
<pre><code>timezonecalculator_calculator
</code></pre>
Receives an array which is used for the calculator-page function call to <code>$timezonecalculator->output($params)</code>. <code>display</code>, <code>use_container</code> will automatically be set to true.
<pre><code>timezonecalculator_calculator_timezone
</code></pre>
Receives a timezone-string which is used for the calculator-page.
<pre><code>timezonecalculator_calculator_format_date
</code></pre>
Receives an array whereas each entry represents a date-format. The first date-format will be used as display-format in the textfield.
<pre><code>timezonecalculator_calculator_format_time
</code></pre>
Receives a string which is used to determine whether to use 12 or 24-hour clock. In case this string contains <code>a</code> or <code>A</code>, the 12-hour clock will be preferred.

TimeZoneCalculator

Calculates, displays and automatically updates times and dates in different timezones with respect to daylight saving.

Time.now Clock Widget vs TimeZoneCalculator