I’ve seen some really creative use of weather rss/xnl over the years, often involving flash, and animated rain, etc. I decided to spend a bit looking at how that works. I had read that Yahoo has really accessible methods using RSS, so that’s what I started looking for.

Thankfully, one of the first articles to pop up was from Chris Coyier, from whom I have learned a lot over the years. I have read his WordPress book, Digging into WordPress. What impresses me about Chris is he’s really interested in helping his audience. you can see lots of articles by Chris at css-tricks.com. That’s where I found this really simple method:

1.  Get the data from Yahoo, and use PHP to create a variable that will be used in step 2;  I just scraped his code and put in my location info; it worked out of the box.

2.  Use PHP to dynamically create the class for the page element, in my case the header,like so:

class=”header header-<?php echo $weather_class; ?> where $weather_class is the variable creating in step 1

and

3.  serve up different weather-based images to the different classes.

Here’s the article by Chris (and a guest writer); you can get the php, etc from his article, and you’ll have it working in no time.

Honestly, this is so simple that I spent the most time just creating the graphics.  Hopefully I won’t need a snow graphic any time soon.  Know what I mean?

I also added another touch:  I put yahoo’s weather widget in the head.  But I didn’t want their little images; after all, I went to the trouble to create my own.  I found the js file super easy to modify.  I just found the image: true and changed it to false.  Then I removed the background color and changed the opacity of the text (nested div containing the text) to about 40%.

Lastly, I found a little nugget that you probably already know but I wasted so much time on it that it bears repeating.  Sometimes you find that jquery is suddenly not working, right? you get some weird error that doesn’t make sense – you know your jquery is loading, but the script is kicking an error.  Chris to the rescue again – I found the answer on his blog, via google.

This article explains why the following fix works:

var $j = jQuery.noConflict(); Then, in the script, replace the $ with $j, viola, it works.

Jquery uses the $ symbol as a shortcut to call jquery.  But if that shortcut is unavailable as it often is in wordpress, particularly if you’re loading a lot of, er, stuff on your page.  You can avoid the conflict by setting a new variable.  At least that’s my understanding of it.