WordPress Weather Widget

Important update: Google have switched off their weather API

I must have a weather forecast on my site!!

Anonymous Client

Extended mode display

You may well have heard these exact words, or at least something similar. We certainly did but found many of the weather widgets and badges out there lacking. Either they were not aimed at regular users (having to track down your own locid for non-US addresses for example) or they had rate limits on the API.

We had tried using the Yahoo weather badge at first however as soon as traffic to our client’s site increased the widget would become unavailable before lunch time due to exceeding the limits. As a result we decided to put together our own simple weather widget that would never be unavailable by using cached data from the Google Weather API.

Download

The weather widget is available from the WordPress.org repository for download and installation.  You can also see download stats.

Installation

Copy the contents of the zip file to your plugins directory. Proceed to the plugins page and activate the ICIT Weather Widget.  Alternatively, use the automatic download and install available from the plugins page of your WordPress back-end.

Please note you will need a theme that supports dynamic sidebars.

Usage

The weather widget form

Go to the widgets page. There you will find the multi-use ICIT Weather Widget. Drop it into a sidebar to get started. You will be presented with the form to configure the widget.

  • Title
    The title is optional but will override the display of the location if set.
  • Country
    Choose the country you want to look at the weather in.
  • City, town, postal or zip code
    Use this field to narrow down the search some more, for example putting in ‘L1′ or ‘Liverpool’ will get the weather information for that location.
  • Widget display
    Choose from a compact or an extended display mode. In extended mode the full weather forecast for the current day is shown including humidity and wind conditions. In compact mode you get a small icon, the day name and the temperature range for the day.
  • Show forecast for…
    You can show up to an extra 3 days of weather forecasts in their compact form after the current day.
  • How often to check the weather
    Set a timer in minutes for how often the widget should poll the API for updated weather information. Default is 60 minutes.
  • Show temperature in Celsius
    This should be fairly obvious! Toggle between displaying degrees farenheit and degrees celsius.
  • Output CSS
    Toggle the default styling on or off for the widget instance.
  • Show Interconnect/IT credit link
    The plugin is free so we appreciate the support and traffic the credit link can drive our way but you can switch it off if you prefer.

Feedback / Suggestions / Bugs?

If you have any comments, suggestions or feature requests leave them below. Please remember we can only fit the work in as time permits so only the most requested or useful features will go in. The aim is to keep the widget simple.

We would also like to hear if you find any bugs while using the plugin so we can rectify them.

Please DO NOT email us for support unless you are a paying customer – we will no longer reply.

Update:

With the latest version of the weather widget we have solved a few key problems:

  • Localisation
  • Bug when calculating forecast temperatures for certain countries
  • Added filters to avoid having to edit the core plugin when google change their API

It’s not 100% but if your WordPress installation has the WPLANG constant defined anywhere or if you have a ‘locale’ filter in your theme or a plugin then the API will return temperature data and weekdays in the specified language. We still need translations for the rest of the plugin if anyone is inclined to help us out with that.

Filters

Here are the filters with example uses that the plugin now gives you to play with. Generally they shouldn’t be needed but it means we can easily patch the plugin if the google API changes suddenly.

icit_weather_widget_images

Filters the images array. Use this if you want different icons or if google change their image file names.

function new_weather_images( $images ) {
    $images['sunny'] = 'my-icons/sunny.png';
    return $images;
}
add_filter('icit_weather_widget_images',  'new_weather_images');

icit_weather_widget_check_image

An alternative place to alter image paths. Parameters are the image url returned from google, an array of the icon filename and file extension and lastly a boolean to say whether the request is for a thumbnail or not.

function new_weather_check_image( $image, $icon, $thumb ) {
    return array(
        'src' => get_stylesheet_directory_uri() . '/images/' . $icon[ 'filename' ],
        'key' => $icon[ 1 ] // keep this the same
    );
}
add_filter('icit_weather_widget_check_image',  'new_weather_check_image');

icit_weather_widget_na_icon

If you only want to change the N/A icon you can use this filter to choose an alternative image as the fallback if you prefer a ‘best guess’ approach eg. using the icon for clear weather.

function new_weather_check_image( $image ) {
    return 'clear.png';
}
add_filter('icit_weather_widget_na_icon',  'new_weather_na_icon');

icit_weather_widget_locale

This shouldn’t really be needed as the plugin looks at the WPLANG constant but if you do run into problems with what google returns from their API you can patch the locale string used to retrieve the weather data.

function new_weather_locale( $locale ) {
    return 'fr'; // french weather data
}
add_filter('icit_weather_widget_locale',  'new_weather_locale');

Note with the above you could also use the general ‘locale‘ filter in WordPress however the effect of that is site-wide and may not play too nicely with poorly written plugins/themes.

Comments
  • Ben Hutchings 3 / Jun / 2011 at 9:45 am

    Hi, just incase anyone else wants a very very hacky quick fix:

    Find this:
    <img src="” alt=”" width=”160″ height=”103″ />

    and replace with this:
    <img src="images[ strtolower(str_replace(" ","_",esc_attr( $data[ 'current' ][ 'condition' ] ))) ];?>” alt=”ben” width=”160″ height=”103″ />

    This has no image checking, no handling of an ‘na’ image if the condition is not passed back from Goog, and basically it’s the most hacky thing I’ve ever done :D

    (works though!)

  • Dimitris 3 / Jun / 2011 at 9:28 am

    Works fine until now on older versions but on version 3.1.3 images dont work. The temperature is working but with N/A images. :(

  • Eric 2 / Jun / 2011 at 9:55 pm

    Until an official fix for the N/A image issue here’s what I changed my array to (starts at line 47 of weather-widget.php). Seems to work so far.

    ‘weather_sunny-40′ => ’1.png’,
    ‘weather_sunny-40′ => ’2.png’,
    ‘weather_partlycloudy-40′ => ’4.png’,
    ‘weather_mostlycloudy-40′ => ’6.png’,
    ‘weather_scatteredthunderstorms-40′ => ’13.png’,
    ‘weather_rain-40′ => ’12.png’,
    ‘weather_scatteredshowers-40′ => ’14.png’,
    ‘weather_snowflurries-40′ => ’21.png’,
    ‘weather_cloudy-40′ => ’7.png’,
    ‘weather_smoke-40′ => ’11.png’,
    ‘weather_smoke-40′ => ’18.png’,
    ‘weather_thunderstorms-40′ => ’15.png’,
    ‘weather_scatteredthunderstorms-4′ => ’17.png’,
    ‘weather_sleet-40′ => ’26.png’,
    ‘weather_snow-40′ => ’22.png’,
    ‘weather_icy-40′ => ’31.png’,
    ‘weather_dust-40′ => ’32.png’,
    ‘weather_fog-40′ => ’32.png’,
    ‘weather_smoke-40′ => ’32.png’,
    ‘weather_haze-40′ => ’5.png’,
    ‘weather_snowflurries-40′ => ’22.png’

  • Flick 2 / Jun / 2011 at 8:09 pm

    bers
    Find the new image file names here and here:
    http://www.tristarwebdesign.co.uk/blog/goodies/all-google-weather-api-conditions/
    http://drupal.org/node/1133362#comment-4519286

    Thanks for the link to this post, bers. In terms of the changes, I reckon it’s best to wait for ICIT to release an update. I ‘sort of’ got round it by editing lines 47 to 67 in icit-weather-widget.php by replacing e.g. ‘mostly_sunny’ with ‘weather_mostlysunny-40′.

  • David James 1 / Jun / 2011 at 4:14 pm

    Aagin weather icon shows the na.png. Looks rather silly with a glowing sun with N/A on when its obviously pouring down outside!
    This is a great pluggin but unless it is going to be sorted soon I will have to take it down.
    Is a solution being deveoped?

  • carricdesign 31 / May / 2011 at 2:50 pm

    I’m seeing the n/a images as well. The widget is great – I would love to see it ‘fixed’ so that the images so up again.

  • Olly 31 / May / 2011 at 12:45 pm

    I am very new to wordpress & php. I am running icit-weather-widget.php with wordpress 3.1. I am having the same trouble with the image displaying N/A icon instead of the weather icons. I believe that the icons are called from the local server and not from google. In which case do I just need to change the var $images = array ‘names’ to the correct ones now listed above? Because they also look correct. I am very confused could someone please help?

  • Ben Hutchings 31 / May / 2011 at 12:18 pm

    Hi, also getting na.png. Just commenting to see if I get notification of any other replies/fixes. Will hack it if you guys don’t have time for a fix/patch in the next few days.

    Love the plugin, thanks, seeing that it’s free even if you don’t adapt it to the new API I’m grateful to have the code and will use it with another set of images pulled in from the alt data.

  • Tera 30 / May / 2011 at 5:49 pm

    I am experiencing the same issue with the image icons. I recently upgraded to 3.13 too. Any fix yet?

  • Miro 28 / May / 2011 at 11:43 am

    Darrin

    Another thing.. I just noticed today that the images used are now all being replaced with na.png. I have not altered the site previous to this and it was OK just couple of days ago.
    Can you verify?

    Seems like Google replaced their icons >,<
    This is the same problem I am experiencing. Happened since I upgraded to WordPress 3.13 (but probably just a co-incidence). Any clues as to how to fix it?

    I also have all “na.png” images since last few days. Any idea what is going on?

  • Bryan Eggers 28 / May / 2011 at 9:02 am

    Darren, can you share your fix with us? Many thanks!

    • Darren 1 / Jun / 2011 at 10:51 am

      Hi Bryan (and others),

      I’ve sent through my modifications to the weather widget through to the ICIT guys, so it’s up to them to review. My method was a very hackish method that doesn’t take into account a change of the feed language, so we’ll see what the ICIT guys come up with from there.

  • Abdelhadi Touil 28 / May / 2011 at 1:53 am

    Thanks very much for this great plugin. But please try to update the plugin so the problem with images (na.png) will be fixed. I have the same problem here, if someone tried to fix this thanks to share the code.
    Waiting for the update, and sorry for my bad English.

  • Darren 27 / May / 2011 at 1:50 pm

    Google changed their XML feed, and it is no longer outputting the same image data as before. This means that it doesn’t match what’s coded in the ICIT Weather Widget. I’ve personally modified the coding so that it looks at and matches the weather condition instead of the icon data, which is less likely to change in a hurry. It’s a very hack approach, but it works.

    ICIT guys, I’ve made other modifications to the widget (including selecting a Metric output, instead of just Celsius), feel free to drop me a line to check it out if you’d like.

  • Darrin 27 / May / 2011 at 11:48 am

    Another thing.. I just noticed today that the images used are now all being replaced with na.png. I have not altered the site previous to this and it was OK just couple of days ago.
    Can you verify?

    Seems like Google replaced their icons >,<

    This is the same problem I am experiencing. Happened since I upgraded to WordPress 3.13 (but probably just a co-incidence). Any clues as to how to fix it?

  • Darrin 27 / May / 2011 at 11:35 am

    Sorry but I don’t understand what needs to be changed as the plug-in is using pre-defined images, I am not using google images so it should work?Can someone please give me an idea on where to look?

  • Sondre Kleveland 27 / May / 2011 at 10:20 am

    Sondre Kleveland

    Rob
    For now yes, we’ll make sure the next release does the auto-detection so when it overwrites your changes it won’t break.

    Thx that worked.
    Another thing.. I just noticed today that the images used are now all being replaced with na.png. I have not altered the site previous to this and it was OK just couple of days ago.
    Can you verify?

    Seems like Google replaced their icons >,<

  • bers 26 / May / 2011 at 8:30 pm

    Same for me, N/A image, everything else works fine. Image links returned by Google Weather API seem to have changed – check http://www.google.com/ig/api?weather=Boston, for example.
    weather_partlycloudy-40.gif is definitely a new naming scheme compared to the old ones reported here:
    http://www.blindmotion.com/2009/03/google-weather-api-images/

  • Darren 24 / May / 2011 at 6:52 am

    Just wanted to shout out a big thanks to you guys for developing this plug-in, and share the customisation I’ve done for our site, including those shared here: http://blog.crouze.com/?p=115. It looks a little something like this:
    http://www.facebook.com/photo.php?pid=9823503&l=206272031a&id=673567906

    This is based on a child theme of Twenty Eleven (the new WP 3.2 theme), where the widget has a transparent background and shows through the main site background. Unfortunately the renders I’ve got don’t actually show the BG in the correct position, so you can’t see the full effect.

    I still experience the same problem that was supposed to be patched in the latest version, though – a missing image displaying every so often. I’ve never seen the N/A message appear, only the missing image. Any suggestions for this?

    Thanks,
    Darren

  • Gillis 23 / May / 2011 at 11:06 pm

    Great work fellas. Really great. Very easy to use and configure, and as others have said, looks great too. I do have a query though… It’s now 11pm, the skies are clear, but the icon is a blazing sun. May be it’s impossible, but having the icon being time-of-day appropriate as well as weather-appropriate would be a real refinement. Thanks for what you’ve done already though!

  • Sondre Kleveland 16 / May / 2011 at 1:07 pm

    Hi,

    This regards wrong temperatures when switching the language used on the widget.

    First, here is he link from the thread I created on WordPress.org:
    http://wordpress.org/support/topic/plugin-icit-weather-widget-temperature-errors-on-different-language?replies=2#post-2115165

    Answer from thread; I’m using Celsius on the widget.
    I tried manually converting the numbers to Celsius to see if they actually were Fahrenheit and that the conversion was somehow skipped, but the temperatures I got were nowhere
    near the correct Celsius temperatures that was showing on the English version.

    Regards,
    Sondre

    • Robert O'Rourke
      Robert O'Rourke 16 / May / 2011 at 3:27 pm

      I guessed that it wasn’t a result of the conversion being skipped but maybe something wrong with how it does the calculation in certain conditions. I’ll test it with Norwegian in various locations and see what I can gather from that. Sorry about the problems it’s causing you.

      • Cippo 16 / May / 2011 at 3:33 pm

        Hi Robert,

        I’ll ease your testings.

        The function f_to_c( $deg ) that’s in icit-weather-widget.php has a problem if you select other language than English… But not the function itself is the problem but the XML that google generates.

        I’ve compared the info displayed for my city both in English and Romanian and saw that in English, the default temperatures were in Fahrenheit while in Romanian, they default to Celsius.

        So what I’ve done is:

        function f_to_c( $deg ) {

        return $deg;

        }

        I’m very sure that you can improve the functionality of the plugin in the future!

        All the best and thanks,
        Ciprian

        • Robert O'Rourke
          Robert O'Rourke 16 / May / 2011 at 3:37 pm

          Much obliged! That makes things interesting but at least there should be a simple way to check what the default google returns is. I’ll also get some filters added to functions like f_to_c() so you’re not having to edit the core plugin code.

          Thanks again :)

      • Cippo 16 / May / 2011 at 3:36 pm

        The function f_to_c($deg) is on line 495.
        I didn’t want to change the code too much because the plugin is live on a site and I don’t need any errors :D ( I’m not pro at PHP )

        But you did a very good job.

        Cheers,
        Cip

        • Sondre Kleveland 26 / May / 2011 at 9:41 am

          Im far from pro either… Does this mean I can implement this in the plugin to make the Norwegian language work?

          • Robert O'Rourke
            Rob 26 / May / 2011 at 11:49 am

            For now yes, we’ll make sure the next release does the auto-detection so when it overwrites your changes it won’t break.

          • Sondre Kleveland 27 / May / 2011 at 9:59 am

            Rob
            For now yes, we’ll make sure the next release does the auto-detection so when it overwrites your changes it won’t break.

            Thx that worked.
            Another thing.. I just noticed today that the images used are now all being replaced with na.png. I have not altered the site previous to this and it was OK just couple of days ago.
            Can you verify?

  • Cippo 13 / May / 2011 at 4:59 pm

    Hey Robert thank you very much for this plugin!

    I do have a little problem with it, the same with this guy here: http://wordpress.org/support/topic/plugin-icit-weather-widget-temperature-errors-on-different-language

    Can you suggest something?

    Thanks,
    Cip

  • Olly 10 / May / 2011 at 2:27 pm

    Hi Rob,

    Don’t worry I seem to have sorted it by just replacing the widget. Nice work by the way!

    Olly

    • Robert O'Rourke
      Robert O'Rourke 10 / May / 2011 at 2:33 pm

      No worries Olly, glad you like it :)

      The image issue is something that seems to crop up from time to time but it should always be showing an image in the latest version. I’ll dig back into the code and have a look, might be a caching problem if removing and re-adding the widget did the trick.

  • Olly 10 / May / 2011 at 2:23 pm

    Hi there,

    What an amazing plugin thankyou, I have had it installed and working perfectly for a couple of months now. One thing though, today it doesn’t seem to be displaying the main weather Icon (today’s) or the temperature for today. I have not changed any settings as far as I am aware. Could you have a look and let me know what you think the problem is, I have looked at the css and that seems to be fine any help would be much appreciated. Many Thanks,
    Olly

  • Ben 11 / Apr / 2011 at 11:38 pm

    The widget has been working fantastically until a couple of days ago, now in the WP dashboard in the widgets menu I get the error “The last error occured at “April 11, 2011 11:37 pm” with the message “Most likely could not find the place you were looking for or Google have broken their weather API.”.”

    :’( I have not changed any of my settings, I tried retyping the name of my city and the postcode too but it still didn’t fix it…

    Can you please e-mail if you figure out what is wrong?

    Thanks
    Ben

    • Robert O'Rourke
      Rob 12 / Apr / 2011 at 12:07 pm

      Hi Ben, can you give us a break down of the settings you are using so we can try reproducing the problem?

1 2 3 4 5
css.php