Blog - 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:

if ($_SERVER['HTTP_X_FORWARD_FOR']) {
	$ip = $_SERVER['HTTP_X_FORWARD_FOR'];
} else {
	$ip = $_SERVER['REMOTE_ADDR'];
}

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.

 
function getWeatherClass($ip){
 
	//get viewer's location:
	$url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
	$location_xml = get_response($url);
	$lat = get_match('/<Latitude>(.*)</isU',$location_xml);
        $long = get_match('/<Longitude>(.*)</isU',$location_xml);
 

With a function called get_response we will get the xml response containing the users location based on their IP-address:

function get_response($url){
 
	$request = $url;
        $postargs = 'u='.urlencode('c').'&p='.urlencode('GMXX6091');
    	$ch = curl_init($request);
 
        curl_setopt($ch, CURLOPT_VERBOSE, 1);
        curl_setopt($ch, CURLOPT_NOBODY, 0);
        curl_setopt($ch, CURLOPT_HEADER, 0);
        curl_setopt($ch, CURLOPT_USERAGENT, '');
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
 
        $response = curl_exec($ch);
        $responseInfo = curl_getinfo($ch);
        curl_close($ch);
        return $response;
}

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

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

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:

 
 
function getWeatherClass($ip){
 
	//get viewer's location:
	$url = "http://ipinfodb.com/ip_query.php?ip=".$ip;
	$location_xml = get_response($url);
	$lat = get_match('/<Latitude>(.*)</isU',$location_xml);
        $long = get_match('/<Longitude>(.*)</isU',$location_xml);
 
	//get the url for the yahoo weather api
	$api_url = 'http://ongmap.com/api/?v=1.0&data=weather&lat='.$lat.'&lng='.$long.'&num=1';
        $response = get_response($api_url);
        $yahoo_url =  get_match('/<Link>(.*)</isU',$response);
        $yahoo_url = str_replace("&amp;","&",$yahoo_url);
 
	//get the local weather with yahoo's api
	$yahoo_response = get_response($yahoo_url);
	$weather_code = get_match('/  code="(.*)"/isU',$yahoo_response);
 
	return getWeatherCSS($weather_code);
 
}

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:

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

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

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 :

<? 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:

 
<div class="header-<? echo $weather_class; ?>">
<!-- instead of:
<div id="header" role="banner">-->
</div>
 

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:

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

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:

	.header-rain {
		background: url(images/kubrickheader_rain.jpg) no-repeat bottom center;
	}
	.header-snow {
		background: url(images/kubrickheader_snow.jpg) no-repeat bottom center;
	}
	.header-clear {
		background: url(images/kubrickheader_clear.jpg) no-repeat bottom center;
	}
	.header-storm {
		background: url(images/kubrickheader_storm.jpg) no-repeat bottom center;
        }
	.header-cloudy {
		background: url(images/kubrickheader_cloudy.jpg) no-repeat bottom center;
	}
	.header-partlycloudy {
		background: url(images/kubrickheader_partlycloudy.jpg) no-repeat bottom center;
	}
	.header-fog {
		background: url(images/kubrickheader_foggy.jpg) no-repeat bottom center;
	}
       .header-night {
		background: url(images/kubrickheader_night.jpg) no-repeat bottom center;
	}
	.header-windy {
		background: url(images/kubrickheader_windy.jpg) no-repeat bottom center;
	}

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

---

Enjoyed this post? ReignDesign is a great team of tech-savvy developers providing RIA and mobile services. For more articles like this, subscribe to our blog feed.

This entry was posted on Friday, December 11th, 2009 at 12:52 pm and is filed under Fun, Technology, Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.