Dashboard Clock for WordPress

csdev-clock.php

<?php
/**
 * Plugin Name: Dash Clock
 * Description: Displays the current time in the WordPress dashboard top bar, including the timezone offset.
 * Version: 1.2
 * Author: charly@csdev
 */

/**
 * Add the time display to the admin bar
 */
add_action('admin_bar_menu', function ($wp_admin_bar) {
    $wp_admin_bar->add_node(array(
        'id'    => 'current-time',
        'title' => '<span id="current-time-display" style="cursor: pointer;"></span>',
    ));
}, 100);


/**
 * Just for the TZ/OFFSET label
 * @return void 
 */
function csdev_get_tz_city() {
    $tzstring = get_option( 'timezone_string' );
    if (strpos($tzstring, '/') !== false) {
        $parts = explode('/', $tzstring);
        $city = end($parts);
    } else {
        $city = $tzstring;
    }    
    $city = str_replace('_', ' ', $city); 
    return $city;
}

function csdev_custom_timezone_string() {
    $timezone_string  = csdev_get_tz_city();
    $timezone_offset  = (float) get_option( 'gmt_offset' );
    $offset_symbol    = strpos($timezone_offset,'-') === false ? '+' : null;
    $timezone = $timezone_string ? $timezone_string . ' UTC ' . $offset_symbol . $timezone_offset : 'UTC ' . $offset_symbol .  $timezone_offset;

    return $timezone;
}

/**
 * Output JavaScript in the footer of the admin
 */
add_action('admin_footer', function () {
    $tzstring = wp_timezone_string();
    $timezone = new DateTimeZone($tzstring);
    $datetime = new DateTime('now', $timezone);
    $offset = $timezone->getOffset($datetime) / 3600;
    $offset = ($offset > 0 ? '+' : '') . $offset;
?>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            function getCookie(name) {
                let value = `; ${document.cookie}`;
                let parts = value.split(`; ${name}=`);
                if (parts.length === 2) return parts.pop().split(';').shift();
            }

            function setCookie(name, value, days) {
                let expires = "";
                if (days) {
                    let date = new Date();
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                    expires = "; expires=" + date.toUTCString();
                }
                document.cookie = name + "=" + (value || "") + expires + "; path=/";
            }

            function updateTime() {
                var useUTC = getCookie('useUTC') === 'true';
                var options = {
                    hour: 'numeric',
                    minute: 'numeric',
                    second: 'numeric',
                    hour12: true
                };
                if (useUTC) {
                    options.timeZone = 'UTC';
                } else {
                    options.timeZone = '<?php echo wp_timezone_string(); ?>';
                }
                var formatter = new Intl.DateTimeFormat([], options);
                var clockEl = document.getElementById('current-time-display');
                var theDate = formatter.format(new Date()) + (useUTC ? ' (UTC)' : ' (<?= csdev_custom_timezone_string() ?>)');
                clockEl.innerText = theDate;
                clockEl.style.color = useUTC ? 'orange' : 'inherit';

                var dateOptions = {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric',
                    timeZone: options.timeZone
                };
                var dateFormatter = new Intl.DateTimeFormat([], dateOptions);
                clockEl.title = dateFormatter.format(new Date());
            }

            // Update the time immediately and then every second
            updateTime();
            setInterval(updateTime, 1000);

            document.getElementById('current-time-display').addEventListener('click', function() {
                var useUTC = getCookie('useUTC') === 'true';
                setCookie('useUTC', !useUTC, 365);
                updateTime();
            });
        });
    </script>
<?php
});
?>