Live Apple Analog Clock to Your WordPress Widget (Brussels Time)

🕰 WordPress Sidebar Widget: Apple Analog Clock (Brussels Time)

🧩 This post teaches you how to create a WordPress sidebar widget that displays a live, Apple-style analog clock showing Brussels time and your site name. Perfect for blogs, business sites, or news portals.

🎯 What You’ll Build

A fully functional sidebar widget that shows:

• A live analog clock
• Time adjusted for the Brussels time zone
• Your site title displayed in the clock face

It runs on pure HTML, CSS, and JavaScript – no external dependencies.

📜 Full Sidebar Widget Plugin Code

Save the following in a file called apple-clock-sidebar.php and place it in /wp-content/plugins/apple-clock-sidebar/.

<?php
/**
 * Plugin Name: Apple Analog Clock Sidebar Widget (Brussels Time)
 * Description: Displays an Apple-style analog clock in the sidebar with Brussels time and site branding.
 * Version: 1.0
 * Author: HelpZone
 */

class Apple_Analog_Clock_Widget extends WP_Widget {

    public function __construct() {
        parent::__construct(
            'apple_analog_clock_widget',
            __('🕰 Apple Analog Clock (Brussels Time)', 'text_domain'),
            array('description' => __('Apple-style analog clock with Brussels time for sidebars.', 'text_domain'))
        );
    }

    public function widget($args, $instance) {
        $site_name = get_bloginfo('name');
        echo $args['before_widget'];
        ?>
        <style>
            .hz-clock {
                width: 200px;
                height: 200px;
                background: #fff;
                border: 6px solid #000;
                border-radius: 50%;
                box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
                position: relative;
                margin: 0 auto 10px;
            }

            .hz-clock .center {
                width: 8px;
                height: 8px;
                background: #000;
                border-radius: 50%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 10;
            }

            .hz-hand {
                position: absolute;
                bottom: 50%;
                left: 50%;
                transform-origin: bottom;
            }

            .hz-hand.hour { height: 45px; width: 4px; background: #000; z-index: 4; }
            .hz-hand.minute { height: 65px; width: 3px; background: #555; z-index: 3; }
            .hz-hand.second { height: 70px; width: 1px; background: #d00; z-index: 2; }

            .hz-tick {
                position: absolute;
                width: 3px;
                height: 8px;
                background: #000;
                top: 6px;
                left: 50%;
                transform-origin: center 94px;
                transform: translateX(-50%) rotate(0deg);
            }

            .hz-brand-text {
                position: absolute;
                top: 40px;
                left: 50%;
                transform: translateX(-50%);
                font-size: 16px;
                color: #000;
                font-weight: bold;
                font-family: "Arial", sans-serif;
                white-space: nowrap;
                text-align: center;
            }
        </style>

        <div class="hz-clock" id="hz-clock-widget">
            <div class="center"></div>
            <div class="hz-hand hour" id="hz-hourHand-widget"></div>
            <div class="hz-hand minute" id="hz-minuteHand-widget"></div>
            <div class="hz-hand second" id="hz-secondHand-widget"></div>
            <div class="hz-brand-text"><?php echo esc_html($site_name); ?></div>
        </div>

        <script>
        (function(){
            const clock = document.getElementById('hz-clock-widget');
            for (let i = 0; i < 12; i++) {
                const tick = document.createElement('div');
                tick.className = 'hz-tick';
                tick.style.transform = `translateX(-50%) rotate(${i * 30}deg)`;
                clock.appendChild(tick);
            }

            const hourHand = document.getElementById('hz-hourHand-widget');
            const minuteHand = document.getElementById('hz-minuteHand-widget');
            const secondHand = document.getElementById('hz-secondHand-widget');

            function updateClock() {
                const now = new Date();
                const brusselsTime = new Date(now.toLocaleString("en-US", {timeZone: "Europe/Brussels"}));

                const sec = brusselsTime.getSeconds();
                const min = brusselsTime.getMinutes();
                const hr = brusselsTime.getHours();

                const secDeg = sec * 6;
                const minDeg = min * 6 + sec * 0.1;
                const hrDeg = ((hr % 12) + min / 60) * 30;

                secondHand.style.transform = `rotate(${secDeg}deg)`;
                minuteHand.style.transform = `rotate(${minDeg}deg)`;
                hourHand.style.transform = `rotate(${hrDeg}deg)`;
            }

            setInterval(updateClock, 1000);
            updateClock();
        })();
        </script>
        <?php
        echo $args['after_widget'];
    }
}

function register_apple_analog_clock_widget() {
    register_widget('Apple_Analog_Clock_Widget');
}
add_action('widgets_init', 'register_apple_analog_clock_widget');

🚀 How to Install (Step by Step)

1. Go to wp-content/plugins/
2. Create a folder: apple-clock-sidebar
3. Inside it, create apple-clock-sidebar.php
4. Paste the code above
5. In WordPress Admin → Plugins → Activate Apple Analog Clock Sidebar Widget
6. Go to Appearance → Widgets or the Site Editor (block themes) and add the widget to your Sidebar or Footer area

🧠 Why Site Name is Used

We call get_bloginfo('name') to dynamically fetch and display your site’s title from WordPress Settings. This makes the clock instantly reflect your site's identity no hardcoding needed!

🎁 Final Insights

With this widget, you're not just adding functionality you're adding personality to your site. Whether it's for fun, branding, or just visual flair, this Apple-style clock fits neatly into any sidebar and reminds visitors of your professionalism.

🔔 For more tutorials like this, consider subscribing to our blog.
📩 Do you have questions or suggestions? Leave a comment or contact us!
🏷️ Tags: WordPress widgets, analog clock, sidebar plugin, site title, Brussels time, Apple clock, real-time clock, frontend widget, wp_widget, timezone clock
📢 Hashtags: #WordPressWidgets, #AnalogClock, #SidebarDesign, #CustomBranding, #SiteTitle, #BrusselsTime, #FrontendTools, #MinimalWidgets, #HelpZone, #AppleStyleUI