SOUNDBOARD

a Premium Music WordPress Theme

by red_sun (Gerda Gimpl)

Hi there...
thank you for purchasing SOUNDBOARD,
a premium music WordPress theme

In this document you will find detailed information on how to use this theme.

If you have any questions

If you don't find the answers to your questions in this help file, please send me a message via the item support tab. This theme includes 6 months support from purchase date, with options to extend.

I will do my best to assist with questions directly related to the theme set up however before you contact me, please consider finding an answer to your question in:

  • The relevant section of the documentation
  • the FAQ
  • WordPress Codex for general WordPress questions
  • Google for general questions

If you like SOUNDBOARD and want to support my work please rate it on Themeforest!

Thank you!

Getting Started

1. Installing the theme

Please make sure that you are using the latest version of Wordpress before you install SOUNDBOARD.

There are 2 ways to upload the theme:

Method 1: wordpress upload function

  1. Login to your WordPress admin
  2. Click Appearance >Themes
  3. Click Add New
  4. Click Upload Theme, browse your files and find soundboard.zip.
    (Make sure you are not uploading the whole zip file that you've downloaded from Themeforest (including demo content, license, psd files, readme ...)
  5. Click Install Now
  6. Once SOUNDBOARD is uploaded, click Activate

Method 2: FTP upload

  1. Unpack the Theme's zip file you have downloaded
  2. Upload the /soundboard folder to the /wp-content/themes directory in your WordPress installation on your server
  3. Login to your WordPress admin
  4. Click Appearance >Themes
  5. Look for the SOUNDBOARD theme and click Activate

2. Required plugins

Once you install SOUNDBOARD, you will get a notification message in your WordPress admin telling you of the required and recommended plugins with an option to install them.


Alternatively you can go to Appearance > Install Plugins to see a list of the required plugins and to install them.


Once the plugins are installed, you need to activate them.


Required plugins

The following plugins are required to set up Soundboard
  1. Meta Box - This plugin is required in order to display/use the custom fields for pages and custom post types.
  2. Soundboard Meta Boxes - This plugin is required in order to display/use the custom fields for pages and custom post types as well.
  3. Soundboard Custom Post Types - This plugin is required in order to display/use the 5 custom post types (Audio, Tour Dates, Galleries, Video and Slider). Once the plugin is installed you will see the custom post types in your WordPress admin. Once you've activated this plugin, save your permalinks by going to Settings > Permalinks and click Save Changes.
  4. Soundboard Widgets - This plugin is required in order to use the custom widgets (Album, Tour Dates, Video, Gallery, Images, News).

Recommended Plugins:

The following plugins are optional and you only need to install them if you want to use their features:
  1. Intuitive Custom Post Order - This plugin is recommended to sort the albums, videos and galleries via drag and drop and display them in a certain order. Once the plugin is installed, go to Settings > Intuitive CPO, check the Post Types that you wish to reorder and click Update. Now you can simply drag and drop items into a certain order.
  2. Contact Form 7 - This plugin is recommended in order to display a contact form.
  3. Soundboard Share Buttons - Activate this plugin if you wish to display share buttons for each post. Select which share buttons do display in Appearance > Customize > Connect > Share.
  4. One Click Demo Import - This plugin is recommended in order to import the Demo Content to your site. You can delete this plugin after importing the demo content.
  5. WooCommerce - This plugin is recommended in order to include a shop page.
  6. One Click Demo Import - This plugin is recommended in order to import the Demo Content to your site. You can delete this plugin after importing the demo content.

Import theme demo data and settings (optional)

To help you get started, you can import the demo content and settings to your site (images are replaced with dummy images):

  1. Go to Appearance > Install Plugins and make sure that all required and recommended plugins are installed and activated before you install the demo content.
  2. Go to Appearance > Import Demo Data and click the Import Demo Data button.
  3. After the demo data import, save your Theme Options. Go to Appearance > Theme Options and click Save Options.

Header / Footer

The Top Bar

  1. In order for the social icons to appear in the header, go to Appearance > Theme Options > Header > Top Bar and check the Social icons checkbox.
  2. Enter the info for you social accounts in Appearance > Theme Options > Social.
  3. Click Save Options.
  1. Go to Appearance > Customize > Site Identity .
  2. Click Select logo and upload your logo.
    (It is recommended to upload your logo twice the width and height that you actually want to display it so it looks sharp on Retina screens. For example if you wish to display a logo with a width of 400px and a height of 200px, upload a logo with a width of 800px and a height of 400px.)
  3. Below, enter your logo's width.
    (For example if you uploaded a logo with a width of 800px, enter 400.)

The Menu


In order to create a new menu,
  1. Click Appearance > Menus.
  2. Enter a name for your menu and click Create Menu.

  3. In Menu Settings select Display location "SOUNDBOARD Main Menu" and click Save Menu.

  4. Select menu items from the left column and click Add to Menu.
  5. Click on the drop down arrow of a menu item to change the navigation label or if you want to open the menu item in a new tab.
  6. Click "Sceen Options" in the top right corner for more options.


More detailed instructions on how to work with the WordPress menu can be found in the WordPress Codex

The Social Icons Area

  1. In order for the social icons to appear in the footer, go to Appearance > Theme Options > Footer and check the Social icons checkbox.
  2. Enter the info for you social accounts in Appearance > Theme Options > Social.
  3. Click Save Options.

The Copyright Area

You can enter your own copyright text in Appearance > Theme Options > Footer > Copyright Text

Pages

Page Templates

The theme comes with the following custom page templates:

  • Default Template - A page with right sidebar.
  • Fullwidth Template - A page without right sidebar.
  • Tour Dates Template - A page that displays upcoming and (optionally) past tour dates.
  • Past Tour Dates Template - A page that displays past tour dates.
  • Gallery Template - A page that displays image gallerys.
  • Audio Template - A page that displays the discography.
  • Video Template- A page that displays videos.

How to use a template:

  • Click Pages > Add New.
  • Look for Page Attributes on the right side and click on the "Template" drop-down menu.
  • Choose a page template.
  • Click the Publish button above.
  • Now you can add your new page to your Menu.

Setting up the Home page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Home" template.
  3. You can give this page a title, eg. "Home". You don't have to include any content. If you enter some content, it will be displayed in the center section of the homepage, above the news section.
  4. Click Publish.
  5. Now you cn add the new page to your menu.
  6. Now click Settings > Reading and select Front page displays a static page. Select the page you just created as your Front page and click Save Changes.
  7. The Homepage displays posts in the center and has a left and a right sidebar, in which you can drag and drop widgets. Simply go to Appearance > Widgets and add any widgets to "sidebar home left" and "sidebar home right".

Adding a slideshow to the homepage

  1. Click Slider > Add Slider
  2. Enter a title for your slider so you can choose it later in the Theme Options Panel.
  3. Upload images. Recommmended image size is 1180px x 720px so they look sharp on retina screens. Drag and drop images to reorder them. To enter an URL where the image should link to, click the pencil icon over the image and enter the full URL under SLIDER Image Links To. To display a caption over the slider image,click Edit and enter the text under SLIDER Caption.
  4. Click Publish
  5. Go to Appearance > Theme Options > Slider and check the Show Slider on Homepage checkbox
  6. Select a slider from the dropdown list.
  7. Click Save Options

NOTE!: The Slider will only display on the page that is using the "Home" template. Please make sure you are following all the instructions in the documentation under "Setting up the Homepage" (especially step 6!)

Setting up the News Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Default Template".
  3. You can give this page a title, eg. "News". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu .
  6. Now click Settings > Reading and select Front page displays a static page. Select the page you just created as your Posts page and click Save Changes.
  7. Click Posts > Add New to create a news post.
INFO: If you want to display a "read more" button for a news post, you need to manually insert the "read more" link with the help of the insert more tag.

Setting up the Tour Dates Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Tour Dates" template.
  3. You can give this page a title, eg. "Tour Dates". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu.
  6. Click Tourdates > Add Date
  7. tourdates
  8. Enter title and the tour date info.
  9. You can enter more detailed info, images, flyer, videos etc. into the "more info" field.
  10. Click Publish
  11. Repeat step 6. - 8. for each date.

Setting up the Audio Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Audio" template.
  3. You can give this page a title, eg. "Music". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu.
  6. Click Audio > Add Album
    audio
  7. Enter the Album Title
  8. Click Set featured image and upload the Album Artwork. Again, click Set featured image.
  9. Enter the album info.
  10. Example code for the song lyrics in the Additional Info field on the demo website:
  11. <h5> LYRICS </h5>
    [toggle title="Song Title"] 
    line 1 </br>
    line 2 </br>
    line 3 </br>
    line 4 </br>
    </br>
    line 5 </br>
    line 6 </br>
    line 7 </br>
    line 8 </br>
    [/toggle]    
    
    
  12. Now click Publish!

NOTE!: If you are getting the 404 Error when clicking on an album item on the album page or in the album widget: Simply go to Settings > Permalinks and click "Save Changes".

Album page layout

  1. Go to Appearance > Theme Options > Layout > Audio and select the number of albums you wish to display per row.

How to reorder Albums

  1. Install the Intuitive Custom Post Order plugin. You can do that in Appearance > Install plugins.
  2. Once the plugin is installed, go to Settings > Intuitive CPO , select "Audio" and click Update.
  3. Go to Audio > Audio and simply drag and drop the audio posts into a certain order.

Setting up the VIDEO page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Video" template.
  3. You can give this page a title, eg. "Video". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu.
  6. Click Videos > Add Video.
  7. Enter a Title.
  8. YouTube image previews will display automatically if no Featured image is set (link needs to look like this to work properly: http://youtu.be/4PkcfQtibmU ).
    If you would like to display a different image preview or are posting a Vimeo or self hosted video, upload a Featured Image on the right hand side instead.
  9. In order to post a Youtube or Vimeo video:
    Enter the URL for the video in the field: "Youtube or Vimeo video". It should look like this: http://vimeo.com/31956969 or http://youtu.be/4PkcfQtibmU
  10. In order to post a self hosted video:
    Upload a video either via FTP or via the Media Library and then enter the URL for the video in the field: "Self Hosted Video".
  11. Click Publish.

Video page layout

  1. Go to Appearance > Theme Options > Layout > Video and select the number of videos you wish to display per row.

How to reorder Videos

  1. Install the Intuitive Custom Post Order plugin. You can do that in Appearance > Install plugins.
  2. Once the plugin is installed, go to Settings > Intuitive CPO , select "Video" and click Update.
  3. Go to Videos > Videos and simply drag and drop the video posts into a certain order.

Setting up the Gallery Page

  1. Click Pages > Add New.
  2. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Gallery" template.
  3. You can give this page a title, eg. "Images". You don't have to include any content.
  4. Click Publish.
  5. Now you can add the new page to your menu.
  6. Click Gallery > Add Gallery
  7. Enter a Title.
  8. Click Set featured image.
  9. Select a file and click Set featured image.
  10. Click Add Media and upload your images or select images from your Media Library. Drag and drop images to reorder them.
  11. Click Publish.

NOTE!: If you are getting the 404 Error when clicking on a gallery item on the gallery page or in the gallery widget: Simply go to Settings > Permalinks and click "Save Changes".

Gallery page layout

  1. Go to Appearance > Theme Options > Layout > Gallery and select the number of galleries you wish to display per row.

Setting up the CONTACT page

Step 1: Setting up the Contact form

  1. The Contact Page requires the Contact Form 7 plugin. You can install this plugin in Appearance > Install Plugins.
  2. Once the plugin is installed and activated, go to Contact > Add New and set up your contact form:
    Enter a title and create form fields.
    Example from the theme demo:
    <label>[text* your-name] Name </label>
    <label> [email* your-email] Email</label>
    <label>[textarea your-message] Message </label>    
    [submit "Send"]
    
    You can find more info on how to work with Contact Form 7 in the Contact Form 7 Docs.
  3. Click Save and copy the shortcode that you find below the title field.

Step 2: Creating the Contact Page

  1. Click Pages > Add New.
  2. Give this page a title, eg. "Contact".
  3. Look for Page Attributes on the right side and click on the Template drop-down menu. Select the "Fullwidth Template".
  4. In order to display the contact info similar to the demo contact page, simply use the column shortcodes. Example from the theme demo contact page: Place the following code into the text (not visual!) editor of the contact page. If you are using Gutenberg, you can add the code into the "classic editor" block (in the options switch to "Edit as HTML").

    Or you can also use the shortcodes block.
    
    [three_fourth]
    
    <h6>RED SUN MANAGEMENT</h6>
    215. W Avenue 26<br>
    Los Angeles, CA 90387<br>
    Office: (123) 456-7890
    
    Use the contact form below to get in touch.
    
    /** contact form shortcode goes here **/
    
    [/three_fourth] 
    
    
    [one_fourth_last]
    
    <h6>BOOKING INFORMATION</h6>
    John Doe<br>
    john@sb-entertainment.com
    
    <h6>UK, EUROPE BOOKING</h6>
    Aaron Shaw<br>
    aaron@sb-booking.com<br>
    Office: 44 12.3456.7890
    
    <h6>PRESS INFO</h6>
    Red Sun Media<br>
    Gene Ovenell<br>
    Office: (123) 456-7890<br>
    gene@redsunmedia.com
    
    <h6>RED SUN RECORDS</h6>
    1234 Avenue of the Americas<br>
    New York, NY 11234
    
    [/one_fourth_last]
    
    
  5. Paste the shortcode you've copied in Step 1 into the editor, instead of the following text:
    /** contact form shortcode goes here **/.
  6. Click Publish.
  7. Now you can add the new page to your menu.

Setting up the SHOP page

  1. The shop pages require the Woocommerce plugin.
    You can install this plugin in Appearance > Install Plugins.
  2. Immediately after activating the plugin, you are taken to the setup wizard.
    You can use the wizard, or skip it and manually set up everything.
  3. Now create your products
  4. You can optionally display a left sidebar on the shop pages by going to Appearance > Widgets and adding widgets to the "Woocommerce" sidebar.
  5. Detailed information and videos on how to work with WooCommerce can be found in the WooCommerce Dokumentation

Theme Features

The Customizer

The Customizer can be found under Appearance > Customize.
All changes that you make in the Customizer may be previewed before saving them.

The following options can be found in the Customizer:

  • Logo
  • Site Icon
  • Background color
  • Content background color and opacity
  • Background image
  • Share Buttons (requires the Soundboard Share Buttons plugin)

The Theme Options Panel

The Theme Options can be found under Appearance > Theme Options.

The following options can be found in the Theme Options Panel:

  • General
  • Header
  • Layout
  • Typography
  • Color
  • Slider
  • Social icons
  • Footer

SOUNDBOARD includes 9 sidebars.
You can find them in Appearance > Widgets.


  1. Sidebar Home Left
    The Sidebar Home Left displays on the left side of your home page.

  2. Sidebar Home Right
    The Sidebar Home Right displays on the right side of your home page.

  3. Sidebar Main
    The Sidebar Main displays on the right side of the news page, single news page, archive pages, search page, error page and pages that use the default template.

  4. Sidebar Tourdates
    The Sidebar Tourdates displays on the right side of the Tourdates, Past Tourdates and Single Tourdates pages.

  5. Sidebar WooCommerce
    The Sidebar WooCommerce displays on the right side of your shop pages.

  6. Sidebar Footer 1
  7. Sidebar Footer 2
  8. Sidebar Footer 3
  9. Sidebar Footer 4
    The Sidebar Footer 1, Sidebar Footer 2, Sidebar Footer 3 and Sidebar Footer 4 display on the bottom of each page of your site.

Widgets

To add, remove, or edit your sidebar widgets, go to Appearance > Widgets.
On the left, you will see a list of the available widgets to choose from.
On the right, you will see the 9 widget areas in the theme.

To add a widget to your sidebar, simply drag & drop a widget from the left into any of the sidebars on the right.

SOUNDBOARD includes 6 custom widgets:

INCLUDED WIDGETS

  1. SOUNDBOARD - Tourdates
    The Tourdates Widget will display the next, upcoming tour dates.
  2. SOUNDBOARD - Album
    The Album Widget will display the latest album.
  3. SOUNDBOARD - Video
    The Video Widget will display the latest videos.
  4. SOUNDBOARD - News
    The News Widget will display your latest news.
  5. SOUNDBOARD - Gallery
    The Gallery Widget will display the featured images of your newest galleries, which link to the single gallery pages.
  6. SOUNDBOARD - Images
    The Images Widget will display the first few images of a slected gallery, which link to the full sized image in a lightbox.

Shortcodes

Using shortcodes is very easy. To use one, create a new post (or edit an existing one), and in the the editor type a shortcode in brackets. You can find a demonstration and the code for all included shortcodes on the Shortcodes page.

Button

[button link="http://www.someURL.com"]Click me![/button]

Tabs

[tabs]
[tab title="Tab 1"] Tab 1 content [/tab]
[tab title="Tab 2"] Tab 2 content [/tab]
[tab title="Tab 3"] Tab 3 content [/tab]
[/tabs]

Toggle

[toggle title="Toggle title"]
Hidden content
[/toggle]

Dropcaps

[dropcap] First Letter [/dropcap]

Highlight

[highlight1] highlighted text [/highlight1]
[highlight2] highlighted text [/highlight2]

Pullquotes

[pullquote_left] Quote text [/pullquote_left]
[pullquote_right] Quote text [/pullquote_right]

Icons

SOUNDBOARD includes the "Fontawesome" icon font.

This is how you add an icon to posts and pages:

  • Choose your icon from here:
    Fontawesome
  • Click on any icon and look for the code above the icon, which looks for example like this:
    <i class="fas fa-heart"></i>
    Example: Increase icon size x 5, and use light grey color: <i class="fas fa-heart fa-5x" style="color: #aaa;"></i>
NOTE!: Add the code into the text (not visual) editor. If you are using Gutenberg, add the code into the Custom HTML block.

FILE INFO

Changelog

Version 6.02 - Released: April/19/2024
  • Added: Post class to news posts on homepage
  • Fixed: Initialise all variables
Version 6.01 - Released: Feb/08/2024
  • Fixed: Dropdown navigation menu
  • Fixed: Center footer widgets
  • Fixed: Past tour dates
  • Added: Threads and Apple icon
Version 6.00 - Released: Oct/01/2023
  • Added: Optimised/modersised layout, typography
  • Fixed: Tour Dates Widget
  • Added: Option for body font size
  • Added: Option for wider content width
  • Fixed: Soundcloud link
  • Added: PHP 8.1 compatibility
  • Replaced: Twitter icon with X icon
  • Added: TikTok and Snapchat icon
  • Added: New demo data
  • Removed: Recommendation for Soundboard Shortcodes plugin. If you still need the plugin, you can find it in the theme files, in the folder includes/tgm-plugin-activation/plugins
Version 5.08 - Released: Jan/29/2022
  • file: functions.php - Restoring the classic Widgets Editor
Version 5.07 - Released: Oct/02/2020
  • Soundboard Widgets plugin - Fixed: removed header code from widgets
  • file: slicknav.css - Fixed: Arrows in responsive menu
Version 5.06 - Released: July/24/2020
  • Soundboard Meta Boxes plugin - Added: allow iframes in additional info column fields on audio pages
  • file: slicknav.css - Fixed: Arrows in responsive menu
Version 5.05 - Released: Jan/19/2020
  • file: theme_functions.php - Added: allow line breaks in additional info column fields on audio pages
  • file: theme_functions.php - Added: support for iframe code in additional info column fields on audio pages
  • file: audio.php - Fixed: Release Date field
  • plugin: all Soundboard plugins - Fixed: text domain
  • file: style.css, light.css, dark.css, dynamic-css.php - Fixed: contact form send button style
  • file: scripts.js - Fixed: dropdown menu
  • file: style.css - Fixed: footer in IE11
Version 5.04 - Released: July/09/2019
  • file: style.css, dark.css, light.css, dynamic-css.php - Fixed: styles from Theme Options panel don't get applied in Internet Explorer
  • file: dark.css, light.css - Fixed: menu hover color in light skin
  • file: functions.php - Fixed: Google fonts loading
Version 5.03 - Released: July/04/2019
  • file: functions.php, style-rtl.css, rtl.css, woocommerce-rtl.css, prettyphoto-rtl.css, shortcodes plugin - Added: RTL support
  • file: light.css - Fixed: responsive dropdown menu color for light skin
Version 5.02 - Released: June/06/2019
  • file: home-news.php, social.php - Fixed: data validation
  • Fixed: change textdomain to theme slug
Version 5.01 - Released: June/03/2019
  • mobile_detect.php and Soundboard Widgets plugin Removed: mobile detect script (now using WP build-in mobile detect function)
  • file: header.php, theme_functions.php - Fixed: no hardcoding of custom body_class()
  • file: scripts.js, slicknav.js, prettyphoto.js - Fixed: replaced deprecated jQuery events .click(), .hover() and .bind() with .on()
  • file: style.css - Fixed: alginment of single gallery items
  • file: template-gallery.php - Fixed: order of galleries
  • file: scripts.js - Fixed: allow to play videos in lightbox in fullscreen
Version 5.00 - Released: May/08/2019

IMPORTANT!

Version 5.0 is a major update to make the theme compatible with the latest WordPress Requirements for Envato Market, to make the theme safe, update the code to the latest coding standards and add new features and design options. Most every file had to be changed in the process.

Please BACKUP your site before updating!

In order to ensure full functionality after the update, follow the steps below:

Before the update

  1. Backup
    Backup your site. You can use a Backup plugin for that.
  2. Export widgets
    Export your widgets. You can use the Widget Importer & Exporter plugin for that.
  3. Google Analytics
    The Google Analytics field was removed from the Theme Options Panel. Please use a Google Analytics plugin instead

After the update

  1. Clear cache
    If your site doesn't display properly, please clear your browser cache.
  2. Save Theme Options
    Go to Appearance > Theme Options and save your Theme Options by clicking the Save Options button in the bottom right corner.
  3. Required / Recommended Plugins
    Install and activate the required (and recommended) plugins in Apperance > Install Plugins. You can find a list of all required and recommended plugins and an explanation in this documentation under Gettings Started > 2. Required Plugins.
  4. Save Permalinks
    If any of your pages doesn't display properly and you see a 400 error page instead, save your permalinks by going to Settings > Permalinks and clicking Save Changes.
  5. Import Widgets
    Go to Appearance > Widgets and check if your widgets are still there. If your widgets got lost in the updating process, you can import your widgets now (with the file you created in step 2. of the "Before the update" list above.
  6. Rebuild your Thumbnails
    As all image sizes were changed to make the images look sharp on retina screens, they need to be rebuilt. You can use the AJAX Thumbnail Rebuild plugin for that. Once the plugin is installed and activated, go to Tools > Rebuild Thumbnails, select all thumbnails and click Rebuild All Thumbnails.
  7. Background Image and Background Color in Theme Options Panel
    Upload your background image in Appearance > Customize > Background Image or select a background color in Appearance > Customize > Colors instead.
  8. Logo
    The Logo uploader in the Theme Options Panel has been moved to the Deprecated sections and will be removed eventually. Please upload your logo in Appearance > Customize > Site Identity instead.
  9. Favicon
    The Favicon upload field can now be found in Appearance > Customize > Site Icon.
  10. Reorder Albums, Videos, Galleries
    Albums, videos and galleries can now be sorted via drag and drop. This requires the Intuitive Custom Post Order plugin. You can install the plugin in Appearance > Install plugins. Once the plugin is installed, go to Settings > Intuitive CPO, select the Post Type you wish to reorder and click Update.
    Now you can simply drag and drop the audio, video and gallery posts into a certain order.
  11. Contact Page
    The Contact template and Contact Sidebar were removed. Please use the Contact Form 7 plugin instead. Instructions can be found in this documentation under Pages > Contact Page.

Below the main changes are listed:

Fixed:

  • Data validation
  • Deprecated function in PHP 7.2 in the file woocommerce_functions.php

Improved:

  • Clean up all the code
  • Better code for slider caption
  • Better code for sticky footer
  • Better responsive menu
  • Improved code/design for Theme Options Panel
  • Improved design for Image Lightbox
  • The theme now uses the WordPress built-in audio and video playlist instead of JWplayer
  • Option on single audio pages to link to Spotify and Apple music
  • Icons instead of images for social icons, share buttons, video play icon, so they look sharp on retina screens.

Added:

  • Option to select the number of albums, videos and galleries per row
  • Option display the images in galleries in uncropped format
  • Options to select color and opacity for content background
  • Admin columns (Thumbnails, tour dates, etc. in WordPress admin columns)
  • Child theme
  • Fontawesome version 5.3

Moved:

  • The following functionalities were moved to a plugin:
    - Contact Form
    - Custom Post Types
    - Meta Boxes
    - Shortcodes
    - Share Buttons
  • The Theme Options Panel has been moved to the Appearance section.
  • Removed

  • Support for JW player. The theme now uses the WordPress built-in audio and video playlist
  • Contact Template and Contact Sidebar
  • Background Image uploader and Background Color picker in Theme Options Panel
  • Support for old IE versions (IE8 and down)
  • Option to display responsive styles was removed from the Theme Options Panel, they now display by default
  • Flickr Widget


  • Version 4.09 - Released: 03/15/2018
    • folder: meta-boxes and all files within - Added: Newest version of meta box plugin
    • file: functions.php - Added: Better way to load Google fonts
    • file: header.php - Fixed: Facebook button language
    • file: options.php, template-audio.php, template-video.php, config-meta-boxes.php - Dropped: support for JW player
    • file: scripts.js - Added: videos in lightbox support full screen
    • file: woocommerce.css, style.css, css_options_panel.php - Fixed: WooCommerce Search Widget button
    • file: single-video.php, template-video.php, widget-video.php, loop.php, header.php, prettyPhoto.min.js, nivoSlider.css - Fixed: Error on video page when site loads with https
    Version 4.08 - Released: 08/30/2017
    • folder: meta-boxes and all files within - Fixed: Error when uploading new slider or gallery images and Tour Dates.
    • file: woocommerce.css, woocommerce_functions.php - Added: Support for image slider and lightbox on single product pages.
    • file: layout-responsive.css - Fixed: Responsive Layout on single blog pages.
    • file: single.php, header.php, single-tourdates.php, single-audio.php, loop.php - Fixed: facebook like button.
    • folder: widgets and all files within - Fixed: PHP7 ready
    • file: template-contact.php - Fixed: sanitize contact form
    • file: functions.php, options.php - Added: Load WooCommerce files when WooCommerce plugin is activated. No need to activate in Theme Options Panel
    Version 4.07 - Released: 05/07/2016
    • file: theme_functions.php, header.php, - Fixed: removed deprecated function in WP 4.5 (when logging in from top bar)
    • file: header.php, functions.php - Added: Theme Support for Title Tag
    • file: scripts.js - Added: Improved code for sticky footer
    Version 4.06 - Released: 04/15/2016
    • folder: meta-boxes and all files within, file: functions.php, slider.php, single-audio.php, - Added: newest version of the metabox script, Fixed: Error when uploading new slider or gallery images.
    • file: style.css, woocommerce.css, nivoSlider.css, layout-responsive.css - Fixed: few minor styling issues
    Version 4.05 - Released: 12/14/2015
    • file: style.css - Fixed: Responsive images when using caption. Added: Styling for menu widget.
    • file: functions.php, folder: tgm-plugin-activation and all files within, removed file: shortcode-soundcloud.php - Removed: built-in SoundCloud shortcode. Added: plugin recommendation for SoundCloud shortcode via TGM plugin activation.
    • file: style.css - Fixed: size of embedded YouTube videos.
    • file: style.css, shortcodes.css - Fixed: JW player layout
    • file: light.css, dark.css - Improved: CSS instead of an image for the transparent content background color.
    Version 4.04 - Released: 09/11/2015
    • file: widget-tourdates.php - Added: Show "more info" link in tour widget as well.
    • file: layout-responsive.css - Fixed: Responsive layout on home page.
    • file: single-gallery.php, widget-images.php - Fixed: Display image caption in lightbox.
    • file: widget-album.php, widget-flickr.php, widget-gallery.php, widget-images.php, widget-news.php, widget-tourdates.php, widget-video.php - Fixed: replaced deprecated function WP_Widget.
    • file: functions.php, woocommerce.css - Fixed: properly load WooCommerce stylesheets. Display of related products in WooCommerce shop pages.
    • file: style.css - Fixed: JW player layout in lightbox
    Version 4.03 - Released: 06/20/2015
    • file: comments.php, style.css - Added: better code for comment form.
    • file: prettyPhoto.min.js - Fixed: prettyPhoto XSS fix.
    • file: functions.php - Fixed: child theme support.
    • file: style.css - Fixed: Display of contact form content on mobile devices.
    • file: scripts.js - Fixed: Responsive Videos.
    • file: single-audio.php - Fixed: display JW player on mobile devices only if "Display audioplayer" checkbox is checked.
    • file: woocommerce.css - Fixed: Cart page display on mobile devices.
    Version 4.02 - Released: 04/26/2015
    • file removed: minit.php - Fixed: XSS vulnerability fix.
    Version 4.01 - Released: 02/26/2015
    • file: layout-responsive.css - Fixed: Single news layout on mobile devices
    • file: scripts.js - Fixed: slider starts with random image.
    Version 4.00 - Released: 11/09/2014
    • file: options.php, layout-responsive.css, footer.php, header.php, template-home.php - Added: Responsive stylesheets for mobile phones and tablets.
    • file: header.php, footer.php, style.css, options.php - Added: Options to display social icons in top bar. Added more social icons.
    • file: template-video.php, widget-video.php - Added: support for Vimeo videos.
    • file: single-tourdates.php - Fixed: Allow shortcodes in Tour Dates "more info" field.
    • file: template-tourdates.php, widget-tourdates.php - Added: Option to open Buy Tickets URL in new tab.
    • file: template-tourdates-paste - Added: Past Tour Dates template.
    • file: single-audio.php, style.css - Fixed: alignment of twitter and facebook button.
    • file: options.php - Fixed: color images in Theme Options Panel when using a child theme
    • file: widget-images.php - Fixed: order of images
    • folder: metaboxes and all files within - Added: newest version of the Metaboxes plugin. Fixed: Image upload reorder bug.
    Version 3.07 - Released: 02/14/2014
    • file: functions.php, folder: woocommerce - Fixed: Make Soundboard ready for WooCommerce version 2.1.0
    • file: options.php, css_options_panel.css, single.php, loop.php, single-audio.php, single-tourdates.php - Added: Option to remove all social share buttons from the site
    • file: options.php, css_options_panel.css - Added: Option to upload your own transparent content/slider/navigation background image.
    • file: options.php, css_options_panel.css - Added: Option to pick footer, social and copyright area background color.
    • file: functions.php, header.php, footer.php - Fixed: code improvements.
    • file: template-video.php, widget-video.php, style.css - Fixed: Display YouTube preview image, no matter which YouTube URL form is used (youtube.com, youtu.be,...).
    • file: options.php, css_options_panel - Added: Option to set main menu font size in Theme Options Panel.
    • file: options.php, slider.php, scripts.js - Added: Option to set slider speed in Theme Options Panel.
    • file: options.php, template-home.php, style.css - Added: Option to display full post instead of excerpt in homepage news section. Option to display "more news" button on homepage.
    • file: shortcodes.php - Fixed: tabs shortcode (display multiple tabs on 1 page), better button shortcode (option to open in new window, option to add color)
    • file: light.css - Fixed: bug fix.
    • file: scripts.php - Fixed: removed prettyphoto deeplinking.
    • file: slider.php, helpers.php - Fixed: Saving order of slider images.
    Version 3.06 - Released: 10/08/2013
    • file: single.php, loop.php, single-audio.php - Improved: tweet share button
    • file: widget-images.php, functions.php - Added: widget that displays latest images
    • folder: metaboxes and all files within - Added: newest version of the Metaboxes plugin. New file uploader for audio, gallery and slider
    • file: functions.php, options-framework.php, options-interface.php, options-sanitize.php, audio.php, gallery.php, slider.php, tourdates.php, video.php - Fixed: make theme child theme ready
    • file: functions.php, widget-twitter.php - Removed: twitter widget.
    • file: single-video.php, widget-video.php - Fixed: removed title "b" above videos.
    • file: single-gallery.php - Fixed: convert single quotes to HTML entity in gallery caption
    • file: light.php - Fixed: slider background color in light version
    • file: loop.php, default.po, de_DE.po - Added: translation additions
    • file: functions.php - Fixed: validation error (slider script)
    • file: functions.php, css_options_panel.php - code improvements
    • file: theme_functions.php - Fixed: redirect to admin after logging in
    Version 3.05 - Released: 05/27/2013
    • file: video-single.php - Added: YouTube video preview image displays automatically on single video pages (search result) if no Featured Image is set.
    • file: widget-video.php - Added: YouTube video preview image displays automatically in Video Widget if no Featured Image is set.
    • file: scripts.js - Fixed: sticky footer issue when WooCommerce plugin is activated
    Version 3.04 - Released: 05/13/2013
    • file: single-tourdates.php - Added file.
    • file: template-tourdates.php, config-meta-boxes.php, style.css, options.php - Added: time and 'more info' field. Past dates separated by year. Change order of past dates in Theme Options Panel.
    • file: template-video.php - Added: YouTube video preview image displays automatically if no Featured Image is set.
    • file: woocommerce-functions.php - Added: Displays 4 "related products" in 4 rows
    • file: header.php - Fixed: validation error
    • folder: metaboxes and all files within - Added: newest version of the Metaboxes plugin
    Version 3.03 - Released: 03/18/2013
    • file: woocommerce.php - Fixed: Removed 1 page title on shop page since it displayed twice.
    • file: woocommerce.css - Fixed: Quantity button in Chrome.
    Version 3.02 - Released: 03/05/2013
    • file: woocommerce.php - Added file.
    • file: woocommerce.css, woocommerce_css_options_panel.php, woocommerce/css/light.css, woocommerce/css/dark.css - Fixed: a few CSS additions to make Soundboard ready for WooCommerce 2.0
    • file: slider.php - Fixed: convert single quotes to HTML entity in slider caption
    • file: template-contact.php - Added: make contact form send button translation ready
    Version 3.01 - Released: 01/16/2013
    • file: admin-style - Added: Adjust CSS for buttons in Theme Options Panel to match WP 3.5 style
    • file: backstretch.js, functions.php, footer.php, css_options_panel.php - Added: jQuery backstretch plugin for background image, so that it displays properly in IE8
    • file: header.php, footer.php, scripts.js, style.css - Added: make footer stick to the bottom always, even if only little content on page (finally I found a working code :) )
    • file: template-video.php, single-audio.php - Added: JWPlayer6 videos and playlist display properly in lightbox in Chrome and Safari
    Version 3.00 - Released: 11/29/2012 - WOOCOMMERCE PLUGIN SUPPORT
    • folder: woocommere and all files within - Added: WooCommerce plugin support
    • file: functions.php, options.php - Added: Option to load stylesheets and templates for the WooCommerce plugin
    • file: functions.php, style.css, template-tourdates.php, widget-tourdates.php, template-audio.php, widget-album.php - Changed: code for buttons
    Version 2.01 - Released: 11/19/2012
    • file: single-audio.php - Fixed: JW 6 playlist gets properly displayed on iOS devices
    • file: template-video.php - Fixed: Video page works with JW Player 6
    • file: widget-video.php - Fixed: Video widget works with JW Player 6, Added: Option to display date instead of "time ago" in video widget
    • file: style.css - Added: A few CSS adjustments
    • file: options.php - Added: Option to display the date instead of "time ago" in homepage news section, news widget and video widget
    • file: template-home.php - Added: Option to display the date instead of "time ago" in homepage news section
    • file: widget-news.php - Added: Option to display the date instead of "time ago" in news widget
    Version 2.00 - Released: 11/14/2012 - COMPATIBLE WITH THE NEW JWPLAYER 6

    After uploading this update, select your JW Player version in the Theme Options Panel.
    Troubleshooting tips for JW Player 6 you can find here

    • folder: jwplayer and all files within - Added: skin for JW Player 6
    • file: single-audio.php - Added: compatibility with JW Player 6
    • file: shortcodes.php - Added: compatibility with JW Player 6
    • file: options.php - Added: Option to select JW Player 6
    • file: style.css - Added: Top margin for JW Player 6 playlist
    Version 1.06 - Released: 10/19/2012
    • file: widget-twitter.php - Fixes: Validation error.
    • file: options.php, css_options_panel.php - Added: Option to center the logo.
    • file: template-tourdates.php - Tour Dates page displays content that is placed in the editor above the dates.
    • file: template-audio.php - Audio page displays content that is placed in the editor above the albums.
    • file: template-video.php - Video page displays content that is placed in the editor above the videos.
    • file: template-gallery.php - Gallery page displays content that is placed in the editor above the gallery thumbnails.
    • file: shortcodes.php - Bugfix
    • file: scripts.js - Fixed: empty spans only get hidden within the comments section.
    • file: widget-tourdates.php - Fixed: News widget doesn't display comments if "Remove Comments" is selected in the Theme Options Panel.
    • file: config-meta-boxes.php, template-tourdates.php, widget-tourdates.php - Added: Custom field to display a different button text for each tour date.
    Version 1.05 - Released: 08/20/2012
    • file: config-meta-boxes.php, single-audio.php, style.css - Added: Option to display additional content in the left and center column of the audio page.
    • file: loop.php, template-home.php, single.php, single-audio.php, single-gallery.php - Added: Option to hide all comment sections from the website.
    • file: template-home.php, options.php, style.css - Added: Option to display a preview image for news on the homepage.
    • file: prettyPhoto.js, single-gallery.php - Added: Images in prettyPhoto lighbox show caption.
    • folder: metaboxes and all files within - Added: Latest version of the meta box script.
    • file: widget-gallery.php - Fixed: Change order of images.
    • file: template-home.php - Fixed: Display h3 tag in the center section of the homepage only if a headline was entered in the Theme Options Panel.
    • file: widget-twitter.php - Added: Twitter feed also displays retweets.
    Version 1.04 - Released: 07/31/2012
    • file: single-audio.php, options.php - Added: Option to display SoundCloud and JW Player right on page instead of just a play icon.
    • file: template-tourdates.php, widget-tourdates.php, single-audio.php and widget-album.php - Bug, where button links wouldn't work properly in Google Chrome.
    • file: footer.php, options.php, style.css and css_options_panel.php - Added: Option to add additional social icons to the footer. Social profiles open in a new tab by default.
    • file: style.php - Fixed: set input to auto since it was messing with the code of some plugins.
    • file: widget-tourdates.php - Fixed: Make month names in Tour Dates widget translation ready.
    • file: header.php, options.php and css_options_panel.php - Added: Option to hide login section in the header
    • file: options.php and template-home.php - Added: Option to display a headline in the center section of the homepage
    • file: template-home.php - Added: Content that is placed within the editor on a page with the "home template" will be displayed above the News section on the homepage.
    • file: single-audio.php and widget-album.php - Fixed: playlist on audio page keeps playing on repeat.
    Version 1.03 - Released: 07/04/2012
    • file: css_options_panel.php - Fixed: removed background color from parent menu items when colorpicker is used
    • file: nivoSlider.css - Fixed: line-height and padding of captions, so that it works with line breaks.
    • file: loop.php, single.php, light.css, dark.css and style.css - replaced the class .date with .post-date since it was interfering with the "Template Tag body_class", which affected the layout of archive pages.
    • file: style.css - Fixed: Added some padding right of City/Country on the tour dates page.
    • file: single-audio.php and widget-album.php - Fixed: bug, where the "other buying / downloading button" would link to the iTunes link.
    Version 1.02 - Released: 06/28/2012
    • file: template-tourdates.css - Fixed: bug, where site wouldn't display properly if there are no dates in the "Past Tour" section.
    • file: light.css - Fixed: bug where red color would flicker in the navigation when used with light skin / dropdown menus.
    • file: style.css - Fixed: padding-bottom of main content area and widgets
    Version 1.01 - Released: 06/24/2012
    • file: header.php - Fixed: Google Analytics Code display correctly
    • file: options-framework.php - Fixed: link to documentation
    • file: light.css - Fixed: color of child nav items in light skin
    Version 1.0 - Released: 06/21/2012
    • Initial release.

    Theme Files

    CSS

    The following CSS files are included in the theme:

    Style.css (located in: main direction)
    Contains: Foundation for the site design. It controls the design structure of the theme.

    It is not recommended to make any changes directly in this file, as those changes would be lost once you update the theme.
    Instead, copy the the code that you wish to change and paste it into a child theme or into Appearance > Customize > Additional CSS and make your changes there.

    The file is separated into the following sections:

    
    - CSS RESET
    - MISC
    - FONTS / TEXT ELEMENTS
    - LAYOUT
    - AUDIO
    - TOURDATES
    - VIDEO
    - GALLERY
    - NAVIGATION
    - SIDEBAR AND WIDGETS
    - FOOTER
    - IMAGES
    - PAGINATION
    - COMMENTS
    - FORMS
    - BUTTONS
    - RESPONSIVE LAYOUT
      1. Tablet Portrait
      2. Mobile (Landscape)
      3. Mobile (Portrait)
    
    

    admin-style.css (located in: /includes/admin/css)
    Contains: Styles within the WordPress admin

    dynamic-css.php (located in: /css)
    Contains: Styles as set in Theme Options Panel.

    nivoslider.css (located in: /css)
    Contains: Styles for the slider

    prettyphoto.css (located in: /css)
    Contains: Styles for the prettyPhoto Lightbox

    light.css (located in: /skins/css)
    Contains: Color values for light skin

    dark.css (located in: /skins/css)
    Contains: Color values for dark skin

    Java Script

    "SOUNDBOARD" loads the following Javascript files:

    fitvids.js (located in: /js)
    Used for fluid width video embeds

    hoverintent.js (located in: /js)
    Improves the css dropdown menu with animation

    jquery.imagesloaded.min.js (located in: /js)
    Checks if images have been loaded yet

    nivoslider.js (located in: /js)
    Frontpage slideshow

    prettyphoto.js (located in: /js)
    Used to display images and multi-media in a "lightbox" that floats overtop of the current web page.

    scripts.js (located in: /js)
    The theme's custom jQuery

    slicknav.js (located in: /js)
    Responsive Menu

    superfish.js (located in: /js)
    Jquery improved dropdown menu


    Credits

    I've used the following scripts, files, images, icons and other files in this theme:

    FAQ & Troubleshooting

    Slider does not display

    The Slider will only display on the page that is using the "Home" template. Please make sure you are following all the instructions in the documentation under "Setting up the Homepage" (especially step 6!)

    Album item or Gallery item opening a 404 Error page

    There is a very easy fix for this issue:
    Simply go to Settings > Permalinks and click Save Changes.

    Color or fonts as set in the Theme Options Panel don't get applied

    Solution 1: Make sure you are not uploading the whole zip file that you've downloaded from Themeforest (including demo content, license, psd files, readme ...) but only the Soundboard.zip file.
    Solution 2: Check the file permission on your WordPress installation. Files should always have 644 permisison. Folders should always have 755 permission. More info here.

    How to update a theme

    1. Start by logging into Themeforest with the account that you've used to purchase your theme.
    2. Click Downloads and re-download the theme you've purchased. You will automatically get the newest version.
    3. Go to your WordPress admin and click Appearance > Themes . Activate any different theme, choose delete files for the old SOUNDBOARD theme and then upload the new theme and activate it. If you attempt to upload a new version of a theme without deleting the old version first, the theme install will fail.
    Deleting the old theme may seem scary, but you are not going to loose any of your content or theme settings. You will only lose the changes that you've made directly to the theme files. These changes will need to be made again to the new files.
    If you are still uncomfortable deleting the old theme, you may use a plugin, like for example Easy Theme and Plugin Upgrades to automate backing up your current theme and uploading the new version. In case something goes wrong, you can simply change back to the old theme.

    IMPORTANT!: As update 5.0 was a major update, if you are updating from version 4.09 and below, please follow the instructions in the changelog.

    How to translate a theme

    Soundboard can be translated into any language without having to edit the template files.

    1. Go to Settings > General and set the Site Language to your language.
    2. Download Poedit, which is a free, open source tool.
    3. Look for the the soundboard.pot file, which is included in your theme files (in the subfolder "languages") and open it with Poedit.
    4. Click "Create New Translation", select your language and click OK
    5. You should see a list of all strings (in English) used in the theme. Go through the list and click on the text that you want to translate. When you click a line of text, the same text will appear at the upper of the 2 boxes at the bottom. Enter the translation for the text in the lower box.
      • If you right-click on any line, you’ll see a file name and line number like “archive.php line 71″. That is the place in the theme files where this text is being used.
      • If you are looking for a certain text that you want to translate, click Edit > Find .
    6. In Poedit > Preferences > Editing, make sure Automatically compile MO file when saving is checked. That way, when you click File > Save as, it will automatically output a .po and .mo file. The naming of your .po and .mo files is important. The naming convention is based on the language code (e.g. pt for Portuguese) followed by the country code (e.g. _PT for Portugal or _BR for Brazil). So, the Brazilian Portuguese files would be called pt_BR.po and pt_BR.mo. A complete list of codes can be found at language codes and country codes. Save the translation files in the same folder as the soundboard.pot file.

    You can always open your .po file again (in Poedit) and add translations.

    Theme Installation Error “The package could not be installed. The theme is missing the style.css stylesheet.”

    Make sure you are not uploading the whole zip file that you've downloaded from Themeforest (including demo content, license, psd files, readme ...) but only the soundboard.zip file.