Getting Started with our Theme

Contents

1. How to import theme demos

2. How to activate the child theme ?

3. How to setup playlist section or add MP3 and audio files

4. How to setup the Event Section ?

5. How to change the background color and background images

6. What is Visual Composer and how to use it ?

7. How to install the theme and theme's demo?

8. How to work with Moonlight

9. How to install the Elementor Templates Kit

10. How to use the Coming Soon page or Maintenance Page

1. How to import theme demos

There are 2 ways to import the demo on your website. If option 1 does not work, try option 2.

OPTION 1: ONE-CLICK INSTALL --------------------------------------


  1. Make sure the theme is installed. 
  2. Go to WP-Admin > Appearance > Install Plugins. Install and activate all the required plugins.
  3. Go to WP-Admin > Tools > Demo Content Install. Choose your favourite demo and install it. It should take 3 to 10 minutes.

If you don't see the "Demo Content Install" under "Tools", go to Option 2: Manual Install below.

Here's some issue you might face when importing the demo:

1) Error message: Important: You need to activate zip extension.

This message might show up when you go to Tools > Demo Content Install ( http://d.pr/i/Mm93 )

If it's your case, it means that Zip extension is not enabled on your server. To enable it,

- Go to your CPanel > Select PHP Version and check ZIP. See Screenshot: http://d.pr/i/Nf7L

- If you don't have access to your CPanel, please contact your web host so he can enable Zip Extension. 

2) Error message: Timed Out If you have a Timed Out message when you are importing the demo it means that your max_execution_time is set only to 30 seconds or so. Our demo's data is big and the import process while takes more than 30 seconds. It's why you see a timed out message.

- To raise the time a script is allowed to run, go to your CPanel > Select PHP Version > Switch to PHP Option (http://d.pr/i/Z6ev)

- Then check for max_execution_time and change the setting for 30 then click Apply and Save (http://d.pr/i/QXG2)

- If you don't have access to your CPanel or you still receive a timed out message, please contact your web host so he can set your max_execution_time to 600. 

- If above steps doesn't work, see OPTION 2 below.


OPTION 2: MANUAL INSTALL -----------------------------------

If option 1 doesn't work or you have a problem such as Timed Out issues, or Internal Error 500, etc, please install the demo manually. We have set up a  video tutorial to learn how to install it manually. See video below.

Remark: The files required to install the demo's content are provided by our support team. Please have a chat with us at https://sonaar.io or open a support ticket here.

Step 01: Install the required plugins: 00:26

Step 02: Import the demo's content XML: 01:11

Step 03: Create and assign a menu: 03:30

Step 04: Tell WordPress which page is your homepage: 04:32

Step 05: Import Revolution Slider and Banners: 05:03

Step 06: Import Essential Grids: 05:56

Step 07: Import the Theme Options: 06:37

Step 08: Import the Music Player Options: 07:52

You can always open a support ticket at https://support.sonaar.io if you have any issues. We are here to help.

2. How to activate the child theme ?

Make sure that you previously uploaded the Sonaar theme before installing the child theme.

Step-by-step guide:

1. Unzip the file SONAAR-WP-PACKAGE.ZIP on your computer. You can download this file by login into your Sonaar Account > Licenses Keys

3. Once the file is unzipped, look into the /Theme/ folder and you will see the sonaar-child.zip which is the child theme that you will upload to your Wordpress

4. Go to WP-Admin > Appearance > Themes and click on 'add new'.

5. Select sonaar-child.zip file and upload it.

6. Activate it.

3. How to setup playlist section or add MP3 and audio files

How to add new MP3 tracks & create new albums and playlists. 

  1. Go to WP-Admin > Playlist> Add New Enter the title of your album and an optional description. 
  2. Make sure to set your album cover as the featured image: http://d.pr/i/19Lv4 
  3. Fill the text fields under Album Infos with your own content. 
  4. Upload your MP3 for each track you have for that album. Only MP3 files are allowed. 
  5. Save it.

How to add the player to the bottom of a page

  1. To display the player in the footer of a page, edit your page and set the playlist you want in the Footer Player option. See screenshot: https://d.pr/i/qTA2DI

How to launch the player from a Slider Revolution button

We sometimes use a "Play" button in the big banner on the homepage. The play button needs to be linked to a playlist.

  1. To tell Slider Revolution which playlist you want to fire when you click on the play button, go to wp-admin > Slider Revolution and edit the slide.
  2. Select the button layer and go to the action tab. http://d.pr/i/kqmWfe
  3. The code should be something like: 
    IRON.sonaar.player.setPlayer({ id:"1218", title:"Playlist Title" });
    To change the playlist, enter your own playlist ID instead of 1218 above. The playlist ID is your playlist post id that can be found by going to wp-admin > playlist. See screenshot: https://d.pr/i/8f2US2
  4. In addition, you can change the label of your playlist title by changing the Title in the code: IRON.sonaar.player.setPlayer({ id:"1218", title:"Playlist Title" });
  5. You can reach a specific track with the "trackid" parameter and a integer value. 
    code: IRON.sonaar.player.setPlayer({ id:"1218", trackid:2 });

How to add an audio player to a page:

  1. Go to WP-Admin > Pages and edit the page of your choice with Elementor. (Edit with Elementor button)
  2. Locate the Sonaar Music Player Widget in the Elementor Widgets: https://d.pr/i/hv6G0c
  3. Drag and drop the widget in a section on the right and adjust its settings: https://d.pr/i/Nccucx

How to create a page and shows your album into it:

  1. Go to WP-Admin > Pages > Add New
  2. Add a new element called Essential Grid and select the pre-defined grid you have previously imported with the demo. http://d.pr/i/LPp6ZH 
  3. Save your page.
  4. To edit the grid's size or the number of columns, etc. go to wp-admin > Ess. Grid > and edit the predefined grid you'd like.

See the full documentation of Essential Grid here: https://www.themepunch.com/essgrid-doc/essential-grid-documentation/

 

4. How to setup the Event Section ?

Add a new Event:

  1. Go to WP-Admin > Events > Add New.
  2. Enter the title of your event and an optional description.
  3. Make sure to set your Event poster or image as the featured image: http://d.pr/i/f3kl
  4. Fill the text fields in the "Event infos" section under Event description. 
  5. The date of your event will be the published post date. See screenshot: http://d.pr/i/7Td3h8

Add a list of events to a page:

  1. Go to WP-Admin > Pages and edit the page of your choice (ex: Homepage)
  2. Make sure you are using the Elementor editor.


  3. Drag a Event widget in a section: 


Create a page to show all your events:

  1. Go to WP-Admin > Pages > Add New
  2. Enter the title of your page.
  3. Select the template "Event Posts" in the "Page Attributes" section: http://d.pr/i/bi9a
  4. In the "Events Query" section choose "filter by upcoming or past events": http://d.pr/i/19UW2
  5. Save it.

5. How to change the background color and background images

Our theme has many ways to change background images or colours.

Changing the overall background:

To change the overall background image or colour go to the Theme options dashboard > Look and Feel. You can set the overall background by either uploading a background image or only change the background colour.

 

 

Changing a background on a specific page:

We can also select an individual background on a specific page. When we edit a page, we can select a background in the 'page setting' panel. 

  1. Upload your image in the "Background Image" or change the main background color.
  2. If you want to use a background image, make sure to set a main background color as well. It's very important. Also make sure that the 'Main Background Transparency' has the value to 0.

  

 

Changing a background with Elementor:

Many background options are available with Elementor. 
Here documentations:

https://docs.elementor.com/article/190-change-background-image

https://docs.elementor.com/article/210-background-gradient

https://docs.elementor.com/article/387-section-background-video-options


If you are using WPBakery, how to Change a background on a specific row in a page:

So you want to change a background image to put your own image. Let say you want to change this image which is part of the homepage only:

 

Edit your page. then seek for the row where your background image should be contained. Click the little pen in the top right corner of the row, then click design tab. See screencast:

 

If you want to edit the height of the image, basically you will have to edit the height of the row's space. So click the little pen of the row to edit it. go to the design tab, and adjust the top and bottom padding according to your needs.

More infos and hows-to about Visual Composer here.

6. What is Visual Composer and how to use it ?

Visual Composer is a premium plugin that comes for free with our theme. With Visual Composer, you can build and design page layout without a line of code. The best place to get started with Visual Composer is to read the how's to provided here.

7. How to install the theme and theme's demo?

1. Make sure WordPress is installed. Check with your web hosting provider for WordPress installation.

2. Access your WordPress Dashboard (WP-Admin)

3. Deactivate ALL your plugins you have activated from your old theme. Go to wp-admin > plugins and deactivate them all.

4. Go to Appearance > Themes > Add New

5. Download the theme package zip file on your computer (SONAAR-WP-PACKAGE.ZIP). The file can be downloaded by  Login into your Sonaar.io account and go to My Account > Licenses Keys > View Details & Downloads. 

6. Important: Unzip the file called SONAAR-WP-PACKAGE.ZIP you've just download into your computer. Locate the file called sonaar.zip which is located in the /Theme/ folder. 

7. Upload the file called "sonaar.zip" to WP-Admin > Appearance > Themes > Add New.

8. Once the theme is installed, make sure to activate it.

9. Enter your Sonaar License Key in WP-Admin > Theme Options > Dashboard

10. Install the required plugins. Go to WP-Admin > Appearance > Install Plugins. Install and activate all the required plugins.

11. To import a theme's demo: Once the theme and license are activated, go to WP-Admin > Tools > Demo Content Install and you will be able to import the theme's demo you've opt-in.


Once its done, here are quick tips to start customizing your project:

1. to edit the content of your homepage and pages, go to wp-admin > pages > and click Edit with Elementor
2. to edit the music/playlist, go to wp-admin > playlist
3. to edit the events, go to wp-admin > events
4. to edit the artists, go to wp-admin > artists
5. To change the color, logo and typography, go to wp-admin > Theme Options.
6. To change, add or remove items from your menu, go to wp-admin > appearance > menu
7. To popup the player on your homepage automatically (or on any specific page), edit your page and set the playlist you want in the Footer Player option. See screenshot: https://d.pr/i/qTA2DI
8. To edit your footer, go to wp-admin > footer
9. to edit the big slider image on your homepage, go to wp-admin > revolution slider

* If you want to import your existing podcast from a RSS feed, check this section

Common issues:

When installing the theme it says "Are you sure you want to do this ?"

Help with theme's demo importation

I can't activate a plugin. Where is the license key ? Is it included with your theme ?

8. How to work with Moonlight

How can I edit the "New Album" section?


This section is built with the Slider Revolution plugin. 
Please go to wp-admin>Slider Revolution
And edit the slider "new album"


Select the "Album Cover" layer and click on the pencil icon to replace the artwork


To change the album name or edit any other text, please select the text layer and click on th pencil icon



To change the playlist we want to be executed with the "play" button, please select the "play" layer.
Click on the "action" tab.
And on the "Click" event, please replace the "ID" and the "title" in this code:
IRON.sonaar.player.setPlayer({ id:"2090", title:"Moonlight Album" })

How can I change the background image?

Please go to wp-admin>theme options>look and feel>main background

9. How to install the Elementor Templates Kit

By Elementor Templates Kit, we are refering to: https://sonaar.io/templates-for-elementor/


To import the templates:

1. Download the templates kit file at https://sonaar.io/login (Under My Account > Downloads)
2. Login to your WordPress dashboard.
3. Make sure Elementor Page Builder plugin is installed and activated. To install it, go to WP-Admin > Plugins > Add New and search for Elementor.
4. Go to Templates > Saved Templates and click the Import Templates button. See screenshot: https://d.pr/i/saZbBO
5. Import the file called "elementor-templates-kit-by-sonaar.zip"
6. Your imported template will now be displayed in your Templates list.
7. To use and insert templates into the page builder, read this article from Elementor Documentation: https://docs.elementor.com/article/60-library


10. How to use the Coming Soon page or Maintenance Page

Please read this article on how to use the maintenance mode without any additional plugin: https://elementor.com/blog/v140-maintenance-mode/

If the theme you've bought include a pre-designed coming soon page, you will need to save the page as a template before using the maintenance mode. See video: https://www.youtube.com/watch?v=DHt_Xh9ZRHA&t=049