MagicSeaweed Surf Forecast Plugin


License: GPLv2
License URI:

Pipe weekly surf forecast to your blog with a WordPress widget.

[get_sidebar name=Blog Sidebar]


Provides widgets to display forecasts of surf data for a selected spot.
Queries the Magicseaweed Surf Forecast API and displays the upcoming week’s predicted surf conditions.
Forecasts wave height, swell height, swell direction, period, wind, and wind direction.
Useful options allow for an uncluttered display in tight sidebars.
Responsive design allows for any width.


1. Unzip the archive and put the `magicseaweed-surf-report` folder into `/wp-content/plugins/` directory.

2. Write to for a Magicseaweed API key and secret.

3. Activate the plugin from the plugins menu.

4. Set your API key and secret in the wordpress admin->plugins->surf forecast.

5. Put a check next to Use MagicSeaweed Data, indicating that you are OK with putting a powered-byMagicSeaweed logo at the top of the forecast data they are providing you with.

7. Select your surf spot on and retrieve the surf spot ID.It will be the last argument in the url string once a location is selected.

Example: 3402 in the url

8. Add a widget to your sidebar and input the spot ID.

9. Select the forecast graphs you wish to display and save your widget.

10. Enjoy the upcoming weeks surf!


Case 1:

there is width to the sidebar in which you are placing the widget.

Suggested settings:

timeLabels: '6 hours'
barLabels: 'yes'
arrows: 'more'

This will display the maximum amount of data.

Case 2:

there is little width to the sidebar in which you are placing the widget.

Suggested settings:

timeLabels: '24 hours'
barLabels: 'no'
arrows: 'less'

This will make the forecast graphs more readable and less cluttered.


1. (left) This is a full width and detail surf report with all graphs and details enabled.
2. (right) This is a graph report with details disabled and container width reduced to that of a small sidebar.

3. This is a closeup of two surf forecast graphs.

Frequently Asked Questions

Do I have to display the Magicseaweed logo?

Yes, Magicseaweed requires it for the use of their surf data.

Why are some of my graphs empty?

Not all data will be available for all spots. You are probably accessing a bouy that doesn’t provide the data you are looking for.
Uncheck that graph in the widget admin.

How can I change the colors on the color-scaled period graphs?

Edit the functions file and look for the $periodColorMap variable.
Input you own hexColors there and the functions will create a new scale for you.

My font doesn’t look right, what do I do?

Edit the surf_report.css file in the includes folder. I would only edit the first element, AKA, #magicSeaweedSurfReport.
Fonts should be edited there because the rest of the report is responsive to those font sizes.


= 1.0 =

This is the first version.

For more help and support, see the plugin’s official page:

DISCLAIMER:  You will have to acquire an API key from MagicSeaweed to use this plugin.

TAGS: surf, report, forecast, surf report, surf conditions, surfing, surf spot, surf forecast, wave rating, magicseaweed