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 widget — 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

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.

192 responses to “WordPress Weather Widget”

Patrick Tingen

December 21, 2011 at 9:52 am

Thanks for the nice widget. I created a translation for the weather widget to Dutch. As a way of saying thank you I sent them to your general email address (‘hello …. ‘). If you see fit, you can include them in the widget.

Justin

December 20, 2011 at 7:52 am

Hey Robert,
The extended view has stopped diplaying the large weather Icon…
Any clues as to why this could be?
I love this wdget btw it’s integration into what I do is perfect…
http://thepuntersforum.net.nz/
ps I’d like to disply the “credit” if it wasn’t so seperated from the widget…. I’ve left it on for you to view as an example….
Thanks
Justin

Rachel

December 17, 2011 at 3:19 pm

Terrific widget! I have CSS output turned off (looks better that way with my sidebars.) Is it possible to make the widget title bold? I am using 2010 Weaver, and usually the CSS styles are edited by adding snippets in the Advanced Options menu, not by edited the code directly. Do you know what snippet I would add to style the widget title? It is not picking up the CSS for my other widget titles. Thanks!

Daniel

November 24, 2011 at 11:05 am

That was quick! Thanks for the response. I found the CSS code inside the icit-weather-widget.php file. But when “Output CSS” is ticked off the widget uses theme’s default styles, so maybe better style it using theme’s style.css as you say.

Daniel

November 24, 2011 at 10:58 am

And how can i style it myself? Excellent widget!

1. Robert O'Rourke
  
  November 24, 2011 at 11:01 am
  
  You would need to be confident with writing CSS or find someone who is. In the widget settings you can switch the CSS output off which gives a blank slate to style up. Typically you would add the code to your theme’s style.css.
  
Darko

November 23, 2011 at 10:26 pm

if you mean on output css its off if you mean on something else..how l can turn off that? l have youtoo studio theme

1. Robert O'Rourke
  
  November 24, 2011 at 10:07 am
  
  You need to tick ‘Output CSS’, otherwise you have to style the widget yourself.
  
  1. Darko
    
    November 24, 2011 at 2:45 pm
    
    But for me it is always the same and when css is turned off or on..al time is like on pics
    
    1. Robert O'Rourke
      
      November 24, 2011 at 2:51 pm
      
      Strange, can you post a link to the site you’re working on?
      
      1. Darko
        
        November 24, 2011 at 5:09 pm
        
        ofc http://sportski-portal.iz.rs/ site has yet to begin to work and it will be a regular blog If you want I can give you the password to view all
Darko

November 23, 2011 at 6:53 pm

my pics is not like your…l dont have background… how to be like your?
http://www.dodaj.rs/f/1k/MS/3yRZD12I/vrijeme.jpg

1. Robert O'Rourke
  
  November 23, 2011 at 7:21 pm
  
  Do you have the CSS option switched on?
  
Nishanth Reddy

November 17, 2011 at 12:35 pm

Can we not use this on any page – like adding a short code in the page ??? URGENT!

1. David Coveney
  
  November 17, 2011 at 1:44 pm
  
  No, as at this moment there is no shortcode version of this plugin.
  
2. Robert O'Rourke
  
  November 17, 2011 at 4:23 pm
  You can output any widget with a template tag if that helps:
```
<?php
the_widget( 'icit_weather_widget', array(
	'title' => '',
	'city' => 'Liverpool',
        'country' => 'UK',
	'celsius' => true,
        'days' => 1,
	'display' => 'compact',
        'credit' => true,
	'css' => true
) );
?>
```
Rich Zahradnik

November 12, 2011 at 11:26 pm

I love the way the widget will work, but I’m getting this error and it’s not displaying:
The last error occured at “November 12, 2011 11:20 pm” with the message “HTTP response code 503”.

It’s probably something simple I’m doing. Let me know. Thanks, Rich

1. Robert O'Rourke
  
  November 14, 2011 at 10:05 am
  
  Can you tell us exactly what settings you’re using? Could be all sorts of things.
  
Justin

November 1, 2011 at 5:12 am

Hi, I noticed this stopped working today….?

1. David Coveney
  
  November 1, 2011 at 11:48 am
  
  Can you tell is in which way it stopped working?