How to use SimpleWeather.js with WordPress, Pt. 2

As previously mentioned, I had quite the battle implementing SimpleWeather.js into my custom WordPress theme (entirely my own damn fault). I finally got it up and working, though – and I’m going to outline how I did it, and what I needed to debug to get things working as I wanted.

This tutorial is a basic rundown, suitable if you’re just looking to have the weather from your hometown – or any single, static location  – load in your theme. I’ll explain how I was able to use WordPress to pull up dynamic weather info for different cities in a future post.

The Basic Version

First, download the scripts from SimpleWeatherjs.com. There’s going to be a whole sassy buttload of stuff in there, but what we want is jquery.simpleWeather.min.js. Put it into your themes’s JS folder.

Next, in your functions.php, enqueue this script. If that sounds like crazy moonman lingo, there are docs for the wp_enqueue_script function in the codex. The coles notes is that you’re adding

wp_enqueue_script();

into which you’re going to pass a couple of parameters – here’s what you’re doing, conceptually:

wp_enqueue_script('a handle for you to call your script', 'a place for WP to find your script', 'an array of any scripts this script depends on', 'what version is this','whether you want to load it in the header or footer');

In terms of real code, this is an example of what it could look like:

wp_enqueue_script('simple-weather', get_stylesheet_directory_uri() . '/js/jquery.simpleWeather.min.js', array('jquery'), '', true  );

You’re saying “I’m going to refer to this script as ‘simple-weather’; you can find it in my theme’s javascript directory; it requires jQuery to run (which, FYI, comes preloaded in WordPress); this has no real version number, so don’t add one; and yes, i want this script to load in the footer.”

How do I know if it’s loading correctly?

I’m going to have to assume, for brevity’s sake, that your browser of choice is Chrome (though all browsers have some form of browser inspector). In Chrome, right-click, Inspect Element, and look at the markup before the closing body tag. Your script should be loading there.

Screen-Shot-2014-07-02-at-11.37.37-AM
(The blurry part is me just sparing your from the my local directory path)

If it isn’t loading there, check your console for an error (you’ll see a little red circle with an X).

Screen Shot 2014-07-02 at 11.42.35 AM

If you’ve gotten this far, take a moment, congratulate yourself. Then remember that nothing is ever truly done, it’s just due, and get ready to complete the next step – getting the code in to specify exactly what kind of weather details we want.

How do I specify my location etc.?

You’ll probably be able to complete this part very easily, since it’s exactly the same thing that we just did – but this time, we’re going to include a new, blank JS file to put our custom code into. Let’s call our custom file my_weather.js, and put it into the same folder we put our SimpleWeatherJS file into.

Once again, you’re going to:

1) use the wp_enqueue_script function to load your file. Here’s how I did it:

wp_enqueue_script('simple-weather', get_stylesheet_directory_uri() . '/js/jquery.simpleWeather.min.js', array('jquery'), '', true  );
wp_enqueue_script('custom-weather', get_stylesheet_directory_uri() . '/js/my_weather.js', array('jquery'), '', true  );

You’ll notice that I’m loading my new file after the plugin. This is really important, and screws me up a lot of the time – you have to load JS files in the write order to get them to work. First, WordPress loads its included jQuery file; then we load our weather plugin file, and THEN we can load our custom file. This is because the script we’re going to use is dependant on the simple weather plugin. If our custom script loads first, it’s going to look for the simpleweather plugin, which isn’t there.

Once you’ve included this code, you can test whether it’s loading correctly by putting an alert in the blank file (if you want more details, I wrote about troubleshooting your jQuery in a previous post).

In a World where you have successfully set up your files…

SimpleWeatherjs creator James Fleeting makes setting up this plugin this crazy simple, by giving up a ton of snippets on codepen to work with. There is a ton of tweaking you can do, using everything from descriptions of current conditions, to extended future forecasts, but let’s keep it simple (I like battles I can win). Put the following code into your my_weather.js file

 Docs at http://simpleweatherjs.com
jQuery(document).ready(function() {
  jQuery.simpleWeather({
    location: 'Austin, TX', //this is where you can plug in your location
    woeid: '',
    unit: 'f',
    success: function(weather) {
      html = '<p>'+weather.temp+'&deg;'+weather.units.temp+'</p>'; //this is the type of weather information you've selected
  
      jQuery("#weather").html(html); //this is telling you that this code will load on your page in an element with an ID of div
    },
    error: function(error) {
      jQuery("#weather").html('<p>'+error+'</p>');
    }
  });
});

(You may notice that this code is noticeably missing the ubiquitous jQuery dollar signs. That’s because WordPress wants its jQuery in noConflict mode – so instead of using a ‘$’, you just write the word ‘jQuery’.)

Seal the Deal

Finally, we need to add markup where we want our weather details to render. In my case, I want it to show up in the sidebar – so I’m going to open up my sidebar.php file, and add a div with an id of ‘weather’.

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

Screen Shot 2014-07-04 at 2.11.40 PM
Now refresh your page! Congratulations, computer wizard!

8 months later…

…YES, I fell off blogging pretty hard – but I did keep coding! Since my last post, I’ve done a few things:

I’ve also been a frequent volunteer at Ladies Learning Code events ( I was lucky enough to lead their recent session on Photoshop and Illustrator, slides here), have real reputation points on Stack Overflow (which again, makes me feel mad legit) and was part of the team that built the new, WordPress-based AMA Website.