Weather in WordPress with Dark Sky

weather-tileUpdate 1-4-17: Forecast.io is now called Dark Sky. Classes, names, and such have been updated in this post and the various gists/repo.

A recent project called for a “current weather” tile on the homepage. A quick look through the available weather APIs out there lead me to Forecast.io DarkSky.net, which is pretty slick. There are more than a few PHP approaches already put together. I took Guilherm Uhelski’s PHP helper class and expanded it for WordPress.

The purpose of this helper class is to: perform the API call, process and return the JSON response, and store that response for quick reuse. Check out here. Feel free to drop it into a custom plugin for use on your site or your projects.

WP-DarkSky uses the WordPress HTTP API helper functions (as well as transients). If you’re not familiar with external HTTP calls or WordPress’ helper functions, check out this great series of walkthroughs by Tom McFarlin. Here’s a good walk-through on transients. With a good understanding of the HTTP API and transients, this class will be pretty straight-forward.

Next up, sign up for a free account and API key from DarkSky.net, you’ll need that in order to use this helper class.

Okay, now that we’ve got the basics out of the way, let’s use it!

Using It

Here’s a quick example on using this class. At the bare minimum you need an API key, a Latitude, and a Longitude.

Then, it’s a simple matter of calling the elements you need out of the response. Using the magic __get() method, all of the response data is available to call.

Familiarize yourself with the typical response, and the Dark Sky API. From there you can take the response data and build some cool things.

In my case, I wanted today’s minimum and maximum temperatures. Here’s a basic version of the function I use in my template:

How it Works

Using the great HTTP API functions in WordPress, the helper class grabs the API response. It’s then stored in a transient (by default, but this can be overridden – see below), allowing us to store the response for quick recall later. This is important from a page load standpoint, of course, but also critical with services like Dark Sky, which provides 1,000 free calls per day.

It makes sense to grab the forecast once for a set period of time, rather than at every page load. If the latter is true, you could end up with quite a lot of calls to the API and quickly reach your free limit.

For my purposes I only needed the daily forecast, so a 6-hour cache is sufficient (it could be set to 24, but 6 hours allows for 4 API calls a day and accounts for potential changes in the forecast). If you needed, for instance, the current weather, then you could easily reduce the transient time to 5 minutes and still keep your calls below the 1,000/day limit.

Need a fresh of the API call? Just use the get_response function with the first parameter set to true clear the cache and get a fresh API response:

You can modify the other cache settings in the initial arguments or by setting the specific parameter, as shown below:

Bonus: Weather Icons

weather-tileYou might notice that the image shown above (and here) include an icon, yet my example code above doesn’t? Oh myyy, you’re observant!

On my project I built another helper class to extend the original DarkSky\Forecast class and add some awesome Weather Icons (by Eric Flowers).

Drop this extra class into the same plugin as the class above to build some awesome weather outputs. To take the temperature example above and expand it, here it is with a weather icon:

Note that this doesn’t enqueue the Weather Icons stylesheet. You’ll have to do that in your functions.php file. Refer to the Weather Icons Documentation and the wp_enqueue_style function.

Featured Image: Fingers of Heaven by Robert Postma on 500px.com, under Creative Commons License.


Comments

4 responses to “Weather in WordPress with Dark Sky”

  1. Hi, Josh.

    I just found out about https://github.com/joshuadavidnelson/wp-darksky from https://darksky.net/dev/docs/libraries

    Looks like we were working in this around the same time 🙂

    Check out my plugin at https://wordpress.org/plugins/tk-event-weather/

  2. Lindsay Avatar

    We need to show current conditions in the header of our site (so it will be on every page of the site). Using this, I would need to store the transient for just 30 minutes,. If so, does that count as just 1 call every 30 minutes, regardless of how much traffic/visitors/pages we have?

    1. Lindsay,

      Yes, generally. Transients in WordPress are checked/reset based on traffic – every time the page loads with this function, it will check the transient and if it is expired it will run the call, resetting the transient. If your transient is the same name in every location, you’re fine. If you’re placing it in your header.php file or similar, it can be used on multiple pages, but it’s still the same function/transient.

      So, depending on your traffic, you will likely have a single call every 30 minutes (or 48 calls per day). If the transient is deleted or reset by another means (in your code or another plugin or process outside of the scope of this post), you might have additional calls. However, I believe Dark Sky still has 1,000 free calls per day, so you should be within a very generous safety margin. I use this on a client site that takes a reasonably sized traffic load and displays the weather on multiple pages, never more than 50 calls per day so they stay in the free service range. Note, Dark Sky does require attribution in their terms.

      CSS Tricks has a good article on transients if you’re looking for more information.

      Hope that helps!
      Joshua

      1. Lindsay Avatar

        Really appreciate that helpful answer. Thank you!

Leave a Reply

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