How to Add a World Clock to WordPress (2026 Guide)

Why Add a World Clock to Your WordPress Site?

If your business works with clients, customers, or team members across different time zones, a world clock is one of the most useful widgets you can add to your site. Here's why:

• Build trust with global visitors. When someone from Tokyo visits your site and sees their local time displayed, it signals that you understand their world.
• Reduce "what time is it there?" inquiries. A visible clock answers the most common question international visitors have.
• Showcase your global reach. If you serve customers worldwide, a world clock reinforces that you're a global business.
• Help remote teams coordinate. If you have a team page, showing multiple time zones helps everyone stay synchronized.
• Improve time on page. A live, ticking clock gives visitors a reason to stay on your page longer -- and Google notices engagement signals.

The best part? It takes less than 5 minutes to set up, and it's completely free.

3 Ways to Add a World Clock (Compared)

There are three main approaches. Here's a quick comparison:

We'll cover all three methods below. Start with whichever one fits your setup.

Method 1: The Easy Way (Free WordPress Plugin)

This is the fastest and most flexible method. Our free WordPress plugin gives you a world clock with 682 cities, dark/light themes, three sizes, and a native Gutenberg block.

Step 1: Download the Plugin

Download the ZIP file from our WordPress plugin page. The file is only 9KB.

Step 2: Install in WordPress

1. Log in to your WordPress admin dashboard
2. Go to Plugins → Add New
3. Click Upload Plugin at the top
4. Select the ZIP file and click Install Now
5. Click Activate Plugin

Step 3: Add the Clock

You have three options:

Option A: Shortcode (any page or post)

[world_time_clock timezone="America/New_York"]

Option B: Widget (sidebar or footer)

1. Go to Appearance → Widgets
2. Click + to add a new block
3. Search for "World Time Clock"
4. Configure timezone, theme, and size in the block settings

Option C: Gutenberg Block (block editor)

1. Edit any post or page
2. Click + to add a new block
3. Search for "World Time Clock"
4. Use the sidebar panel to configure your clock

Method 2: Shortcode (For Developers)

If you prefer to add the clock directly in your theme template or want more control, use the shortcode. This works even without the plugin if you add the following code to your theme's functions.php:

// Add World Time Clock shortcode
function wts_world_clock_shortcode($atts) {
    $atts = shortcode_atts(array(
        'timezone' => 'America/New_York',
        'theme' => 'dark',
        'size' => 'medium',
        'show_date' => 'true',
    ), $atts, 'world_time_clock');
    
    $sizes = array(
        'small' => array('width' => 220, 'height' => 120),
        'medium' => array('width' => 300, 'height' => 160),
        'large' => array('width' => 420, 'height' => 220),
    );
    
    $dims = isset($sizes[$atts['size']]) ? $sizes[$atts['size']] : $sizes['medium'];
    $params = http_build_query(array(
        'tz' => $atts['timezone'],
        'theme' => $atts['theme'],
        'size' => $atts['size'],
        'date' => $atts['show_date'] === 'false' ? '0' : '1',
    ));
    
    $url = 'https://worldtimessync.com/widget-embed.html?' . $params;
    
    return '<iframe src="' . esc_url($url) . '" ' .
           'width="' . $dims['width'] . '" ' .
           'height="' . $dims['height'] . '" ' .
           'frameborder="0" scrolling="no" ' .
           'style="border:none;border-radius:12px;overflow:hidden;" ' .
           'title="World Time Clock" loading="lazy"></iframe>';
}
add_shortcode('world_time_clock', 'wts_world_clock_shortcode');

Then use it anywhere:

// In a post or page
[world_time_clock timezone="Europe/London" theme="light" size="large"]

// In a PHP template
<?php echo do_shortcode('[world_time_clock timezone="Asia/Tokyo"]'); ?>

Method 3: Embed Code (Any Website)

Not on WordPress? No problem. You can embed the world clock on any website -- Wix, Squarespace, Shopify, Webflow, or plain HTML. Just paste this code:

<!-- World Time Sync Widget -->
<div id="wts-widget"></div>
<script src="https://worldtimessync.com/widget.js" 
        data-timezone="America/New_York" 
        data-theme="dark" 
        data-size="medium">
</script>

That's it. The script automatically creates the clock widget and inserts it into your page.

Available Options

• data-timezone -- Any IANA timezone (e.g., Europe/London, Asia/Tokyo)
• data-theme -- dark or light
• data-size -- small, medium, or large
• data-show-date -- true or false

Customizing Your Clock

Choosing a Timezone

The clock supports any of 682 cities worldwide. Here are some popular choices:

Choosing a Theme

Dark theme works best on dark backgrounds and looks modern and sleek. Light theme is better for light-colored sites and offers higher contrast.

Choosing a Size

• Small (220×120) -- Perfect for sidebars, footers, and compact layouts
• Medium (300×160) -- The default. Great for content areas and hero sections
• Large (420×220) -- Best for feature sections and landing pages

Frequently Asked Questions

Is the WordPress plugin really free?

Yes. No premium tier, no API key, no signup, no hidden costs. It's free forever.

How many cities are supported?

682 cities across all time zones worldwide. From New York to Tokyo to Sydney and everywhere in between.

Does it automatically handle Daylight Saving Time?

Yes. The clock uses the browser's built-in timezone database, so DST transitions are handled automatically.

Will it slow down my site?

No. The clock loads in a lightweight iframe (under 5KB) and uses lazy loading. It won't affect your PageSpeed score.

Can I show multiple clocks at once?

Yes. Just add multiple shortcodes or widgets with different timezones. For example, show New York, London, and Tokyo side by side.

Does it work with page builders like Elementor?

Yes. Use the shortcode [world_time_clock] in any Elementor text widget, or use the Gutenberg block in the WordPress block editor.

Can I customize the colors?

The plugin offers dark and light themes out of the box. For custom colors, use the embed code method with inline styles on the iframe wrapper.