Make your blog weather-interactive in 6 easy steps

Follow these steps to have your wordpress-blog's design change according to the users local daytime and weather.

The first step explains how to modify the default wordpress theme. If you don't have a wordpress blog, or use a different theme, skip to step 2!

1. Access your wordpress-blog theme

First we will make a copy of the default theme to create your own theme, so that your changes wont be overwritten with the next wordpress- update:

On your server where your blog is located go into the folder "wp-content" and copy the "default" theme and rename it into something sensible, like "weathertheme". In your blog's admin-area on the left menu under "Appearance" activate your new theme. Change the read-write permissions for the "weathertheme"-folder on your FTP-server as explained on the wordpress-codex to 777. Now you are able to edit your theme's CSS and PHP files, best done from the editor in the admin-area under "Appearance">"Editor".

We will be using the Yahoo weather api to retrieve the viewers weather condition. Unfortunately Yahoo's weather api only returns it's weather info if you give them a US- zip code or a yahoo-specific code for worldwide weather stations. We will use ongmap.com's service to get the user's closest weatherstation and then pass that to the yahoo api.

First, create a PHP-file and call it "weather.php".

2. Get the viewer's IP-address

Now add his piece of code grabs your viewer's IP-address:

  1. if ($_SERVER['HTTP_X_FORWARD_FOR']) {
  2. $ip = $_SERVER['HTTP_X_FORWARD_FOR'];
  3. } else {
  4. $ip = $_SERVER['REMOTE_ADDR'];
  5. }

3. Get the viewer's current location (Latitude/Longitude) worldwide

With this API you can get any IP-address's location, local time and so on.

  1. function getWeatherClass($ip){
  2.  
  3. //get viewer's location:
  4. $url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
  5. $location_xml = get_response($url);
  6. $lat = get_match('/(.*)(.*)
  7.  
  8. With a function called get_response we will get the xml response containing the users location based on their IP-address:
  9.  
  10.  
  1. function get_response($url){
  2.  
  3. $request = $url;
  4. $postargs = 'u='.urlencode('c').'&p='.urlencode('GMXX6091');
  5. $ch = curl_init($request);
  6.  
  7. curl_setopt($ch, CURLOPT_VERBOSE, 1);
  8. curl_setopt($ch, CURLOPT_NOBODY, 0);
  9. curl_setopt($ch, CURLOPT_HEADER, 0);
  10. curl_setopt($ch, CURLOPT_USERAGENT, '');
  11. curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  12.  
  13. $response = curl_exec($ch);
  14. $responseInfo = curl_getinfo($ch);
  15. curl_close($ch);
  16. return $response;
  17. }

With a little regex function we will extract the latitude and longitude from the location-xml:

  1. function get_match($regex,$content){
  2. preg_match($regex,$content,$matches);
  3. return $matches[1];
  4. }

4. Retrieve the yahoo-weather-API URL of the viewer's closest weather-station

Having the location, we need to get the weather condition of the user's nearest weather-station. To do that we are using ongmap.com's api:

'http://ongmap.com/api/?v=1.0&data=weather&lat='.$lat.'&lng='.$long.'&num=1';

If we pass the latitude and longitude, it will return us a yahoo-weather-api URL containing a ID of a weatherstation. "num=1" means that we only want one weather-station to be returned, the closest one found.

Having the Yahoo- URL we can finally also add the code to get yahoo-API's xml with the weather-condition.Again we use regular expressions to extract the weather code, which stands for one of yahoo's 47 weather conditions.

To do all that, extend your getWeatherClass - function, so that it looks like this:

  1. function getWeatherClass($ip){
  2.  
  3. //get viewer's location:
  4. $url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
  5. $location_xml = get_response($url);
  6. $lat = get_match('/(.*)(.*)(.*)
  7.  
  8. To finish the script we need to save the return value of the function getWeatherClass in a variable called $weather_class and pass the user's $ip:
  9.  
  10.  
  1. $weather_class = getWeatherClass($ip);

5. Process the weather code

Yahoo's weather api has 47 different weather conditions. Here, we only want to visually adjust the blog's theme to the current weather and not build a weather-station itself. Therefore I grouped similar weather-states into arrays.

  1. function getWeatherCSS($code){
  2. $storm = array(0,1,2,3,4,17,35,37,38,39,40,45,47);
  3. $snow = array(13,14,15,16,18,25,41,42,46);
  4. $fog = array(19,20,21,22);
  5. $windy = array(23,24);
  6. $rain = array(5,6,7,8,9,10,11,12);
  7. $cloudy = array(26,28);
  8. $night = array(29,27,31,33);
  9. $partlycloudy = array(30,44);
  10. $clear = array(34,32,36);
  11.  
  12. if(in_array($code,$storm)){
  13. return "storm";
  14. } else if(in_array($code,$snow)){
  15. return "snow";
  16. }else if(in_array($code,$fog)){
  17. return "fog";
  18. }else if(in_array($code,$windy)){
  19. return "windy";
  20. }else if(in_array($code,$rain)){
  21. return "rain";
  22. }else if(in_array($code,$cloudy)){
  23. return "cloudy";
  24. }else if(in_array($code,$night)){
  25. return "night";
  26. }else if(in_array($code,$partlycloudy)){
  27. return "partlycloudy";
  28. }else if(in_array($code,$clear)){
  29. return "clear";
  30. }else{
  31. return "not found";
  32. }
  33. }

6. Put it all together: Integrate your php script into your blog and add the visual changes

In this tutorial I'll show you how to use this as a scripted dynamic CSS-class to change the blog's background and header - image. Of course you can use it change any other part of your blog's design in the same manner too.

First upload your "weather.php" script to your server and place it under "wp-content">"themes">"{your weather theme}" . Under that path you will also find the "images" folder. I have prepared sample images fitting to this tutorial. Download them here. Now upload them to you server to the "images" folder

Back in your blog's admin area under "Appeareance">"Editor" you will find it listed among the other Template files on the right. If you find it, you can now include it into the theme.

Look for the "header.php" also on the right and open it. Right at the top paste this line of code to include your php file :

  1. <!--? include_once "weather.php" ?-->;

To change the header-Image: Scroll all the way to the bottom and find the header - div. Change the div as shown below to add your css class:

  1.  

The $weather_class will return a different string depending on what weather it is. The div will therefore look for a different style -tag in the style.css file each time.

To change the blog's background: add this body -class in the -tag of the header.php. It will overwrite the style.css just for the background value of the body class:

  1. body{
  2. background: url("<!--? bloginfo('stylesheet_directory'); ?-->/images/kubrickbgcolor_<!--? echo $weather_class; ?-->.jpg");
  3. }

This will directly look into the image folder on your server for the correct background image, each time the weather changes.

Adjustments in the style.css for displaying the correct header-image:

  1. .header-rain {
  2. background: url(images/kubrickheader_rain.jpg) no-repeat bottom center;
  3. }
  4. .header-snow {
  5. background: url(images/kubrickheader_snow.jpg) no-repeat bottom center;
  6. }
  7. .header-clear {
  8. background: url(images/kubrickheader_clear.jpg) no-repeat bottom center;
  9. }
  10. .header-storm {
  11. background: url(images/kubrickheader_storm.jpg) no-repeat bottom center;
  12. }
  13. .header-cloudy {
  14. background: url(images/kubrickheader_cloudy.jpg) no-repeat bottom center;
  15. }
  16. .header-partlycloudy {
  17. background: url(images/kubrickheader_partlycloudy.jpg) no-repeat bottom center;
  18. }
  19. .header-fog {
  20. background: url(images/kubrickheader_foggy.jpg) no-repeat bottom center;
  21. }
  22. .header-night {
  23. background: url(images/kubrickheader_night.jpg) no-repeat bottom center;
  24. }
  25. .header-windy {
  26. background: url(images/kubrickheader_windy.jpg) no-repeat bottom center;
  27. }

You can find all the edited files (weather.php, header.php, style.css) for download here. and images for testing here.
To take things further: You can use the flickr-api to retrieve images fitting to yahoo's weather keywords and patch them up to make a background.

I am sure there are other weather API's out there that take lat/long directly, like the google api, but i found this way the most accessible and best documented. please let me know if you find any faster possibilities. This post was inspired by David's article for csstricks, which lets you post a static US-zipcode and see the weather of the region of that zip-code modify your blog's theme.

Take a look at all the weather conditions the yahoo API provides and sort them into your own groups:

Code Weather Condition
0 tornado
1 tropical storm
2 hurricane
3 severe thunderstorms
4 thunderstorms
5 mixed rain and snow
6 mixed rain and sleet
7 mixed snow and sleet
8 freezing drizzle
9 drizzle
10 freezing rain
11 showers
12 showers
13 snow flurries
14 light snow showers
15 blowing snow
16 snow
17 hail
18 sleet
19 dust
20 foggy
21 haze
22 smoky
23 blustery
24 windy
25 cold
26 cloudy
27 mostly cloudy (night)
28 mostly cloudy (day)
29 partly cloudy (night)
30 partly cloudy (day)
31 clear (night)
32 sunny
33 fair (night)
34 fair (day)
35 mixed rain and hail
36 hot
37 isolated thunderstorms
38 scattered thunderstorms
39 scattered thunderstorms
40 scattered showers
41 heavy snow
42 scattered snow showers
43 heavy snow
44 partly cloudy
45 thundershowers
46 snow showers
47 isolated thundershowers
3200 not available
Anna Grueter

Anna Grueter is a founder at ReignDesign.

11 comments

  1. Hi, can you send me the files already finished?

    the weather.php.. the header…

    i dont know much php, but i can edit the header afterwards… is just to see where and how to put the php strings.

    Sorry about the english.. :p

    Thanks!

    Nice tutorial by the way =D

  2. Hi Eduardo,

    I updated the post above and included the finished weather.php the header.php and the css. file in a .zip file. Let me know if you run into any issues! and send me a link to your blog if it worked 😀

    Anna

  3. Hello, your article help me alot, coz i’m bad in programming.

    BUT is it possilbe to display the weather in C as well ?

    thanks

Leave a Reply

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