• Blog

    Latest from our Blog

  • Tools

    Our Favourite WP Tools

  • Hosting

    Recommended Web Hosts

  • Coupons

    Get great money off deals

  • Themes

    WordPress Theme Directory

  • Plugins

    WordPress Plugins Directory

  • Promote

    Your WordPress Product

WordPress is used by all kind of websites as their primary CMS. Even though these websites differ a lot from each other in terms of features, navigation and tools required to run the site. Still, WordPress with its extensive plugin repository is capable of handling most of their needs.

I thought adding weather reports to a WordPress powered site would be a simpler and task. I thought I would just copy paste some code into my pages and it will work. I forgot that I can’t add code inside pages or posts. Then I realized that a lot of website owners would face this situation. Particularly, websites in travel, tourism, hotels, adventure, transportation and so many other categories, would probably want to display weather reports on their websites.

If you do not own or haven’t worked on a website in these particular niches, you are probably thinking that why would people want to add those ugly weather boxes on their sites? Actually, these weather reports have many usages. For example, a nice weather forecast and can help a user makeup their mind about whether or not they should travel. It could also help them adjust their plans or learn more about that particular geographic location. The ugly weather boxes are actually very useful and they can be made pretty.

Manually Adding Simple Weather in WordPress

In this method we will be using James Fleeting’s awesome Simple Weather jQuery Plugin. This plugin retrieves weather data from Yahoo! Weather Feed using YQL API.

Download Simple Weather jQuery Plugin, extract it and upload the file jquery.simpleWeather.js to your website’s root directory. (e.g. http://www.example.com/jquery.simpleweather.js )

Go to WordPress admin area > Appearance > Editor and from the list of files on your right hand, select Header and Copy paste the following code in your theme’s header.php just before </head>.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" charset="utf-8"></script>
<script src="<?php echo esc_url( home_url( '/' ) ); ?>/jquery.simpleWeather.js" charset="utf-8"></script>
<script type="text/javascript">
$(function() {

			$.simpleWeather({
				 location: 'london, united kingdom',
				unit: 'c',
				success: function(weather) {
					html = '<h2>'+weather.city+', '+weather.region+'</h2>';
					html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
					html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /><span>'+weather.currently+'</span></p>';
					html += '<a href="'+weather.link+'">View Forecast &raquo;</a>';

					$("#weather2").html(html);
				},
				error: function(error) {
					$("#weather2").html('<p>'+error+'</p>');
				}
			});
		});

Replace London, United Kingdom with whatever location you want to get displayed. For locations inside the United States you can also use zipcodes like this: zipcode =”90210”

Now, go to Appearance > Widgets, add a text widget to the sidebar, and inside the widget paste <div id="weather2"></div>. Save the widget and check your website. You can also use it inside your posts and in your templates.

Now that we have added the weather, the next problem we face is that this weather report does not look very pretty. Let’s style it a bit, by pasting the code below in your theme’s stylesheet.

		#weather2 {
			background: #6f9dbe;
			background: -webkit-gradient(linear, left top, left bottom, from(#adc7db), to(#6f9dbe));
			background: -moz-linear-gradient(top, #b2bcc8, #adc7db);
			width: 185px;
			padding: 5px 10px;
			overflow: hidden;
			border: 1px solid #6591b3;
		}

		#weather2 h2 {
			color: #000;
			text-shadow: rgba(250, 250, 250, 0.6) 2px 2px 0;
		}

		#weather2 p {
			font-size: 25px;
			margin: 30px 0 0;
		}

		#weather2 p span {
			font-size: 16px;
		}

		#weather2 a:link, #weather2 a:active, #weather2 a:visited {
			display: block;
			clear: both;
			text-decoration: none;
			color: #222;
			font-size: 12px;
		}

		#weather2 a:hover {
			color: #000;
			text-decoration: underline;
		}

Simple Weather is really awesome and makes it super quick and easy for you to add Weather data on your websites. However, the reason why it is awesome is that you can customize it a lot. In the example above you can easily modify the location and units in the weather function. You can also style them to match your theme. Simple Weather can do a lot more than that, basically it just fetches the data and you can use that data in many different ways. Check out some examples here.

WordPress Weather Plugins

Sadly during the last week of the August 2012, Google silently discontinued their Weather API. Actually, Google never released it for developer usage, it was discovered and used by developers without any rights. This means that some of the weather widgets and plugins in the WordPress repositories are not working anymore.

However, there are other plugins and widgets using Yahoo Weather Feed, Weather.com and Weather Underground plugins, which are working just fine.

Weather and Weather Forecast Widget

Weather and Weather Forecast Widget is a customizable and easy to use WordPress plugin to display weather reports and forecasts. It not only displays weather in Widgets but can also display weather reports inside posts and templates using shortcodes. It can fetch data from two sources Weather Wunderground and World Weather Online you can use both of them together and set preferences for one of them, in case your preferred source does not have weather data the alternate source can fill in.

The plugin also comes with custom weather images which you can replace with your own custom icons if you want. There are currently three different icon sets that come with the plugin. You can gain more control on the display by modifying the widget CSS.

The plugin author has discontinued development for the time being but plugin is working great and the author has already documented everything about the plugin. One little annoyance is that you will have to make accounts on Wunderground or the World Weather Online to get the API keys needed for the plugin to work. It takes little time and you don’t have to repeat it so I guess it is not a big deal.

Weather and Weather Forecast Widget »

Weather Forecast WP Wunderground

WP Wunderground is another simple plugin to display weather forecasts on your website. It uses Weather Underground’s data to fetch data and display on your website. Unlike previous plugin this one does not need a Wunderground API key.

Instead of adding a widget to your Widgets panel this plugin creates a shortcode to be used anywhere. This shortcode can be used inside a regular text widget, a post or page, and in your templates. The shortcode can be manually configured, so if you wanted to display weather reports for more than one locations, you can manually add configuration options for another shortcode like this:

[forecast location="Paris, France " caption="Weather for Paris" measurement='C' todaylabel="Today" datelabel="date('m/d/Y')" highlow='%%high%%°/%%low%%°' numdays="3" iconset="Cartoon" class="css_table_class" cache="true" width="100%"]

The plugin comes with 10 icon sets which you can use for weather icons. You can display forecast for a few days or you can just show the weather for today. The plugin is easy to configure and fun to play with.

Weather Forecast – WP Wunderground »

Conclusion

This post became short due to the shutdown of Google Weather API. Otherwise I had also reviewed ICIT Weather Widget and WordPress Weather Widget. There are also many other plugins available for you to use, some of them are not updated for a while, some of them are not so pretty. But then I guess that’s the fun part of maintaining a website with WordPress, trying new free stuff and configuring them to create awesome websites.


Post Tags

Noumaan is a blogger and social media expert. He loves Quora, Facebook, Wordpress, OpenSource Software and The Sims.

Leave Yours +

12 Comments

  1. This Plugins & Widgets are really useful in news website applications. Thanks a lot for sharing with us.

    • NoumaanYaqoob

      @GoWebBaby2:disqus you are so right, I should have mentioned that in the post that these widgets and plugins are very useful for news websites too. Thank you for adding this.

  2. ellipszist

    please add to end of line.
    and to text widget

    • NoumaanYaqoob

      @b376254983202e2261daf54f4d0f69d9:disqus thank you for notifying actually had it inside I forgot I had to encode into html entities. I have corrected this. :)

    • NoumaanYaqoob

      @b376254983202e2261daf54f4d0f69d9:disqus Thank you I forgot to encode html entities inside fixed this. Thank you for notifying :)

  3. ellipszist

    please add to end of line.
    and
    to text widget

  4. Ayman

    Hi Noumaan,
    There’s a typo at the featured image at the top of the post :)

    Nice post by the way

  5. Thanks a lot 8 I’ve just created my very first website and i was looking for this kind of plugins !!!

  6. I’m looking for wordPress weather plugins, and I like WP wunderground.
    Thank you Noumaan.

Leave a Reply

* Required Fields.
Your email will not be published.

Search

Our Sponsors