WordPress Weather Widget

Robert O'Rourke

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.


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


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.


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.


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.


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.


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');


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');


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');


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

  1. Hi, I noticed this stopped working today….?

    1. Can you tell is in which way it stopped working?

  2. 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. Can you tell us exactly what settings you’re using? Could be all sorts of things.

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

    1. No, as at this moment there is no shortcode version of this plugin.

    2. You can output any widget with a template tag if that helps:

      the_widget( 'icit_weather_widget', array(
      	'title' => '',
      	'city' => 'Liverpool',
              'country' => 'UK',
      	'celsius' => true,
              'days' => 1,
      	'display' => 'compact',
              'credit' => true,
      	'css' => true
      ) );
  4. my pics is not like your…l dont have background… how to be like your?

    1. Do you have the CSS option switched on?

  5. 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. You need to tick ‘Output CSS’, otherwise you have to style the widget yourself.

      1. But for me it is always the same and when css is turned off or on..al time is like on pics

        1. Strange, can you post a link to the site you’re working on?

          1. 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

  6. And how can i style it myself? Excellent widget!

    1. 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.

  7. 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.

  8. 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!

  9. 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…
    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….

  10. 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.

  11. Cheer it s nice weather widget still need One detail (Language) Ex French.
    ty for widget.

  12. Hi Great weather widget. Is there any way the icons can show its night time. i.e. with moon and clouds etc depending on the conditions?

  13. as changing the language to Spanish

  14. You asked for feedback / suggestions…

    Your weather widget looks so promising, but I need to show more than one location in a side bar, and …

    I would VERY much like to have a SHORT CODE implementation so I could put weather specific to a locale in a post or page.

    Thanks for listening! 🙂

  15. I am unable to get the widget to change from the default (English) using WPML language switcher. I’ve put a translated .mo file in the plugin’s lang folder but it appears something is missing to trigger the language switch. Any suggestions? (I’m using the Hybrid News theme. )

  16. Hi There,

    Just added your weather plugin on our test site before we go live. I just wanted to suggest having a metric/imperial toggle versus selecting Celsius option only. For example I cannot understand what 5 mph wind speed really is…must be breezy? lol. Nice to have the Celsius function but entirely metric would be awesome. Thanks for a great looking plugin!


  17. I just loaded your Weather Widget into WordPress 3.3.2 and yes, so far it is functioning 100%. Thanks.

  18. here..new wordpress plug-in..

    u can display 4 days weather forecast and current date and time of your city or any other cities..


  19. English:
    Hello I have problems when I want to translate the language of the plugin, from English to Spanish, there is some version of the plugin in Spanish? because they try to translate (I find the days and many other words to make it complete), the climates and is not translated then the web … there is something in Spanish of this plugin?

    Hola tengo problemas cuando quiero traducir el lenguaje del plugin, del ingles al español, exíste alguna version del plugin en español? porque intente traducir (no encuentro los días y muchas otras palabras para hacerlo completo), los climas y no se ve traducido luego en la web… hay algo en español de este plugin?

  20. Hi, the widget look very nice, there is a way that i can change de colors of the fonts?

  21. Hi, great widget! I’m stuck on a time server issue that may be something to do with wordpress (am new to this all) – even though i change the current local time in the wp settings, the widget still shows the UTC time which is 10hrs earlier. I’ve re-set and re-installed everything but can’t seem to fix it… any help would be greatly appreciated. Cheers!

  22. Looks like a hot weekend ahead!

  23. widget worked great in the beginning. Now it doesn’t show up anymore in my sidebar. ICIT widget says “String could not be parsed as XML”.
    What should I do next to solve this problem??

  24. Like the poster below.. This plugin worked great for a few days, now it has stopped working. Error message of:-

    The last error occured at “August 30, 2012 7:25 am” with the message “HTTP response code 403”.

    How to I resolve this error?

    1. Does resaving the widget help? It might be that google has changed the API in some way. We’ll look into it.

  25. Mine has locked in on Monday
    and also can’t display new widgets set ups
    Been fine for 10months or so up until recently

  26. hmmm…must be doing something wrong..i can’t get it to show Brisbane, Australia. 🙁

  27. Here is the source of the current problems, I believe: http://www.gizmodo.com.au/2012/08/google-silently-kills-popular-api-breaks-weather-apps-everywhere/

    Is there anyway you can use a different weather API so the widget will work again? I love your weather widget so much!

  28. Hi folks. Google have killed their weather API so in the meantime I recommend using http://wunderground.com widgets until we can implement their API.

    Sorry for the inconvenience 🙁

    1. i search the link that you recomment . is there wordpress plugin on the link. or for easy can you juss give the plugin detail. anyway hope you will be back soon . iyour plugin was easier one and better . thanks.

      1. Hi yes there is, a quick google search pointed me to this plugin which actually looks as good if not better than ours! http://wordpress.org/extend/plugins/wunderground/

        1. thanks gfor you reply robert will check it out.

  29. 404 error not open my computer also web link

  30. I get HTTP error 403 when the widget searches the data source.

    1. Hi Kevin, check the top of the blog post – there’s a link with more information. Google discontinued their weather API so the plugin no longer works.

  31. PS I have WP 3.4.2; is this a problem?

  32. 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.

  33. Hello !
    I’m working on the website provided above xD
    I’m searching for a weather plugin, but i’d like the every user could choose his own location to check xD
    Is there any way to achieve this goal with your plugin or you know how to,or where can i get that ?

Leave a Reply

Your email address will not be published. Required fields are marked *