Surf Conditions WordPress Plugin

I remember this project as if it was yesterday. The client wanted to display surf conditions on their website. Therefore, I was given the tasking of finding out if it was possible and how long it would take. Of course, the first thing I did was go to Google to see if they had an API. Unfortunately, they did not. I looked and looked and looked, and I came upon the API from MagicSeaWeed.com. I think there were other APIs, but they cost money. It took a while to get an API key (I hate API keys) from MSW, but I finally bugged them enough to give it to me. I bugged them for weeks. I asked and asked and asked, and I finally received.

The API provided everything except for… wait for it… the water temperature. One of the tough things about this project is that I know nothing of surf terminology. I know what a wave is, and I know what water is, but that’s about it. For this project, I learned about swells, crests, troughs, and a number of other surf terms. Righteous.

For the water temperature issue, I had to hack a solution. I used a script file from sea-temperature.com to display some HTML which I hid and then grabbed the information that I needed with JavaScript and saved it in a variable.

WordPress PHP JavaScript Surf Conditions Plugin

This is how the plugin looks on the website I built it for.

Coding the PHP and JavaScript for the Magic Sea Weed API

I did not think the plugin would work, at first, because I was enqueueing the JavaScript, first, and then returning the HTML. From my understanding, it shouldn’t have worked since the JavaScript needed to be added after the HTML was returned by the PHP, but thankfully, it did work. I believe it works because the call to the server is slow and, even though the JavaScript is loaded first, the API returns the data last, after both the JavaScript and HTML have loaded. The other possibility is that the shortcode is part of the DOM loading, and, since I have all of JavaScript in a jQuery statement that only loads once the DOM is loaded, it works.

Once the server (the PHP code) returns the data from the API to the client, JavaScript replaces the placeholder text with the actual data. My eyes glazed over a little bit after re-reading that.

Packaging the Functionality into a WordPress Plugin and Adding User Options

Once I got the necessary functionality working, I took advantage of the WordPress way of doing things. I also added options to allow a user to insert their API key and other information.

WordPress PHP JavaScript Surf Conditions Plugin Normal

This is what the non customized plugin looks like.

Instructions

If you are interested in trying it out, you can download it from the WordPress plugin repository. The instructions to use the plugin are pretty simple. The most difficult part will be getting the API key from magicseaweed.com.

  1. Upload the plugin files to the `/wp-content/plugins/plugin-name` directory, or install the plugin through the WordPress plugins screen directly.
  2.  Activate the plugin through the ‘Plugins’ screen in WordPress
  3. Use the Settings->Surf Conditions screen to add your Magic Sea Weed API Key, a location ID from magicseaweed.com, and another location ID from sea-temperature.com.
    1. Get the API key from magicseaweed.com: http://magicseaweed.com/developer/sign-up. They are currently in beta so you will have to email them for an API.
    2. To get the location ID, visit a location on magicseaweed.com and copy the numbers at the end of the URL. In the following URL, the location ID is 297: http://magicseaweed.com/Mission-Beach-San-Diego-Surf-Report/297/
    3. To get the Sea Temperature ID, visit a location on sea-temperature.com and copy the ID at the end of the URL. Example: In the following URL, the ID is 1115: http://sea-temperature.com/water/money%20point,%20va%20/1115
  4.  Use the shortcode [sea_conditions] to display the widget

This plugin grabs data from an API and displays it in a WordPress widget. The data is information about surf conditions, like swell, wind speed/direction, and water temperature. Magic Sea Weed (the API provider) didn’t offer sea temperature unfortunately, so I had to use another website to get that information.

The plugin uses PHP and a shortcode to display the HTML. The plugin’s JavaScript makes a call to a PHP function. The PHP function retrieves the data from the API and returns it to the JavaScript.

Download the plugin from WordPress.com!