Creek Articles

Back to Index


Written by
Travis Bernard
Creek > WordPress Integration       Integration

WordPress Integration

Written by
Travis Bernard

The WordPress plugin allows you to add your Creek radio content to any WordPress website.

It's also open source and available in the Creek Labs — our open source radio development community.

Radio Content + WordPress

The plugin uses the open source Creek Integration Toolkit to add radio components to your website:

  • Audio Players: A player for both your live stream and recorded audio files in one simple framework.
  • Audio Persistence: Listeners can browse your website without interrupting the stream.
  • Show Schedule: A gallery-style show schedule. Fast-loading, easy to explore, and mobile-ready.
  • Show Pages: Pages for each show that list their broadcasts (or archives).
  • Broadcasts and Playlists: Pages for each broadcast that each include their playlists.

Does not add Posts, Events, or Pages

The Creek WordPress plugin only adds Creek's radio content to WordPress. That includes Shows, Broadcasts, their Playlists, and Hosts. It does not include Posts, Events, or Pages, which should instead be left up to WordPress.

Demos

  • KWMR.org — Commuity Radio in Point Reyes, CA
  • NWTC — Northern Wisconsin Technical College

Installation

Installation is a two-part process.

Basic Install Process

  1. Install the plugin from the zip file, and configure the settings so that it connects to your existing Creek website.
  2. Create a Shows page, and add this HTML to the page's text (in HTML mode) — <div id="Creek-Shows"></div>

Full Instructions

1. Add plugin and settings

  1. Download the Creek WordPress Plugin here.
  2. Sign in to your WordPress website and navigate to the Plugins area.
  3. Click Add New at the top, followed by Upload Plugin on the next page.
  4. Browse to the plugin's zip file on your computer, select it, and then click Install Now.
  5. Activate the Creek plugin.
  6. Navigate to the settings for the Creek plugin.
  7. On the Creek plugin settings page, enter your station's domain. If you don't have a custom domain yet, then it will follow the format: stationname.creek.fm
  8. Enter the ID for your station. This is generally the first part of your station's domain (stationname in the example domain above).
  9. If wanted, enable the audio toolbar and audio persistence features by following the instructions on the Creek plugin settings page.
  10. Continue below to install the shows schedule.

2. Add Show Schedule to /shows

  1. In WordPress, create a new page called "Shows" — it can actually have whatever title you want, as long as the permalink is shows (see next step).

  2. On the page editor, change the permalink to shows so that the page is accessible at http://your-domain-name.com/shows

  3. On this page, click the Text tab on the content editor. By using this "text" mode it will allow you to enter HTML without it getting altered or removed by the WordPress content editor.

  4. Paste this code into the text editor:

    <div id="Creek-Shows"></div>

  5. Save and publish this page.

  6. Go to the page to test it. The shows schedule should appear. (If not, ask us for help.)

Developers

A few tips for working more in-depth with the open source Creek WordPress plugin.

Routes Added by Plugin

  • Shows: /shows/name-of-show
  • Broadcasts: /broadcasts/123
  • Hosts: /profiles/username-of-host

Example Request Flow

This is what happens when someone views a show page (/shows/name-of-show) on your WordPress website through the Creek plugin.

The same process applies to broadcasts (/broadcasts/id-of-broadcast) and hosts (/hosts/name-of-host).

  1. At the WordPress website, a user requests the URL: http://your-station.org/shows/name-of-show
  2. The Creek plugin's router parses the path to get shows and name-of-show, and requests the content from the Control Panel at http://stationname.creek.fm/shows/name-of-show?external=1&json_wrap=1&wordpress=1
  3. The remote Control Panel responds with the HTML content for the show. It's rendered by the same themes engine as the Creek Website Platform. The content is provided to WordPress as HTML wrapped inside JSON.
  4. Back at the WordPress website, the Creek plugin's PHP inserts this page content (for the show) as the regular body content for a placeholder WordPress page. (So it shows up in the normal content area, as if you pasted that HTML into the page editor of WordPress, and published it.)
  5. WordPress sends this rendered page to the user's browser.
  6. The user's browser renders the page, and the Creek Integration Toolkit's JavaScript code applies some formatting to a few elements of the content.