Building a Custom Surf Forecast Slider with Surfline API
Jul 5, 2023
I recently had a client who owns a surf hostel in Morocco, and they wanted to display the surf forecast for the nearby surf spots directly on their website.
As I started researching possible solutions, I came across a WordPress extension called Unofficial Magicseaweed Surf Forecast that was outdated and no longer functioning properly.
With the lack of a suitable extension, I decided to build my own custom surf forecast slider from scratch.
This article will guide you through the process of creating a custom surf forecast slider using the Surfline API for WordPress.
Let’s dive right in!
Creating a Surf Forecast Slider for the Nearby Spot
My client wanted a surf forecast slider that resembled the one provided by Surfline but focused on the surf spot near his hostel.
This slider would enable website visitors to quickly and easily access up-to-date surf forecast information for the nearby location, including details such as wave size, rate, and period.
Surfline does not provide an official API for accessing their surf forecast data.
However, by examining their network requests and understanding the structure of their data, I was able to discover a way to retrieve the necessary surf forecast information.
In the next sections, I will guide you through the process of building this custom surf forecast slider, utilizing the Surfline API, and implementing it with WordPress.
Let’s get started!
Exploring the Surfline API for Nearby Surf Spots
During my exploration of Surfline’s network requests, I came across a valuable endpoint that provides the information we need for nearby surf spots.
By making a request to the following URL:
We can retrieve the relevant data for our custom surf forecast slider.
The URL requires one required argument, spotId, which represents the unique identifier of the current surf spot. This allows the API to return the nearby spots based on the location of the chosen spot. Additionally, you have the option to include the units argument to specify the unit of measurement.
By leveraging this Surfline API endpoint, we can fetch the necessary information about the nearby surf spots, such as wave height, rate, and period. This data will be crucial for providing accurate and up-to-date surf forecast information in our custom surf forecast slider.
In the upcoming sections, I will demonstrate how to retrieve and parse the data from this API endpoint and integrate it into our custom surf forecast slider.
Let’s dive in!
Implementing the Backend Code
To retrieve the necessary data from the Surfline API, we will need to implement backend code that handles the API request and response.
Here is an example of the backend code that you can use to fetch the data:
It utilizes the https module to make an HTTP GET request to the Surfline API endpoint.
The expected response structure for this function is an object with the following properties: _id, name, waveHeight (with min and max sub-properties), ratingKey, and period.
This structure aims to provide the necessary surf forecast information for your custom surf forecast slider.
By incorporating this backend code into your application, you will be able to fetch the surf forecast data from the Surfline API and use it in your custom surf forecast slider.
Integration on WordPress
To integrate the surf forecast slider on WordPress, you’ll need to follow these steps:
Download and install the Code Snippets plugin on your WordPress site.
This extension allows you to add custom PHP functions without modifying your theme files.
Create a new code snippet and paste the following PHP function:
Save the code snippet, and the function display_api_data_shortcode will be available for use.
To display the surf forecast slider on a page or post, simply add the shortcode [surfline_nearby] in the desired location.
Make sure to publish or update the page or post for the changes to take effect.
Et voilà, you have successfully integrated your custom surf forecast slider on your website!
If you encounter any challenges or need further assistance while implementing this custom surf forecast slider, please don’t hesitate to reach out to me.
I would be more than happy to help you customize the solution to fit your specific needs.
Frequently asked questions
Share this article