1. Installation

Installing WordPress

If your hosting provider has a software installer like Installatron or Scriptaculous, you will only need to login into your cPanel and select the WordPress software from the Installatron or Scriptaculous software list.

However, if you need to install WordPress manually, there is an official WordPress guide to go through the process, of which can be found here: WordPress manual installation guide

Installing the theme

There are two ways to install the theme:

  1. From the WordPress dashboard, using the WordPress theme installer (easiest).
  2. Manually via FTP

Please make sure that you start from a fresh WordPress installation, without any content or plugins. Once the theme is installed, you can import any content  from previous installations/sites.

IMPORTANT NOTE BEFORE INSTALLING THE THEME:

This theme has a child theme, this allows you to update your site with new theme versions without losing your customization or settings. The following instructions teach you how to correctly install and activate the theme using the child theme, which will make your life much easier going forward.

Automatic theme installation from the WordPress Admin Dashboard:

  1. Login to your WordPress admin panel (by default your website address followed by /wp-admin)
  2. Go to Appearance > Themes
  3. Click Install Themes and then click Upload
  4. Click on the “Browse” button and select the zipped folder of the theme from your computer.
  5. Upload the theme called on-air.zip but DO NOT ACTIVATE IT
  6. Once done click “Return to themes”
  7. Also upload the theme on-air-child.zip, and ACTIVATE on-air-child.zip
  8. Be sure to upload the theme zip file and not the product zip file.
  9. A message will appear near the top of the page that will ask you to install the plugins required to use all the functions of the theme. Select them all and select “install”.
  10. Please wait until the installation has finished.
  11. Once done, you can install the demo website in one click, just click on the One Click Installer. 
  12. During the One Click installation, please be patient, you may have to wait for several minutes for the process to finish. Do not reload or close the page. 
  13. You will see a message once the installation is completed.

TROUBLESHOOTING

If you have problems importing the demo content, edit your wp-config.php file in the root of your WordPress website, by adding these lines of code:

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

If you are still running into trouble, please refer to the official guide found here: http://codex.wordpress.org/Common_WordPress_Errors#Maximum_execution_time_exceeded

Manual theme installation

  1. Download the zipped theme archive and extract it on your local PC
  2. Be sure to unzip the correct theme archives (on-air.zip and on-air-child.zip), which contain the style.css and index.php files. Be sure that you are not uploading the “product” folder. Meaning if the folder that you are going to upload contains some zipped files, then it is not the correct one. The files contained inside .zip archive is the theme that you need to upload.
  3. Connect to your hosting provider using an FTP client (e.g. Filezilla is one of the best free FTP clients, you can get it here)
  4. Navigate to your WordPress installation folder (usually it is not in the root folder but it should be public_html, www or something else, depending on your hosting provider settings, you may need to ask your provider if you are unsure). To confirm that you are in the WordPress folder, you should see the following three folders:
    - wp-content
    - wp-admin
    - wp-includes
  5. Navigate to wp-content/themes
  6. Upload in the wp-content directory the two theme folders: on-air and on-air-child
  7. On your browser navigate to the admin dashboard of your PordPress site (usually yoursite.com/wp-admin)
  8. Go into Appearance-> Themes and activate On Air Child
    1. An alert near the top of the page will ask you to install the plugins required to use all the functions of the theme. Select them all and select “install”.
    2. Wait until the process is completed.
    3. Once this is done, you can install the demo website in one click, just click on the One Click Installer. 
    4. During the One Click setup process, you may have to wait up to several minutes for the process to finish. Do not reload or close the page.
    5. You will see a message once the installation is complete.

NOTE: While you are installing the theme with the automatic installer you may get the following error: “Are You Sure You Want To Do This?” this means that your hosting providers server configuration doesn’t allow the upload of the file due to its size. To work around this problem please upload the theme via FTP.

1.1 Updating theme and plugins

You can always download the updated versions of the theme and its plugins using the original download link provided with the purchase confirmation from radiowordpresstheme.com.

Important notice before proceeding:

Updating theme and plugins is a fast and simple procedure, but we recommend that you take a complete server backup before proceeding, store the backup on your local computer or another secure location saving all of the server content and the MySql database(s) this way if anything goes wrong during the update process, you will be able to role back your entire site.

When the update process is executed correctly, no content will be deleted or modified.

What’s changed?

Please see the file called “changelog.txt” within the theme’s folder to know which functions have been added in the current version.

How to update the theme:

  1. Unzip the product folder, and find the theme subfolder called 03. THEME TO UPLOAD
  2. Unzip the theme folder called on-airX.x.x.zip
  3. Using any FTP client like FileZilla (free) connect to your FTP server, and navigate to the folder wp-content/themes (Watch 3rd party video tutorial)
  4. Upload the theme folder overwriting the existing theme folder
    Screen Shot 2016-01-24 at 17.37.22

 

If you get a popup message, select “Apply to current queue only”. As shown below, in FileZilla.

Screen Shot 2016-01-24 at 17.40.12

How to update the plugins:

  1. Unzip the plugins provided in the Product folder 02. PLUGINS
  2. You don’t need to update the “easy_installer” plugin if you don’t need the demo content to be installed.
  3. Using your FTP client, navigate to the wpcontent/plugins subfolder
  4. Upload these plugins overwriting the old versions
  5. Always choose Overwrite and Apply to current queue if prompted.

 

1.2 Customization

How to customize the colours, logo and sidebars

customization-screen

This theme is easily customized using the WordPress native customizer interface, which allows you to see in real time the results of your customizations before saving and publishing them.

After installing the theme the customizer will be available in appearance -> Customize.

From this interface you have the following available:

  • Music player: if disabled, a search box will appear in the top bar instead.
  • Enable streaming music player: allows you to hide the player while keeping the settings.
  • Player type: use the theme featured player or use a player loaded via javascript (more instructions follow in the next chapter).
  • Autoplay on page open: even if “off”, the music player will “keep” its state after being activated first time, for a better user experience.
  • URL of the MP3 stream: all common radio streaming services provide an mp3 streaming URL. In most cases, you can create your stream URL by simply adding a .mp3 to the streaming end of the URL. If you use a service like Shoutcast, wavestream or icecast, the URL of the mp3 stream will be provided in your control panel. More information on this follows in the next chapter of the manual.
    IMPORTANT: To work with the built-in player, the stream URL must end with “.mp3″ in order to be recognized by the player. More information can be found in the dedicated section of this manual.

Social links:

  • Add the URL’s of your social media accounts in order to have a link icon appear in the footer.
  • You need to click save to see the icons in the footer.

Branding:

  • Upload a logo for the top bar. From this section you can also style the size and position of the logo.
  • Upload a .ico icon. (you can generate your favicon here: http://www.favicon-generator.org/)

Website layout: 

  • Chose the maximum width of the website. It is 85% x 1280 pixels width by default.
  • Hide or show the secondary header bar which comes on top of the main menu bar.
  • Choose the number of sidebars. In all the normal pages and post templates, you have a 2 column layout. By enabling the secondary sidebar, the pages with 2 columns will have a new 3rd sidebar to host extra widgets. The content area will be smaller.
    To add widgets to the secondary sidebar, put them in the “Extra Sidebar”.
  • Animations on scroll: some elements may appear on scroll if you enable this option.

Footer: the footer text will be displayed in the sidebar.

Google fonts: enable and choose a colour for your titles and for content

Colours: customize your site by picking your favorite colours. As this theme is based on the material design, we strongly recommend to choose tints that fits with this style.

  • Especially the primary and accent colors should be “bright colors” be kind to your visitors and remember the text should be readable in black or white.
  • To create your own palette of colors, the most useful free resource online is this: http://www.materialpalette.com

 

Navigation: this theme has 3 menu locations

  • Primary: 2 level menu located at the right of the logo
  • Secondary: 1 level menu to host useful links in the secondary top bar (no submenus)
  • Mobile: the menu for mobile devices can be crafted in an ad-hoc manner, specifying a new menu only for tablets and smartphones

Widgets:

  • The default settings have 1 main sidebar and 3 footer sidebars
  • To enable the 3rd sidebar on the right, use the settings of the website layout described above
  • After enabling 3 sidebars, an extra sidebar will appear in the widget section

Footer App Links
Screen Shot 2015-05-06 at 21.48.23

  • This section is designed to display icons of the most popular devices, to make it easy to link to the app of your radio or to link to the files for different players like Winamp or Windows Media Player.
  • You can define a background image also.
  • The icons are fixed and the images are located in the img folder of the theme.

Important: this theme is responsive and based on materialize.css. While opening the customizer on small screens the website will go in “mobile” mode if the preview width is less than 750 px.

1.3 Menu

Are you new to wordpress? Here is “how to create a menu” in WordPress 3.6.

How to create a new menu:

  1. Go into appearance -> menus
  2. Click “create a new menu”
  3. From the left column, add the pages to your menu
  4. To set a page as sub page of another, drag it slightly to the right
  5. To re-arrange the menu items, simply drag and drop them into a new order
  6. To delete a menu item, click on the arrow of the item and click “remove”
  7. Click SAVE when you are happy with your layout 

Adding the menu to its location:

  1. Go into appearance -> menus
  2. Click Manage locations
  3. Using the dropdown menu, choose a menu for each location
  4. Please note that the secondary menu doesn’t support 2nd level links
  5. A menu must be specified for the mobile version. It supports 2 menu levels

Please note that the secondary menu location supports only 1st level items. Second level items will not appear.

Menu Icons:

This theme supports icons only for the first level items of the following locations:

  • Secondary Menu
  • Mobile menu

Icons are not allowed in the main menu.

To add icons to the menu do the following:

  1. Select the proper menu in the menu administration page. Choose a menu that will fit in the mobile or secondary location.
  2. In the top right corner of the page, open Screen Options, and enable the CSS Classes as shown below:
    Screen Shot 2015-05-06 at 17.15.24
  3. For each item of the secondary menu or first level items of the Mobile menu, you can specify an icon class. You can use QTicons or Materialize icons.
    Just add the relevant class to the menu item.
  4. The QTicons are defined in Appearance -> manual and support
  5. The Materialize classes are defined here: http://qantumthemes.com/demo/onair/icons/
  6. To add the icon, just put the selected class in the CSS field:
    Screen Shot 2015-05-06 at 17.18.43
  7. Once you have added all your icons, click “Save”
  8. Remember that icons are not available for the Main Menu location

1.4 Support

 

  1. You can visit the Support Forum
  2. Please search for any keyword that describes your issue
  3. If you don’t find a solution, please register and start a new topic
  4. Requests are answered within 24 hours except at the weekend when our offices are closed
  5. Please don’t send support requests in the Themeforest Item discussion, that’s for pre-purchase questions
  6. Please don’t use e-mail requests
  7. If you have lost your purchase code, you can re-download it here: http://themeforest.net/downloads
  8. Our support team will not answer any request that is already answered in this manual

2. Radio Music Player

In this chapter you will learn how to use the music player for your web radio.
You have 3 options:

  1. Use the built-in music player, providing a valid mp3 stream URL
  2. Use javascript code to implement your player
  3. Edit the player source file to embed your own html player

1. Integration type 1: using the built-in music players

To use the built-in players, you need the mp3 URL of your radio stream.
To obtain the mp3 URL, it is very simple, usually web radio stations provide a file that will allow you to stream the broadcast on iTunes, Winamp, Windows Media Player and other players.

Here are a few examples:

  • http://neon.wavestreamer.com:3540/listen.m3u?sid=1
  • http://neon.wavestreamer.com:3540/listen.asx?sid=1
  • http://neon.wavestreamer.com:3540/listen.pls?sid=1

You could use one of the URL streams above, but you will probably want to use you own URL or one from another radio provider:

  1. Get the URL of the player from your radio provider. For Wavestream users, you find this url in the integration tools:
    integration
  2. Download one of the files for integration. It is a simple text file, masked as a different format.
  3. Rename the file in player.txt
  4. Open this file with any text editor, like notepad (PC) or TextEdit (Mac)
  5. You will find something like this:
#EXTM3U
#EXTINF:-1,06 AM Ibiza Underground

http://173.192.105.231:3540/Live

This URL will be your mp3 stream, just add “.mp3″ at the end, like this:

…….yourUrl/Live.mp3
To be sure that your mp3 stream is valid, open it in the browser, with a modern browser it should render as a music player, and play the radio stream:
radio-stream

If the radio stream works correctly, you can integrate it in your site.

  1. Go to your wp-admin page
  2. Go to appearance->customize
  3. Open the music player section
  4. Set “Enable streaming music player” to true
  5. In Player Type select “Featured Player” or “360 Animated Player”
  6. Set the URL of the mp3 stream (the one created before)
  7. SAVE THE SETTINGS and close the customizer.
    These settings, for performance reasons, will not refresh automatically in the customizer. You need to save and refresh the page, or open your site in another browser tab.

 

2. Integration type 2: use a javascript code to implement your player:

Some radio providers like Wavestream allow you to create a custom player. To implement these players you are usually need to copy and paste a javascript URL to your site.
js-player

From the provided code, extract the URL of the javascript from http://……….. until the quotes (“).
The result will be a url like this:
http://player.radiocdn.com/iframe.js?hash=f2570b65963bfcc20a68b29043d9f6e1886ac53c-118-41

If you can configure your player, choose something with a size that fits under the 80px of height. Most radio providers offer this service as a separate cost.

Once you have the URL of your javascript player, you can proceed with the integration of it to your WordPress website:

  1. Go to your wp-admin page
  2. Go to appearance->customize
  3. Open the music player section
  4. Set “Enable streaming music player” to true
  5. In Player Type select “External Javascript”
  6. Set the URL of a javascript player (the one created before)
  7. SAVE THE SETTINGS and close the customizer. 
    These settings, for performance reasons, will not refresh automatically in the customizer. You need to save and refresh the page, or open your site in another browser tab.

3. Integration type 3: edit the player source file to embed your own html player

If the previous 2 types of integration doesn’t fit your needs, you can choose to use your own html code, by putting it in the top bar.
To proceed with your own HTML integration, you will need to edit a source file of the theme.
For this reason, we recommended that you use the provided child theme instead of the parent theme. By using the child theme, you will not loose your customizations when a new version of this theme comes out, and it is the best way to integrate your customized files.

How to integrate the html code of your radio player:

  1. On your computer, create a file with any text editor (for PC we suggest notepad and for MAC we recommend Komodo editor which is Free: http://komodoide.com/komodo-edit/)
  2. In the new file, put the HTML that you need to integrate your player
  3. Save the file on your desktop and call it “part-playermodule.php”. The name needs to be exactly this. Pay attention that your text editor doesn’t add any file extension like .html or .txt.
    The extension of the file needs to be .php
  4. Using an FTP client like FileZilla Client (Free: https://filezilla-project.org/) connect to your hosting space
  5. Locate the folder of your child theme in your hosting space (wp-content/themes/on-air-child)
  6. Upload the file to the child theme folder

custom-player-instructions

2.1 Multiple radio channels

Since theme version 1.1.6 you can add multiple radio channels.

Only the featured player supports multiple channels, adding a switch button to change radio station.

Screen Shot 2016-01-24 at 18.06.13

To set the Featured Player, go in Customizations -> Music Player Settings

Screen Shot 2016-01-24 at 18.07.34

The default radio channel, added with the customizer panel, will be displayed as first.

After switching radio channel, if the player status is “on” (playing) the music will resume after page change on the chosed channel.

Add radio channels:

Click Radio Channels -> Add New
Screen Shot 2016-01-24 at 18.04.01

Set the stream url (mp3 format) in the MP3 STREAM URL field:

Screen Shot 2016-01-24 at 18.03.32

2.2 Popup Player

You can add a Popup button in the Menu bar from theme version 1.1.6.

Screen Shot 2016-01-24 at 18.25.05

To add the Popup button:

  1. Go to Appearance->Popup Player
  2. Set text, width and height of the popup
  3. Set the URL

You can link to any custom html page which can be in any server, i.e. You can create from cratch an html page to display in the Popup window, and upload it wia FTP in your server, then link to it from the settings.

In alternative, you can create a page to be loaded in the Popup player, which will feature a music player, supporting multiple channels, and a content.
The new popup templates contains also a sidebar, useful to display your favourite widgets in the Popup window.

 How to create a Popup Player Page

  1. Go to Pages->Add New
  2. Choose the Page Popup Player in the Page Attributes
    Screen Shot 2016-01-24 at 18.30.30
  3. The popup can copntain any custom content, as a normal page
  4. You can set custom widgets to display in the Player in Appearance->Widgets and load them in the “Popup Widgets” sidebar
    Screen Shot 2016-01-24 at 18.31.53

2.3 Shoutcast song titles

You can now display the song title (if your web radio has a valid shoutcast XML feed) in the On Air header part:

screen-shot-2016-11-15-at-15-18-16

SINGLE RADIO WEBSITE

  1. For single radio station, in the customizer -> Music Player settings, specify host and post as for example “173.192.105.231″ and “3540″
    The port is generally specified at the end of a Shoutcast URL separated by “:”screen-shot-2016-11-15-at-15-25-17
  2. In customizer, OnAir Header Info, you can choose to display the shoutcast feed after the show title or instead of it

MULTI RADIO WEBSITES:

  1. Add host and port in the fields of each radio station
    screen-shot-2016-11-15-at-15-20-42
  2. In appearance -> customize, ON AIR Header Info, select “Instead of show title”, so the xml feed will be used for each radio
  3. When playing a radio with a valid feed host and port, it will appear in the “On Air” space on the top bar.
    The channel is stored in a cookie to work also after changing page.
    If you click on a radio channel with no feed info, the On Air area will stay blank.

 

Are you facing any problem with this?

First of all, be sure that your radio station is providing a valid shooutcast feed, and that your mp3 podcasts and tracks have the id3 meta tags.

Then, you can display javascript errors in this way:

  1. Go in appearance -> Customize and scroll until Development Options
  2. Enable the error logs
  3. Visit your site with chrome, and using the Chrome menu, go in More Tools->Developer Tools
  4. Click on the Console and check if you have error messages from the theme

3. Posts and Pages

Creating news posts:

To create a news post:

  1. Log in your wordpress admin page (usually yoursite.com/wp-admin)
  2. Click “Posts” on the left menu
  3. Click “Add New”
  4. After creating a title and some content, you can add a featured image and some tags/categories
  5. To see the result before publishing, click “Preview”

To create a “Blog” page with the list of the latest news, please read the rest of this chapter.

Creating normal pages:

To create a new page:

  1. Log into your wordpress admin page (usually yoursite.com/wp-admin)
  2. Click “Pages” on the left menu
  3. Click “Add New”
  4. Add a title and some content. This theme is compatible with all the common content editors like WP Bakery Visual Composer (not included)
  5. Choose the template that fits your needs between Default, Page no Sidebar and Page Fullscreen

Every page can have a parallax header. The content can contain images or text.
Please note that the parallax headers that are created with the One Click setup has text in white color, which can be invisible in the editor.

The suggested size for header image is 1600 x 700. We suggest you compress header images with the “save for web” function of Photoshop and keep them under the 150 Kb.

Creating Blog pages:

Blog pages are lists of latest posts in chronological order. This theme provides 4 different blog layouts:

  • Blog (normal list of posts with a sidebar)
  • Blog + Show slider (in the first page of the archive there is a slider with the shows currently on air)
  • Blog 2 columns (except sticky posts, the posts are ordered into 2 columns, plus a widget sidebar)
  • Blog 3 columns (there is no sidebar)

To create a blog page:

  1. Log in your wordpress admin page (usually yoursite.com/wp-admin)
  2. Click “Pages” on the left menu
  3. Click “Add New”
  4. Add a title (content is hidden).
  5. Choose the blog template that fits your needs
  6. Save

To add the blog page to your chosen menu, please check the “Menu” chapter of this manual.

Creating a Team Members page:

  1. Add team members by going to Team Members -> Add new team member
  2. Create a new page (Pages -> Add new)
  3. Select the Team Members template
  4. Select a title
  5. The content for this template is hidden, so it is useless to put any in here
  6. Click Save

Creating Chart Archive pages:

  1. Add the charts following the specific chapter of this manual
  2. Create a new page (Pages -> Add new)
  3. Select the Chart Archive template
  4. Select a title
  5. The content for this template is hidden, so it is useless to put any in here
  6. Click Save

How to embed specific charts in a page/post/show…

  1. Create a chart as outlined in this manual
  2. Create a page, post or whatever other content you need. Charts can also be embedded in a show page.
  3. Add the shortcode [embedchart id="999"] in the content area
  4. Instead of 999 use the ID of the selected chart
  5. Click save and the chart will appear on the page.

Creating Video archive pages:

  1. Create videos using the Videolove plugin provided with the theme
  2. Create a new page (Pages -> Add new)
  3. Select the Video Archive template
  4. Select a title
  5. The content for this template is hidden, so it is useless to put any in here
  6. Click Save

Note: creating the video archive page will not create a filterable video list.
To add a filterable video list to a page, create a page and add the [videolove] shortcode. The Videolove plugin provides different design settings in the Settings section of your wp-admin.

3.1 Podcasts

How to create a new podcast page

  1. Click “Podcast” > “add new”
  2. Enter the title and a description
  3. Add an Artist name, podcast name and a date
  4. Add the podcast link (this can be a link from mixcloud, soundcloud, youtube or a simple mp3)
  5. Upload a featured image
  6. Suggested: insert some “Podcast filters”, which you can use as category archives from the Menu. They will appear at the bottom of the podcast page.

 How to create a podcast archive:

  1. Click “Pages” > “add new”
  2. Enter a title (the description will not appear to the user)
  3. Choose Podcast Archive as Page Template on the right column, in the page attributes section
  4. Save.
  5. Optional: you can go in Appearance > Menu to add the new page to your website’s menu.

3.2 Podcast series

If you want to list the latest podcasts of a certain show directly in the show page, or anywhere else, you can now use the new shortcode:

[qtpodcast quantity="3" podcastfilter=""]

ATTRIBUTES:

  • quantity: defines the amount of podcast to display
  • podcastfilter: filter results using the slug of a podcast filter. Podcast filters are a taxonomy for podcasts. You can add them to any podcast using the attributes:
    screen-shot-2016-11-15-at-14-55-32
  • Remember to use the SLUG as parameter in the shortcode. To see the slug you can go in Podcast -> Filters and click “Quick Edit”
    screen-shot-2016-11-15-at-14-58-34
    screen-shot-2016-11-15-at-14-57-05

4. Show Schedule

A schedule is a collection of shows. In order to use the built-in Auto Slider, which can display the upcoming show and find what is on air, the schedule must be compiled filling in the timing and day of the shows. More detailed information on this will be found in the following chapters of this manual.

To create your schedule, you’ll need to

  1. Create the shows that will go in the schedule
  2. Create the schedules (collections of shows, can be a day of the week or a schedule can cover all week or specific days)
  3. Add the schedule to whatever page you want in a click

4.1 Creating shows

How to create a new show:

  1. Click Shows -> Add New
  2. Fill in a title, description and genre(s)
  3. The genres will became archives that will group the shows together, with the logic based on the category instead of the time as it happens in the schedule
  4. Subtitle and subtitle 2 are only available on the specific page of the show
  5. The parallax header image will be used as header in the singular “show” page. Suggested size: 1200 x 768. This image will appear only as a header.
  6. Featured image: is the picture used in the schedule and as main image in the show page. Suggested size: 1200 x 768. This image will appear everywhere as show’s main image.
  7. Short show description is used in the schedule. If missing, an excerpt will be used. It allows basic mp3 tags. No js or css are allowed here.
  8. Remember to SAVE

Rules:

  • Any show can appear in unlimited schedules and unlimited times
  • When editing a show, it will change in every schedule where it appears
  • A show doesn’t need to be duplicated in order to appear in multiple schedules. If for example your timetable is a week and a show is every morning, you don’t need to create 7 copies of the show. The item is re-usable across unlimited schedule pages.

4.2 Creating a new schedule

Schedules are lists of shows (or events) with a timing connotation.

Important things to know:

  • A schedule is basically a list of events (shows)
  • A schedule can represent independently a day, a part of a day a recursive day of the week, or a specific date
  • A single schedule can be used to gather a series of events of non consecutive days, for example in the case that your radio station has the same shows on Monday and Wednesday. The software will recognize that the show on air and is able to parse a schedule that has been connected to multiple days (or a whole week)
  • If there is a schedule connected with a day of the week and another schedule connected with a specific day (like 25 December 2015 which is Thursday) the specific schedule will be chosen by the software to display the show which is “on air” instead of the schedule of the recursive day of the week, which has lower priority.
  • If you need to duplicate a schedule, you can use a plugin such as “Clone Post” from the free repository of WordPress. All the shows will be copied with it, and it is easier to create a whole calendar for your station.

How to create a new schedule:

  1. Click Schedule -> Add New
  2. Fill in the title. The title can be whatever, it is not used by the software to do anything fancy. It is just text.
  3. Eventually pick a single date. This is useful in case you have a different timetable for every day of the month and you want to prepare in advance a schedule for each day.
  4. Eventually pick a day of the week, useful for recursive schedules that are the same every week.
  5. Please note: without picking a single day or a week day, the auto slider will never be able to pick the actual day and find which show is going on.
  6. The order of the schedules is based on the “page order” attribute, on the right of the page. If you don’t see the page order attribute, open the “Screen Options” menu at the top right hand corner of the page, and enable “Page Attributes”
  7. Add the shows: by clicking the green “plus” button you can add new shows. You can add unlimited shows for each schedule. Every show can start and stop at whatever hour you like. Shows can be overlapped, in this case, they will all appear “on air”.
  8. Remember to SAVE

4.3 Creating a schedule page

Screen Shot 2015-05-06 at 19.01.42

This theme comes with 2 very powerful tools to display your schedules:

  1. The Schedule grid (which is a timetable or a calendar of shows)
  2. The  Show Slideshow

Both these functions are served by the QT RadioSuite Plugin, which comes with the theme. Please note that this plugin works only with this theme as it is based on the QantumMaterial framework.

During the installation process, a message should have popped up asking to install the plugin. If it didn’t happen, you can install it manually by going to Appearance -> Install plugins. If this procedure doesn’t work, you can unzip and upload it via FTP to your online WordPress installation in the folder wp-contents/plugins.

Alternatively, you can install the plugin manually:

  1. Unzip the theme folder on your computer
  2. Navigate to plugin/tgm
  3. Copy the zipped plugin (qt-radio-suite.zip) to an easily accessible path of your computer
  4. Then in your WordPress admin go in Plugins and click Install New
  5. Click Upload
  6. Choose the file qt-radio-suite.zip and upload it, then activate when ready.
  7. The QT RadioSuite doesn’t have a settings page or administration panel. It can be used simply by selecting the checkboxes that appear as custom fields of any page (not post)

Once the plugin is installed, and once the schedules and shows have been created, you can easily display them in every page.

Create a Show Schedule / Show Slider page:

Method 1:

  1. Create a new page
  2. Use a normal template or a blog template
  3. In the “Page Extras” check the elements that you want to display
  4. In the case of a Blog template, to hide the header title, check also “Hide Title Of The Page”.

Method 2:

You can display the schedule inside of the content of a page by using shortcodes, placing the following in your page or post content:

[showgrid]

[showslider]

If you have visualization problems, try first to deactivate any extra plugins except the QT RadioSuite, and retry. 99% of the time issues are caused by other plugins.

Method 3:

Create a new page, and choose a template between

  • Page Schedule
  • Page Schedule and Show Slider

template-schedule

 

Schedule Layout:

The schedule can have 2 different layouts, grid or list. The user can switch layout using the icon on top of the grid, but you can chose your default preference by editing the layout settings in Appearance->customize on your wp-admin page.

schedule-layout

4.4 Creating a single schedule page

If you want to display a page with the events of a single schedule page, since theme version 1.1.6 this is possible.

After creating a schedule and adding events to it, go in Appearance->Menu.

Be sure that you are  displaying the schedule pages in the left column, by going in the Screen Options and enabling “Schedule

Add the schedule to the menu like any normal page: select it and click “Add to Menu”

Screen Shot 2016-01-24 at 18.38.16

4.5 Schedule grid and Slideshow Time Format

Fomr theme version 1.1.6 you can switch the time format in Appearance -> Customize -> Schedule Settings.

Requires to update the QT Radio Suite plugin with latest version provided with the theme.

Screen Shot 2016-01-24 at 18.21.42

4.6 Multiple schedule grids

From OnAir version 1.2.8 is possible to create separate weekly schedule grids.

A single schedule is a day, which can be a day of the week or a day of the month.
Until version 1.2.7 of the theme, it was possible to create only 1 schedule grid, which was showing all the schedule posts at a time.

From version 1.2.8 you can create separated schedule grids, for example for different channels of a radio, or for different radio stations.

To create different schedule grids, which will list different schedules, please proceed like this:

  1. Go in Schedule->Schedule Filters
    screen-shot-2016-11-15-at-14-44-09
  2. Add a schedule filter for each separate timetable (or schedule grid) that you want to have:
    screen-shot-2016-11-15-at-14-44-47
  3. Now you can go in the existing schedules, or create new ones, and choose the previously created filter from the right dropdown:
    screen-shot-2016-11-15-at-14-46-27
  4. Now you can add via shortcode all the schedules tagged with a specific schedule filter using the shortcode

    [showgrid schedulefilter="radio-one"]

  5. Note: you can add filtered schedule grids into any page or post, but you can’t filter the schedules while using the schedule page templates, or while adding the show schedule via checkbox in the page options, as this will display all the existing schedules ignoring the filters you created. The only way to display specific schedules in a timetable is by using the shortcode.
  6. You can filter the “Now on air” top bar output by adding a filter slug in Appearance->Customize->On Air header info

    screen-shot-2016-11-15-at-15-22-20

  7. Note: the top bar on air info can only display the data from 1 schedule for each website.

 

5. Music Charts (Top 10)

Screen Shot 2015-05-06 at 20.49.29

What to know

  • You can create unlimited charts
  • A chart is a list of tracks, each one with its own mp3/soundcloud sample, picture and buy link
  • Every chart can have unlimited tracks
  • The charts archive is ordered chronologically (like posts)
  • You can embed a chart into any other content (page, post, show…) to do so, see the Posts and Pages section
  • To display a list of all charts, see the Posts and Pages section

How to create a chart:

  • Go to Charts -> Add New
  • Enter a title and text
  • Set a featured image (best view is in a 16/7 proportion)
  • Set the chart categories
  • Click Save
  • Once saved, using the section under the main content, you can add unlimited tracks using the + button
    Screen Shot 2015-05-06 at 20.26.22
  • To change the order of the songs, drag and drop each song using the cross on the left of the “fields” text, on the header of each song
  • To remove a song, click on the red icon that appears on the header of each song.
  • If you have problems adding the tracks, save the chart before proceeding (even using the Save Draft function). In some browsers minor issues can occur if you don’t save before adding each track.
  • Publish the chart.
  • You can link to specific charts or chart categories in the menu by enabling them in the Menu admin.

How to link charts from the menu:

  1. Go to appearance -> menus
  2. Click “Screen Options”
  3. Enable “Charts” and Chart Categories”
  4. The new items will be available in the left columns of the menu page. Select what you want to add and click “Add to Menu”
    Screen Shot 2015-05-06 at 20.32.06

 

Alternatively, create a new Page and use the “Chart Archive” template, then this page will be automatically updated with every new chart. You can easily add this page to every menu using the  Appearances -> Menus functions
Screen Shot 2015-05-06 at 20.34.53

5.1 Chart Widget

From the OnAir version 1.1.6 you can create Top 10 Widgets, displaying the tracks from a specific chart, or from the latest published chart, which will be automatically updated when publishing new charts:

Screen Shot 2016-01-24 at 18.14.26 Screen Shot 2016-01-24 at 18.14.43

6. Team Members

Adding Team Members

This content type is specially made for the staff of the radio station. You can create unlimited team members, and each of them can have one or more “roles” in the radio or company.

  • Go to Team Members -> Add New
  • Set the name of the member as title of this page
  • Insert the biography as the content
  • Short bio: will be displayed in the archives
  • Parallax header image: if set, will create a big visual header in the single Member page
  • Social links (facebook, twitter & ….): set a link to the social profile of the team member, which will be translated into a clickable icon
  • Featured image: will be used on top of the page content, and in the archives as featured image
  • Types: the types are a taxonomy exclusive for the team members. You can use it for example to define the role of a member within the organization
  • Remember to Save and Preview the new Team Member page

Adding a Team page:

  1. Check the Post and Pages section: creating a Team Members page

Adding links to specific members or member types (roles) in the menus:

  1. In Appearance -> Menus, use the “Screen Options” in the top right corner to enable the team members pages
  2. The new contents will be available to be added to the menu
  3. Remember to select the correct menu where you want to add your new links
  4. Save

Screen Shot 2015-05-06 at 20.45.36

7. Videos

Screen Shot 2015-05-06 at 21.04.46
This theme comes with the QantumThemes Videolove Plugin, which allows you to manage a videos archive, adding videos from Youtube and Vimeo.
The video single page is displayed with a full width cinema-style video presenting a nice experience to the visitor. Videos are rendered in a responsive fashion without using any other plugin.
You can create 2 types of archive: a filterable videolove video page or a simple video archive page.

How to add videos:

  1. Be sure that the Videolove plugin is installed and active. If it is not, go to Appearance -> Plugin installation and install the plugin.
    If the plugin cannot be actived in this way, you will find it on the product page and you can unzip and upload it via FTP to wp-contents/plugins.
    If you install the plugin manually via FTP, be sure that after you visit the Plugins page of your WordPress website to activate it.
  2. Once the plugin is active, go to Video -> Add new
  3. Put in a title and a description
  4. You can also set an order in the page attributes
  5. Set some filters. Filters are like a category, but when viewing the videos with the [videolove] shortcode they will become clickable filters for your video archive
  6. Set the url of the video in the separate custom field
    Screen Shot 2015-05-06 at 21.06.31
  7. Click Save

How to create a video archive:

You can create a video archive in 3 ways:

  1. Create a new page and use the Video Archive template
  2. Add the [videolove] shortcode to any existing page
  3. Go to Appearance -> Menu admin, using the screen options, enable the video sections, and add the Video Filters to the menu, this way you can create pages with categorized lists of videos

8. Contact Forms

Screen Shot 2015-05-06 at 21.12.26

This theme is compatible with the Contact Form 7 plugin, bundled with the theme installation. You can use any other form plugin, but support is not provided by us for the integration of third party software.

Contact Form 7:

 

9. Banners

Easily display banners from your sponsors, define an expiration date, and monitor clicks with the built-in QantumThemes Banner plugin.

Screen Shot 2015-05-06 at 21.22.53

 

How to create a new banner:

  1. Be sure that the Qantum Banner plugin is installed in your plugins. If installed, a “banner” link will appear in your WP Admin menu. If there isn’t please go to: appearance -> plugin installation and install it from there. Otherwise, install it manually via FTP by unzipping the qt-banner.zip file provided with the product, upload it to the wp-content/plugins folder and activate it from the Plugins page of your WordPress Admin page.
  2. Once installed, go to Banners -> Add new
    Screen Shot 2015-05-06 at 21.43.43
  3. Set a title for your banner
  4. Set an expiration date (after that date, the banner will not appear in the widget, but will never be deleted from the admin panel)
  5. Set the URL where the banner needs to point. These links are executed with a 301 redirect, and WordPress will take care of counting the clicks
  6. Set a number of starting clicks, like 0
  7. Set a featured image, which will be the banner picture. Use a squared image sized at 500 x 500 pixels.

How to display banners:

The banners can be displayed with the widget included with the plugin.

  1. Go to Appearance -> Widgets
  2. Add the QT banners widget to a sidebar
    Screen Shot 2015-05-06 at 21.42.12
  3. You can choose the banners that you want to display by entering the ID of them. The ID of each banner is available by going to: banners -> Show all
  4. Choose the maximum amount of banners to display
  5. Order: they can be random or can be ordered by a Page Order attribute on each banner
  6. Save the plugin settings.

10. Events

  1. Click Events
  2. Click Add New
  3. Enter a title and description
  4. Choose a date using the datepicker
  5. Insert an address and any other details
  6. If you want to show a google map for the event, insert the location of the event and click “Geolocate Address”
  7. Add a website URL for the event
  8. Add a location name, like “Amnesia Ibiza” (requires QT Places plugin active)
  9. Add a contact phone number
  10. Add an external event link
  11. Add as many links to buy the ticket as you want
  12. Select one or more event types, they are like categories, but for events. You can also create archives for specific event types.
  13. Click “Publish”

Creating the events archive:

  1. Go to pages->Add New
  2. Select the Archive Events template
  3. In Appearance->Menus link to the page you just created (optional)

Important!

You can hide or show the events depending on the event date. To change this option go to
Appearance->Customize->Events.

Creating an event map:

  1. Be sure to have the QT Places plugin installed and active
  2. Go in Settings -> QT Places and follow the process to obtain your Google maps API key and copy/paste the key in the filed of the plugin
  3. Add the shortcode [qtplaces posttype="event"].
  4. See the QtPlaces documentation for more infos
  5. You can also use the QtPlaces shortcode generator in your page editor
  6. Check the page Settings -> QT Places for more infos
  7. check Google’s documentation about this. Only neededd for sites > 20K visitors a day)

11. Places, maps and events

This theme contains now the powerful QT Places premium plugin

https://codecanyon.net/item/qt-places-interactive-responsive-google-maps-wordpress-plugin/15674168

This plugin allws you to:

  1. Create maps of places, divided by categories
  2. Add the map of the location for the events
  3. Create maps of any post type

To learn how to use this plugin, please check the plugin’s manual in the Manuals folder of your On Air product package, or find more info here:

http://qantumthemes.com/demo/qtplaces/

Translation

This theme is very easy to translate as the .mo .po (pot) files are provided within the language sub folder of the theme.

The theme textdomain is _s. For more information please visit: https://codex.wordpress.org/Translating_WordPress

Plugin translation:

The plugin QT Radio Suite contains its own translation files in the /languages subfolder.

 

Copyright notes

  • MaterializeCSS framework
    /*!
    * Materialize v0.95.2 (http://materializecss.com)
    * Copyright 2014-2015 Materialize
    * MIT License (https://raw.githubusercontent.com/Dogfalo/materialize/master/LICENSE)
    */
    /*
    * jQuery Easing v1.3 – http://gsgd.co.uk/sandbox/jquery/easing/
    *
    * Uses the built in easing capabilities added In jQuery 1.1
    * to offer multiple easing options
    *
    * TERMS OF USE – jQuery Easing
    *
    * Open source under the BSD License.
    *
    * Copyright © 2008 George McGinley Smith
    * All rights reserved.
    *
    * Redistribution and use in source and binary forms, with or without modification,
    * are permitted provided that the following conditions are met:
    *
    * Redistributions of source code must retain the above copyright notice, this list of
    * conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright notice, this list
    * of conditions and the following disclaimer in the documentation and/or other materials
    * provided with the distribution.
    *
    * Neither the name of the author nor the names of contributors may be used to endorse
    * or promote products derived from this software without specific prior written permission.
    *
    * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY
    * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
    * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
    * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
    * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
    * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
    * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
    * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
    * OF THE POSSIBILITY OF SUCH DAMAGE.
    *
    */
  • jQuery PrettySocial
    /**
    * jQuery prettySocial: Use custom social share buttons
    * Author: Sonny T. <hi@sonnyt.com>, sonnyt.com
    */
  • Parallax Image Scroll
    /*
    *
    * Parallax image scroll
    * https://github.com/pederan/Parallax-ImageScroll
    *
    */
  • jQuery marquee
    /*
    Marquee

    https://github.com/aamirafridi/jQuery.Marquee/blob/master/jquery.marquee.min.js

    */

  • Soundmanager2
    /** @license
    SoundManager 2: JavaScript Sound for the Web
    ———————————————-
    http://schillmania.com/projects/soundmanager2/Copyright (c) 2007, Scott Schiller. All rights reserved.
    Code provided under the BSD License:

    http://schillmania.com/projects/soundmanager2/license.txt

    V2.97a.20120916
    */

  • Pictures: https://unsplash.com/
  • Other pictures: Shutterstock / Fotolia / 123rf / Flickr