The MetaRadio WordPress Plugin is a first in the radio industry – you can now connect a wide range of radio automation systems directly to your WordPress website, allowing you to send Now Playing Song Data directly to your website!

This article shows you how to setup the MetaRadio WordPress Plugin on your website.

Currently, MetaRadio for WordPress has the following features:

  • Receive Now Playing Song Data from your radio automation system (via MetaRadio Standalone)
  • Embed Now Playing data anywhere on your site via Shortcodes
  • Built-in Radio Streaming Player
  • Song Finder
  • Program Guide

To see the MetaRadio WordPress plugin in action, visit our demo site.

Prerequisites

Before you begin, please download a free trial or purchase a license for “MetaRadio + WordPress Plugin“. When you purchase this plugin, you will be sent a ZIP file (WordPress Plugin) and an EXE file (MetaRadio Standalone).

MetaRadio for WordPress works hand-in-hand with MetaRadio Standalone – a desktop app used to connect to your playout system. Before you begin, please download and install MetaRadio Standalone, and connect it to your playout system.

You also need a WordPress website, where you have ‘Administrator’ level permissions, and the ability to upload and install plugins.

If you use WordPress Multisite, you will need ‘Network Administrator’ or ‘Super Admin’ permissions, and the ability to upload and install plugins.

Please note: Once installed, you have the options of assigning the custom user role ‘MetaRadio Manager’ to allow other users to edit the settings in MetaRadio, but nothing else in WordPress. Administration privileges are only required for the initial installation and setup.

MetaRadio WordPress Plugin Installation

  1. Download the ZIP file you were sent when you purchased the MetaRadio WordPress Plugin
  2. Login to WordPress Admin
  3. In the main menu, navigate to Plugins > Add New
  4. Click the button “Upload Plugin” at the top of the screen
  5. Press the button “Choose File”
  6. Select the ZIP file from Step 1
  7. Press the “Install Now” button
  8. If your plugin uploaded successfully, you can now press the “Activate” button

MetaRadio WordPress Basic Plugin Configuration

Now that you’ve installed the plugin, we can move on to basic configuration.

  1. In the main WordPress Admin menu, navigate to MetaRadio > Settings
  2. Enter your MetaRadio WordPress license key into the “License Key” field
  3. Review the other settings, and press “Save Settings” at the bottom of the page

If your license was accepted, your license name and license expiry date will show at the top of the page.

MetaRadio WordPress Plugin – Station Setup

Now that you’ve got the basic settings setup, we can now configure our first radio station.

  1. In the main WordPress Admin menu, navigate to MetaRadio > Stations.
  2. Click the button “Add New Station”.
  3. Enter a name for your station, and make up a secure password (do not reuse an existing password, as it will be stored in plain text). A Short Name will be automatically generated, but you may wish to adjust it as required.
  4. Press the “Save Station” button at the bottom of the page
  5. Once saved, there is a new section on this page where you can enter a list of Stream URLs. If you wish to use the Streaming Radio Player feature in MetaRadio, please add your Icecast or Shoutcast Stream URLs into this page now, and press “Save Streams”

This screen, after creating your station, shows you connection details for MetaRadio Standalone. It also shows you list of Shortcodes and CSS Classes you can use anywhere on your WordPress website.

Connecting WordPress to MetaRadio Standalone

You have now configured your first station, and we are ready to connect it into MetaRadio Standalone. This section assumes you’ve already configured MetaRadio Standalone to connect to your radio automation system.

  1. Open ‘MetaRadio Config’ from the Start Menu on your computer
  2. Go to the Output Menu, find your Station/Input and click “Add Output”
  3. Press “Add Output” and select “MetaRadio WordPress Plugin” from the choices
  4. Enter the URL, Station Short Name, and Station Key as configured in the ‘Station’ section of the WordPress MetaRadio Plugin
    1. The URL will be in this format: http://example.com/wp-json/metaradio/v1/trackinput/
  5. Press “Save Output”
  6. Click “Apply and Restart” to apply your settings.

You can now check to see if data is sent to your website the next time a song plays on-air

Using WordPress Shortcodes

Now you’ve got your first station configured in the MetaRadio WordPress Plugin, you can start using some special WordPress Shortcodes around your site. These shortcodes can be embedded in pages, posts, widgets, within your theme, and within other plugins.

The Station Setup screen in WordPress always shows you a list of available shortcodes, but for your convenience we’ll also list these here:

  • This shortcode embeds the current song title and artist onto your site: 
    [metaradio_now station="station-short-name"]
  • This shortcode embeds the current song title onto your site. 
    [metaradio_now_title station="station-short-name"]
  • This shortcode embeds the current song artist onto your site. 
    [metaradio_now_artist station="station-short-name"]
  • This shortcode embeds the current song album artwork onto your site. The size parameter is the number of pixels high and wide you want the image. 
    [metaradio_now_albumart station="station-short-name" size="100"]
  • Create a songfinder with every active station in the system: 
    [metaradio_songfinder]
  • Create a songfinder with just this station: 
    [metaradio_songfinder stations="station-short-name"]
  • Show a specific field for the show that is currently on-air 
    [metaradio_programnow station="station-short-name" field="title/presenter/time/url/timestart/timeend/imageurl"]
  • Show the list of shows for today 
    [metaradio_programlist station="station-short-name"]
  • Show the list of shows for a specific day of the week 
    [metaradio_programlist station="station-short-name" day="Monday/Tuesday/Wednesday/Thursday/Friday/Saturday/Sunday"]
  • Show a program guide grid (all days of the week) 
    [metaradio_programgrid station="station-short-name"]

MetaRadio also provides some handy CSS classes. You can use these anywhere on your site. Elements that use this class also need the attribute data-stationid=”1″.

  • Anything with this class will be hidden when there’s no song currently playing. 
    metaradio-hide-now-empty
  • Anything with this class will be hidden when there were no songs recently played. 
    metaradio-hide-recent-empty
  • Anything with this class will be shown when there is no song currently playing. 
    metaradio-show-now-empty
  • Anything with this class will be shown when there are no recently played songs. 
    metaradio-show-recent-empty
  • Add this class to a hyperlink to make it open the player in a new window (data attribute not needed for this class) 
    metaradio_openplayer_<stationid>
  • Add this class to a hyperlink to make it open the player in a new popup window (data attribute not needed for this class) 
    metaradio_openplayerpopup_<stationid>
  • Add this class to any element to display the current track’s title: metaradio_station_now_title
  • Add this class to any element to display the current track’s artist: metaradio_station_now_artist
  • Add this class to an <img> tag to show the current track’s album art: metaradio_station_now_albumart
  • Add this class to any element to show the current show’s name: metaradio_station_now_program_name
  • Add this class to an <img> tag to show the current show’s image: metaradio_station_now_program_art
  • Add this class to any element to show the next show’s name: metaradio_station_next_program_name
  • Add this class to an <img> tag to show the next show’s image: metaradio_station_next_program_art
  • Add this class to any element to countdown to the next show: metaradio_station_next_program_countdown
  • Add this class to an <a> tag to link to the station’s program guide: metaradio_station_guidelink

Configuring the WordPress Streaming Radio Player

MetaRadio WordPress Plugin provides an in-built radio streaming player. You can configure this via the WordPress Customizer.

The following settings are currently available:

  • Template
  • Logo
  • Background Image
  • Background Image Size Mode
  • Background Image Repeat Mode
  • Background Colour
  • Text Colour
  • Button Background Colour
  • Button Background Colour (Hover)
  • Button Icon Colour
  • SEO Browser Title
  • SEO Meta Description
  • Custom CSS
  • Ad Code
  • Custom <head> Code
  • Custom Footer Code

This player currently has a simple design, but over time we’ll continue adding different player templates and styles. You can also build a player template into your own theme by using this filter:

add_filter('metaradio_playertemplates', function player_setuptemplates($templates) {
    $templates[] = array(
        'id' => 'my_custom_player_template',
        'name' => 'My Custom Player Template',
        'file' => get_template_directory() .'/player_template_custom.php',
    );
    return $templates;
), 10, 1);

You can include this code snippet within your functions.php file, and then include your player code in a new file called ‘player_template_custom.php’.

Explaining how to customise this player template is an advanced topic, and you will need WordPress development experience. Media Realm is able to provide advanced player customisation services (for a fee). Please get in touch to request this service.