Website Weather Integration

Here’s a quick tutorial on how to integrate your own, near real-time weather stats into your website. There are sites, such as AccuWeather (who should, in all honesty, change their name) and Weather Underground, that will do this for you, but I find that you’re 1) beholden to their style and 2) not very accurate. The Weather Underground one for example will say one thing on your site but when you click the sticker (that’s what they call it) it says a completely different thing; their mobile app does the same thing. As with any of these sites that provide weather information, unless you live right next to where they have their sensors set up (typically the closest airport), the readings are likely to be off. This tutorial will be using NOAA, so let’s get started.

What you’ll need first is your location, latitude and longitude. There are a number of sites that you can get that information from; this one works.

Next, you’ll need to download weather.js (right-click save-as) and change the lat & lon variables to your location.

/**
 * Change to your location. The below is Washington D.C.
 */
var lat = '38.907192';
var lon = '-77.036871';

Then add the following to the page you want to integrate weather into by adding a DIV element with the id of weather, like so:

<div id="weather"></div>

Towards the end of your page, before the <body> tag, add the following:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="weather.js"></script>
<script>
    <!--
    $(document).ready(function() {
        // get initial weather
        getWeather();
        // refresh every 15 minutes; 900 * 1000
        setInterval(function() { getWeather(); }, 900000);
    }
    -->
</script>

The above will result in something like the below that will automatically update every 15 minutes.

The following CSS was used to style the current conditions icon:

#weather-icon {
    -webkit-border-top-left-radius:5px;
    -moz-border-radius-topleft:5px;
    border-top-left-radius:5px;
    -webkit-border-top-right-radius:5px;
    -moz-border-radius-topright:5px;
    border-top-right-radius:5px;
    -webkit-border-bottom-right-radius:5px;
    -moz-border-radius-bottomright:5px;
    border-bottom-right-radius:5px;
    -webkit-border-bottom-left-radius:5px;
    -moz-border-radius-bottomleft:5px;
    border-bottom-left-radius:5px;
    border: 1px solid #b0b0b0;
}

And that’s all I have to say about that.

Search WordPress Site Externally

Here’s a quick tutorial on how to perform searches against your WordPress site from another site.

To begin, add the following somewhere on your site’s page (borrowed from WordPress site):

<div id="search">
    <form role="search" method="post" id="searchform" class="searchform" action="<BLOG_SITE_URL>" onsubmit="this.target='search_results'">
        <div>
            <input type="text" value="" name="s" id="s" autocomplete="off">
            <input type="submit" id="searchsubmit" value="Search">
        </div>
    </form>
</div>
<p style="padding-bottom: 50px;"><p>

Where <BLOG_SITE_URL> is the URL to your WordPress site.

The onsubmit call opens the results in a new window (or tab depending on browser) named search_results. You could use _blank, but that would result in a new window every time, using a specific name uses the same window.

End result from above:

Example use:

And that’s all I have to say about that.