World Clock Widget

World Clock Widget for WordPress

A widget that can be easily set to display date and time of multiple timezones. The javascript function is taken from Proglogic and is written by Stijn Strickx. The code is then modified to fit widget format.

The Latest Version – 1.0.0 (for WordPress 3.2.1)

  • Global settings for widget title, date and time format, and clock alignment.
  • Add function.
  • Edit function.
  • XML based time zone data.

Download the Latest Version

Go to World Clock Widget download page at WordPress.org.

Installation

  1. Download world-clock-widget plugin and unzip it.
  2. Upload the folder world-clock-widget to your WP plugin folder /wp-content/plugins/ directory.
  3. Go to Plugins > Installed, activate the plugin.
  4. Go to Appearance > Widgets, add the widget to a sidebar and save.
  5. Check the Frequently Asked Questions to learn how to add, edit and remove clocks.

Frequently Asked Questions

Screenshot?

World Clock Widget Version 0.8.0
World Clock Widget in WordPress Admin

What is Daylight Saving Time?

Daylight saving time is the convention of advancing clocks so that afternoons have more daylight and mornings have less. Click here for more information

Does world clock widget support Daylight Saving Time?

At the moment world clock widget supports only North America Region, i.e. Alaska, Atlantic time, Central time, Eastern time, Indiana (East), Mexico, Mountain time and Pacific time. More regions will be added in the future.

Does world clock widget cater the Daylight Saving Time for 2010?

Daylight Saving Time changes on yearly basis, at the moment world clock widget only supports year of 2009. Support for multiple years will be added in the future.

I go to the world clock widget control, how do I add a new clock?

Type your City name (for display purpose, name it whatever you want); Select yourTimezone; (Optional) Tick the Daylight Saving Time; Click Save.

How do I remove the existing clock(s)?

Under the Existing Clock, tick Remove (your_city_name); Click Save.

How do I edit the existing clock?

Under the Existing Clock, click on the clock that you want to edit; Click Save.

Advertisements
31 Responses “World Clock Widget” →

  1. Anonymous

    March 30, 2010

    I really wanted to try this, but I can’t. When I tried to activate it at first I got a chaining error (my webhost uses PHP4). I fixed that in the PHP code and it activated, but now it won’t let me create a new clock. Unfortunately I have neither the time nor the PHP knowledge to fix this. I thought you’d want to be aware that this doesn’t seem to work with PHP4, or perhaps some other configuration problem at my webhost, but I’m betting on PHP4.

    Reply
    • Yes, the world clock widget is written using PHP5. It is kind of odd to know that your webhost provides only PHP4. Most of webhosts provide PHP5.

      Reply

      • Anonymous

        March 31, 2010

        Hello again. This is the same guy as before. It turns out that while my webhost is PHP4 by default, it’s possible to use PHP5 instead, which I did. The clock still didn’t work, though, since my host has URL file-access disabled. Changing the line
        $doc->load( $this->pluginurl . ‘/worldclock.xml’ );
        to
        $doc->load( WP_PLUGIN_DIR . ‘/world-clock-widget/worldclock.xml’ );
        in worldclock.php fixed my problem though, and now it’s working great. Thanks for making it.


  2. bertani

    April 1, 2010

    Hi Alex,

    Sorry for the double post, but my first comment ignores the words with a special character.

    I tried to test your world clock widget (version 0.7.0 and v0.7.1) , but the widget ignores the settings “dststart” and “dstend” in the worldclock.xml file.

    Also on your site ” http://xandertan.selfip.org/dev/wp/2_8_0/ ” the dst function (->San Francisco) does not switch the displayed time, if i choose a date/time before or behind “dststart” / “dstend”. (Tested also with Pacific Time in my own blog with several years 2009 and 2010.)

    For Example in the worldclock.xml file is … :
    -> the dststart for Alaska (San Francisco) Mar 14, 2010 @ 3am (in v0.7.0 tested analogue with year 2009):

    -> the PC time is Mar 12, 2010 5pm… (or 17:00) GMT
    -> accordingly the displayed time for San Francisco is Mar 12, 2010 8am… (or 08:00)

    …and now, if i switch the PC date/time to Mar 15, 2010 5pm… (or 17:00) GMT
    -> the displayed time for SFO is Mar 15, 2010 8am… (or 08:00) again …instead of Mar 15, 2010 9am… (09:00), because the “dststart” should be from the 14th of march.

    Do you have a solution for this effect? Why does the widget ignore all dst times from the worldclock.xml file?

    Best regards

    bertani

    Reply
    • Firstly, I would like to talk about my development site version 2.8.0, http://xandertan.selfip.org/dev/wp/2_8_0/
      I found out that my San Fransisco clock showing the correct time. I captured a screenshot too (see the first picture in the attachment). So, I am not really sure why you said that my development site didn’t show the correct San Fransisco clock.

      Secondly, I would try to address the problem with your world clock widget. The world clock widget DST setting only works if you check on the DST checkbox when you initialize the clock. If you did not check the “daylight saving time” checkbox (see the second picture in the attachment), any setting in the worldclock.xml will be ignored. So, could you please check whether you have it checked?

      If you have checked it, then it is highly possible that my worldclock widget has another bug that I don’t see right now. Please update me with your finding.

      Reply
  3. Here some of the DST for London and Paris for the 2010 year.
    In fact, the rule for Paris is:
    – Start DST the last sunday of march at 2am
    – End DST the last sunday of october at 3am
    It seems to be the same for London at 1am and 2am respectively…

    Greenwich Mean Time : Dublin, Edinburgh, Lisbon, London
    0

    true

    1,0,0,3,28,2010

    2,0,0,10,31,2010

    Brussels, Copenhagen, Madrid, Paris
    1
    +01:00
    true

    2,0,0,3,28,2010

    3,0,0,10,31,2010

    Reply
  4. I was wondering how I can add a different clock to different post. Also is there a way to format the look of the clock?

    Thanks,

    14ner

    Reply
  5. this is a great plugin! thanks! is there a way to make the clock run and display on a 12 hour clock, and indicate “AM” and “PM”?

    Reply
  6. also wondering, if there’s a function to add in the day of the week (ie Thursday, Friday)

    Reply
  7. For those who wonders, my development server is currently down. Please be patient, as I am working on it, getting it back up again.

    Reply
  8. how to add this widget to my theme header?

    Reply
  9. Hi, I love your simple but useful widget. I have a question. I want to align the text (or use padding, whatever) within the widget and possibly change the color of the “Date/Time” that is displayed. Do you have some code or directions you can give me on how to do this? Thank you for your effort.

    Reply
  10. Hey, I installed the widget, but it shows the wrong time.
    its 11 am i Boston and it shows 19 PM of yesterday.

    Reply
  11. Ok, it looks like it takes the time from my own computer. i fixed this, but still the time shown in the widget is wrong.
    Anybody help?

    Reply
  12. Ok Problem solved:
    It requires for remove/add the plugin to get updated.
    Also, it takes the time from your own computer, so if your own computer has the wrong time zone, the display will be bad.

    All set!

    Reply
  13. Good day,

    We have your clock on our website (www.themanlygroup.com).
    The analogue clock indicating the US Eastern Standard Time is not in sync with the digital clock below it and displays the incorrect time. Please correct this as soon as possible.

    Regards
    Naim Spocter

    T +27-11- 258-8898
    F +27-11- 258-8511
    nspocter@TheManlyGroup.com

    Reply
    • Hi Naim Spocter,

      Could you make sure that you chose “(GMT-05:00) Eastern Time (US and Canada)” and activated the “Daylight Saving Time”? I sent you an email with the screenshot.

      Cheers
      Xander Tan

      Reply
  14. HI XanderTan,
    How can I appy it on my free wordpress.com site?
    Thank you
    Wu0Di1

    Reply
    • Hi WuoDi1, unfortunately, you can’t apply the widget on your free wordpress.com site. You should install it on your private wordpress server.

      Reply

  15. whatsnstore4u

    December 24, 2011

    I tried to install the World-Clock-Plugin to http://clickit-n-getit.com but did not activate it. This is what I got.
    Warning: DOMDocument::load() [domdocument.load]: URL file-access is disabled in the server configuration in /home/content/80/8461780/html/wp-content/plugins/world-clock-widget/worldclock.php on line 131
    Warning: DOMDocument::load(http://clickit-n-getit.com/wp-content/plugins/world-clock-widget/worldclock.xml) [domdocument.load]: failed to open stream: no suitable wrapper could be found in /home/content/80/8461780/html/wp-content/plugins/world-clock-widget/worldclock.php on line 131

    Warning: DOMDocument::load() [domdocument.load]: I/O warning : failed to load external entity “http://clickit-n-getit.com/wp-content/plugins/world-clock-widget/worldclock.xml” in /home/content/80/8461780/html/wp-content/plugins/world-clock-widget/worldclock.php on line 131

    Please can anyone help me fix or remove this problem with out starting my WordPress.org over. Thank you for your time. I can be reached at this e-mail whatsnstore4u[{at}]gmail.com

    Reply
  16. Hello xandertan, I just wanted to let you know that I have fixed my problem with the World Clock Plugin. I had to wait for some time to pass before I went into my FTP and remove the file.
    I hope you have a VERY NICE CHRISTMAS. I will stop by from time to time to see whats new.

    Reply
  17. Is there any way to update this for 2012? I can’t find an upto date world clock I like as well as this one.

    Reply
  18. Hello XanderTan,

    thank you for the plugin. Until now i’m using the version 0.7.1 and everything works fine.

    Since yesterday i’m trying to use the new version 1.0.0 in order to have the option to use server time, instead of client time.

    But unfortunately the Daylight Saving Times have no function (… for both: server and client time)
    and there is always a time lag of 1 hour.

    I tested the 1.0.0 version in the following environment:

    – a fresh wordpress installation v3.2.1 and also v3.4.1
    – only the world-clock-widget 1.0.0 installed and activated
    – the data in the worldclock.xml are up to date …dststart’s and dstend’s are set to 2012
    with the format:

        <dststart>1,0,0,3,27,2012</dststart>
        <dstend>2,0,0,10,30,2012</dstend>
      

    – the “daylight saving time” checkbox in the widget is – naturally – checked

    At first i had to modify the $doc->load section in the worldclock.php from

     $doc->load( $this->pluginurl . $this->fileTimezone ); 

    to

     $doc->load('/webspace-path-to-plugins/world-clock-widget/worldclock.xml' ); 

    in order to get access to the .xml file.

    This works fine (in both versions 0.7.1 and 1.0.0) – that followed i can see the timezone settings in the worldclock widget.

    At the moment we have for London time ‘Daylight Saving Time’ but the widget ignores the DSt setting ‘true’ or even ‘false’ in the checkbox of the world-clock-widget.

    In the html-sourcecode of the testblog i can see the following:

    <aside id="world-clock-widget" class="widget WorldClock_displayWidget">
      <h3 class="widget-title">World Clock</h3> <br>
      <div style="text-align:center;">
        <strong>London</strong>
        <div id="city0">
    	Sun, Jul 29, 2012 <br>
    	16:46:06
        </div> <br>
      </div>
      <script src="http://example.com/wp-content/plugins/world-clock-widget/date.js"> type="text/javascript"> </script>
      <script src="http://example.com/wp-content/plugins/world-clock-widget/worldclock.js"> type="text/javascript"> </script>
      </script type="text/javascript">
    	var dateformat="ddd, MMM dd, yyyy";var timeformat="HH:mm:ss";var serverclock=false;var gmttime=[2012,6,29,16,46,01];function worldClockWidget() {document.getElementById("city0").innerHTML=worldClock(0,false,dateformat,timeformat,serverclock);gmttime[5] += 1;setTimeout("worldClockWidget()",1000);}window.onload=worldClockWidget;
      </script>
    </aside>
    
    
    The London time should be '17:46:06 DST' (...it's the same effect with 16:46:06, both server time and client time, client time in my computer is naturally up to date 😉 ).
    
    The thing is: 
    
    a) Why is the var gmttime=[2012,6,29,16,46,01] while it should be gmttime=[2012,7,29,16,46,01] ?
    
    and
    
    b) document.getElementById("city0").innerHTML =worldClock(0,false,dateformat,timeformat,serverclock) while it should be =worldClock(0,true,dateformat,timeformat,serverclock) whilst DST checkbox is activated in the widget ?
    
    
    I maked a test and set the document.getElementById("city0").innerHTML in the worldclock.php from:
    
    [code]
    echo 'document.getElementById("city'.$i.'").innerHTML=worldClock('.$this->timezones[$wc_clocks[$i]['tz']]['offset'].','.$dst.',dateformat,timeformat,serverclock);';
    

    to

    echo 'document.getElementById("city'.$i.'").innerHTML=worldClock('.$this->timezones[$wc_clocks[$i]['tz']]['offset'].',true,dateformat,timeformat,serverclock);';
    

    So i set the point $dst definitely to true ...and afterwards this shows the right time 17:46:06 DST in my testblog!

    So it seems that $dst doesn't get the right setting 'true' or 'false' from the checkbox in the worldclock widget. It's always 'false' equal if checkbox in the widget is checked or not.

    As i said with v0.7.1 is everything ok, also $dst gets the right value from the DST checkbox in the widget but unfortunately in v1.0.0 it is not so.

    Could you help please ?

    Do you have an idea whats going wrong ?

    Thank you in advance for your investigation.

    Jenna

    Reply
  19. Hi, since I updateed the plugin to 1.0 , the time on my site is not being displayed, any steps that I am missing?

    Reply
  20. Hello,

    all of the data in the worldclock.xml file are set up – naturally – in the following format:

          <worldclock>
            <display>City mind your own</display>
            <offset>0</offset>
            <offsetdisplay></offsetdisplay>
            <dst>true</dst>
            <dststart>2,0,0,3,25,2012</dststart>
            <dstend>2,0,0,10,28,2012</dstend>
          </worldclock>
      

    Also the “daylight saving time” checkbox in the widget is – naturally – checked.

    The settings in the Widget and in the xml file are 100% correct.

    In your version 1.0.0 is the value $dst on the following code-snippet always
    ‘false’ equal if DST checkbox in the widget is checked or not and even though
    the setting in the xml-file is true:

       echo 'document.getElementById("city'.$i.'").innerHTML=worldClock('.$this->timezones[$wc_clocks[$i]['tz']]['offset'].','.$dst.',dateformat,timeformat,serverclock);';
    

    Do you have a site where you can see the correct DST times with version 1.0.0 ?

    Thank you for your investigation.

    Jenna

    Reply
  21. Is there a way to remove the title all together?
    I just want the city and time.

    Thanks!

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: