General Help on our Theme

Contents

1. How the back-end of your themes look like ?

2. How do I update my theme ?

3. How do I update the plugins ?

4. Recommended image size (resolution)

5. How to Add Custom Font and Typography

6. How I change hard-coded texts?

7. How to translate the theme in your own language ?

8. How to embed a SoundCloud Player into my pages ?

9. How to change the Slug or page URL of my page?

10. How to add a link in the menu that scrolls to a page section (Anchor)

11. How to make parallax effect with Visual Composer?

12. Responsive Website using Revolution Slider

13. How to duplicate Events, Playlists, Artists, Posts and Custom-Posts

14. How to use my own YouTube channel in the grid

15. How to add a social network icon to a menu item

16. How can I change the menu text color and the menu background color

17. How can I edit the footer area?

18. How to use the Instagram grid and replace my username

19. Which streaming platforms do you support?

20. How to use the newsletter form provided with the theme

21. How to use the music slider carousel

1. How the back-end of your themes look like ?

Here's a sneak peek of how the admin dashboard within WordPress looks like 

Theme Options:  Watch Video

Demo Importer: View Screenshot

Custom Post Types and Page Settings: Watch Video

2. How do I update my theme ?

In order to update your Sonaar theme, you must have an active subscription at sonaar.io.

First of all, like any theme's, plugin's or WordPress updates, we recommend doing it on a staging environment first and have a backup copy of your existing site before the update in case something wrong happens. You can check with your hosting provider to make sure they have a backup retention enabled.

Automatic Update

1) The best way to update your theme is to go to WP-Admin > Dashboard > Updates. Select Sonaar theme and click "Update Themes". See screenshot: https://d.pr/i/EUHlVt

2) Once the theme is updated,  make sure that your required plugin are updated and activated by going to wp-admin > Appearance > Install Plugins. 

3) Make sure to clear your browser cache!

* If you are using a WP Multisite or multi-networks and/or you can't see the theme update, you must update the theme manually. See below.

Manual Update

1. Login at sonaar.io/login and go to My Account > Licence Keys > and click View Details and Download and re-download the theme file on your computer.

2. UNZIP the theme file on your computer.

2. Go to Wp-Admin > Appearance >  Themes and activate another theme such Twenty Fifteen.

3. Delete the Theme you want to update. (Yeah, it sounds scary, but don't worry. You must delete the theme before re-uploading the same theme).

4. Go to WP-Admin > Appearance > Themes > Add New and Upload sonaar.zip.

5. Activate your theme by clicking the "Activate button".

6. When the theme has been reactivated, go to WP-Admin > Appearance > Install Plugins and click "update" for every plugin that requires an update.

7. Clear your browser cache

8. Clear any cache plugin you are using including server cache (eg: CloudFlare, CDN, Varnish)

*IMPORTANT

- Once the theme is updated,  make sure that your required plugin are updated and activated by going to wp-admin > Appearance > Install Plugins. 

- Make sure to clear your browser cache (on mobile too)

- Clear any cache plugin you are using including server cache (eg: CloudFlare, CDN, Varnish)


3. How do I update the plugins ?

We use 3 premium plugins packaged with our theme. When there is a new plugin version available, we (as a theme author), need to check, test and make sure that new version is fully functional with our theme. Once tested, we release a theme update which includes the new version of the plugins. So it can haves a delay between the time a plugin version is released by the third party author and our theme updates.

To check which plugin version is available from our theme,  check our theme's changelog


How to update a plugin.

Make sure that your theme is up-to-date

1. Slider Revolution

To update Slider Revolution, go to WP-Admin > Plugins > Delete the plugin then go to Appearance > Install Plugins > and re-install the plugin. You won't lose anything.

2. WPBakery Page Builder (Formerly knowns as Visual Composer)

To update WPBakery Page Builder (Formerly knowns as Visual Composer), go to WP-Admin > Plugins > Delete the plugin then go to Appearance > Install Plugins > and re-install the plugin. You won't lose anything.

3. Essential Grid

Please BACKUP your grid before updating the plugin -- To update Essential Grid, make a backup of your grids first: Go to WP-Admin > Ess. Grid > Import/Export. Click Export then click Export Selected. Save the .json file on your computer. Then go to WP-Admin > plugins > and delete Essential Grid. Now go to WP-Admin > Appearance > Install Plugins and install Essential Grid again. Once it's activated, go to WP-Admin > Ess. Grid > Import/Export. Click Import and Import the .json file you previously exported. then click the green READ FILE button.

4. Recommended image size (resolution)

Here our image recommendation for the best result with our theme. 

For general backgrounds


 For the Blog "Featured images": 


For the Event "Featured images": 


For the Album "Featured images": 


For the Gallery images: 

5. How to Add Custom Font and Typography

There are several ways to add custom fonts, depending on your needs.

1) Add custom fonts with Custom CSS:

a) Paste this code into Custom CSS field. This will tell your theme to load a custom font.

@font-face {
    font-family: 'MyWebFont';
    src: url('http://yoursite.com/fonts/webfont.eot'); / IE9 Compat Modes /
    src: url('http://yoursite.com/fonts/webfont.eot?#iefix') format('embedded-opentype'), / IE6-IE8 /
    url('http://yoursite.com/fonts/webfont.woff2') format('woff2'), / Super Modern Browsers /
    url('http://yoursite.com/fonts/webfont.woff') format('woff'), / Pretty Modern Browsers /
    url('http://yoursite.com/fonts/webfont.ttf') format('truetype'), / Safari, Android, iOS /
    url('http://yoursite.com/fonts/webfont.svg#svgFontName') format('svg'); / Legacy iOS / }

Just put absolute paths to your font files. Note that you need to have different file formats since some browser will use only certain file type as explained here https://css-tricks.com/snippets/css/using-font-face/

b) Then use this CSS code by placing it inside Custom CSS field as well for the specific CSS class you want to use the font:

body, h1{font-family: 'MyWebFont', sans-serif;}

The example above will use the custom font called "MyWebFont" for the Body and H1 class.


2) Use a plugin

Another option is use the plugin called:  "Use Any Font". Some customers have recommended it but we didn't test it.

3) Use Elementor Pro

so your custom fonts appear directly in your Elementor's widget typography field.

6. How I change hard-coded texts?

Some texts in our theme are hard-coded, like back and next buttons or labels days, hours, minutes from the countdown. You can't find an option to edit them on the wp-admin dashboard.

So how we can customize them without modifying our theme? The solution is simple. We need to translate string from our theme.

Example. you want to translate  "No upcoming events scheduled yet. Stay tuned!" to "We are on vacation for two years", we need to make an English translation.  How to do it?

1. Download and Install PoEdit software: https://poedit.net/

2. Open Poedit and open file /wp-content/themes/sonaar/languages/sonaar.pot.

3. Click on edit and find, and search for the string you want to modify. 

4. When you have found in which file is located the string please click on create a new translation.

6. Select the same language selected in your WordPress. 

If you are not sure which language is set to your wordpress, please go to wp-admin>setting>general.

7. Find your string again and fill the translation field with your new string.

8. Click on save and save your files in /wp-content/languages/themes/sonaar-en_US.mo.

When we save the po file, a .mo file will be automatically generate. The mo file is the file read by wordpress.  

7. How to translate the theme in your own language ?

Translate in your own language

The best tool to translate your site in your own language is by using the WeGlot plugin. WeGlot is a new plugin that revolutionize the translation of a WordPress site. We strongly recommend it as it's the best translation tool for WordPress.

If you don't want to use WeGlot and translate your site in a old-fashion and traditional way, read below:

  1. Download and Install PoEdit software: https://poedit.net/
  2. Unzip sonaar.zip WordPress theme on your computer.
  3. Open Poedit and click on File -> New from POT/Po file in the main menu and select the POT file in your theme’s languages folder. The .POT file should be located in your /sonaar/languages/
  4. A properties box will open up. Select the language name you want to translate to.
  5. Now you can start translating the theme via the String Translation mechanism. This provides direct like-for-like translations. Go through each line one-by-one, adding the translation to your native language as you go. If you think there’s some text that won’t require translation or you’re not sure what to translate it to you can just leave them as they are in the original language; you can always come back and translate them later if need be. You don't have to translate everything. Remember that strings that you have not translated will appear in english in your site. The string you have translated will show the corresponding translations.
  6. Go to File -> Save. You’ll be asked to what filename you want to save your .po file. Each language and country has a specific code you will need to use when saving translation files; for instance, if you’re going to translate into Spanish you’ll name your file “sonaar-es_ES.po”, whereas if you’re translating into German you’ll name the file “sonaar-de_DE.po”, french from France will be "sonaar-fr_FR.po", french from Canada will be "sonaar-fr_CA.po". To break it down; the first lower-case letters defines the language, whereas the second upper-case letter defines the country. In many cases the language and country will be the same, hence “de_DE” for Germany, but what about languages like English or Portuguese, that are spoken in several countries natively? In these cases there will be a difference in the first and second letter pairs; for the UK, the code would be en_GB, whereas for the USA it will be en_US. If you’re not familiar with the codes for your native language and country you can head over to the GNU website, where they have all the codes for Language and Country. Remember, if you use the wrong naming convention WordPress won’t be able to use your translation, so double-check if necessary.
  7. Save your new language file in the wp-content/languages/themes/sonaar-fr_CA.mo. See screenshot: http://d.pr/i/iVUn

Setup Wordpress to read your translation

OPTION 1. IF YOU ARE USING 2 LANGUAGES ON YOUR SITE:

  1. Make sure the language value you are translating is set in your translation WordPress plugin. In this case, we are using WPML plugin.
  2. Go to WP-admin > WPML > Language. Add/Edit the language you want to translate (http://d.pr/i/ssZZjo) and click "Edit languages"
  3. Make sure that the default locale is corresponding to your .mo file you previously saved. In this case, it will be fr_CA since my .mo file has been named: sonaar-fr_CA.mo (where sonaar is the name of my theme and fr_CA is my default locale, separated by a dash) See screenshot: http://d.pr/i/wNxvu7

You are done!

OPTION 2: IF YOU ARE USING ONLY 1 LANGUAGE ON YOUR SITE

You’ll need to make sure your wp-config.php file settings match your language files. Edit the file wp-config.php which is located in your root folder (See screenshot: http://d.pr/i/1fQmH) You’ll need to open the wp-config.php file and set your language accordingly, like this:

 


/** * WordPress Localized Language, defaults to English.  *  * Change this to localize WordPress. A corresponding MO file for the chosen  * language must be installed to wp-content/languages. For example, install  * es_ES.mo to wp-content/languages and set WPLANG to 'es-ES' to enable Spanish  * language support.  */ define('WPLANG', 'fr-CA');

 

 

Share your language files with others

If you’ve already translated a theme then many of our users would be delighted if you could share your translation files with the community. Just get in contact with us via our Helpdesk ticket system and we will include the translation files in the next theme update if possible.

 

Translation tips: Character Encoding

If you’re used to working in HTML or through the WordPress editors then there are a few areas which might catch you out when creating the translations; here’s a few tips to help you get things done: First of all, any localizations should use UTF-8 encoding. This is one of the reasons we recommend Poedit; this kind of seemingly minor issue is already accounted for in a dedicated program. If you were to edit the files via a standard, simple editor like notepad, then the default settings will usually use different encoding. You won’t actually notice this when working on the file, but once you save it you’ll notice that all your translated elements are displaying the identifying string rather than the original or new language. You can just open and resave the file with the proper encoding, but using a dedicated program will prevent this happening in the first place, so it’s probably the safer solution! When writing your translations you should write your translations plainly; that is, avoid escaping accented and special characters with HTML character entities, save for a select group that are expected to be escaped to avoid conflict with XHTML markup: angle brackets (< & >), and ampersands (&). In addition, there are a few other characters that function better when escaped, such as non-breaking spaces ( ), angle quotes (« and »), curly apostrophes (’) and curly quotes. When we create multilingual sites, we need to remember that translation is not everything; localization goes beyond just translating words and expands to include adapting the site to a different language, country and conventions. Some words simply don’t mean the same thing or carry the same implications as other languages, so don’t translate literally; translate organically; try to get a feel for the meaning behind the original text, and capture that spirit in your translation.

8. How to embed a SoundCloud Player into my pages ?

To setup SoundCloud on the homepage, you have several options but here are 2 easy options: 

1) Embedding the player into a text area widget Go to soundcloud.com. follow this FAQ to embed the player. http://help.soundcloud.com/customer/portal/articles/243751-how-can-i-put-my-sound-on-my-site-or-blog-
Once the iframe code is copied into your clipboard, go to wp-admin > appearance > widget. Drag/drop the TEXT widget into your homepage one or two column zone. Paste the iframe code into the box. Here's a screenshot: http://d.pr/i/ZzLb  

2) Use a SoundCloud player plugin/widget:
Install a plugin such as SoundCloud is Gold (see screenshot: http://d.pr/i/I7pK ) Activate the widget then go to Appearance > Widgets and drag/drop the widget on your homepage one or two column zone.

9. How to change the Slug or page URL of my page?

You have created a page and the slug name doesn't match the page name. It has an undesirable "-2" which is added. You are trying to remove it but you can't.

Most often, the reason is that your permalink is already in use.

Check the permalinks of your pages and beware that the permalink might be already used by a page in the trash. Make sure to check in your trash section of your pages/posts. 

Another case that it won't work is because you are trying to use a slug name that is dedicated as a parent of a post type. Permalinks: "/discography", "/event", "/videos" are dedicated.  You cannot use them.

So if you have created a page called "videos", the default permalink will be "/videos-2". You can't use "videos". 

You can use another slug name as "video" or "-videos-" Or you can also make your page a child page, so the permalink will change. (ex: "/medias/videos")

10. How to add a link in the menu that scrolls to a page section (Anchor)

First you need to create an anchor that will be the "target".

With Visual Composer, it's very easy to create an anchor.

1. Click the "pen" icon of the row element you want the anchor:

2. Fill the 'ID Name for Navigation' field with the name of the anchor you want. (Eg: about, music or contact). Do not use space or special characters.

3. Add a new menu item in your menu: Go to WP-Admin > Appearance > Menus.

4. Create a new 'Custom Links'. In the 'url' field, add "/#" and your Anchor ID you previously set. So if your anchor is about, the url will be /#about

* If you need to point to an anchor which is on another page than your homepage, then you need to add the slug name in the url. Eg: /bio/#about

11. How to make parallax effect with Visual Composer?

1. Click on the "Edit row" icon where you want your background image appear.


2. Activate the parallax option. 


3. Select the "Design Options" tab.


4. Insert a background image.

5. Then create a row INTO this parent's row.

6. Add your content into it. The parallax will be applied in the parent's row and the child row will have the parallax effect.

12. Responsive Website using Revolution Slider

Sometimes, your texts and images do not behave exactly how you'd like.

99% of the case, its because you havent checked or noticed the settings for the responsive settings in Revolution Slider.


First, make sure its enabled by going to Slider Settings > and enable "Custom Grid Size" buttons on the devices you want to have control on. See screenshot: http://d.pr/i/vJstcF

Once its enabled, edit your slide and you will new sets of device icons show up in your screen. See screenshot: http://d.pr/i/EI6JsE


Now check the video below for a full tutorial:

13. How to duplicate Events, Playlists, Artists, Posts and Custom-Posts

First, you need to install a plugin called "Duplicate Post".  - Go to WP-Admin > Appearance > Install Plugins > Add New - Search for "Duplicate Post", install and activate it.

Select Custom Posts you need to duplicate. - Go to WP-Admin > Setting > Duplicate Post - Select the "Permissions" tab - Check all custom posts wanted

A "clone" option is now available below each of your posts.

14. How to use my own YouTube channel in the grid

To display the YouTube videos in our grid (eg: https://demo.sonaar.io/standup-elementor/video-youtube-channel/), we use Essential Grid plugin. The video displayed in that grid is pulled directly from our YouTube channel. To replace the YouTube channel by your own, follow these steps.

1) Go to wp-admin > Ess Grid.

2) Locate the grid's name you are using in your page (https://d.pr/i/DqKCzB) and click settings (https://d.pr/i/cGGEO1)

3) Go to the source tab and change the info by your own: https://d.pr/i/v06m4p

Find information about the YouTube API key here

See how to find the Youtube channel ID here

Once your info will be set, you will be able to select your own playlist. 

4) You can clear the cache to make sure it pulls the up to date information with your channel; https://d.pr/i/TodT3g

5) You are now ready to display the grid on your website. Edit any of your pages with Elementor then add the widget Sonaar: Essential Grid and select the corresponding grid. Publish! https://d.pr/i/wa5SLZ


15. How to add a social network icon to a menu item

First, be awared this article is not about the hotlink feature.  We will learn here how to add a social network icon to a regular menu-item as we can see on our theme Karbones.




To add a social network icon to a menu item, we have to use a extra css class. 

Please go to wp-admin>appearance>menu

  1. Open the "Screen option" panel
  2. Check the "css class" option
  3. And add the css class related to the wanted social network into the new css class field available.


Here all class available: 


16. How can I change the menu text color and the menu background color

All menu settings are located to wp-admin>theme options>menu options.  We can change the text color into the "Main item Typography" settings.

If we want, we can apply a background color to the menu container.  Another background color option is available for the mini menu.

Those settings are applied by default on the whole website, but we can overwrite the menu text color and the menu background color on a specific page in its page settings.  If you have imported a demo content and you dont understand why the menu text color from the "menu options" doesnt seem to work, this is probably the reason. Please take a look in the page settings.

17. How can I edit the footer area?

Sonaar use a custom post called "Footer" to built the footer. 

So to edit the footer we have to go to wp-admin>footers 



and edit the footer post used. 



All WPBakery page builder tools are available to built the footer as we want.



We can create more than one footer post. To select wich footer we want to use as default footer, we have to go to wp-admin>theme options>footer options



And select the footer post we want

We can also overwrite the default footer in each page settings

18. How to use the Instagram grid and replace my username

Article updated: July 13th 2020

To display instagram on your website, you have 2 options.

OPTION 1)

Use our pre-designed Essential Grid model (available when you import a theme demo) and use your own Instagram API Key. To create/enter your Instagram API Key, make sure that you run Essential Grid version higher than 2.3.6 (2.3.6 is deprecated)

Then go to WP-Admin > Ess. Grid. and locate the Instagram Grid. Click Settings then go to Source Tab and enter your Instagram API Key

Read the official documentation on how to generate your API Key

To enter your API Key, go to wp-admin > Ess. Grid > select the instagram grid and click settings then Source tab.


OPTION 2)

Use the free plugin by Smash Balloon: https://wordpress.org/plugins/instagram-feed/

19. Which streaming platforms do you support?

You can play audio files that are hosted either on your own server or on external and streaming servers. We support a lot of them, but some providers have restrictions. 

You can play audio within our custom audio player using:
- Local .MP3 file
- Local .M4A file
- Icecast
- Libsyn
- Stitcher
- Shoutcast
- Acast
- Amazon S3
- FMStream.org
- Any web server for which you control the .htaccess and CORS policy (have root access)

We also support these streaming servers but if you are using our Sonaar Theme, you will need to deactivate the Real-Time Spectrum Analyzer (wp-admin > theme options > general settings. See screenshot: https://d.pr/i/61Itlr)
- Podbean
- SoundCloud Podcasts
- Buzzsprout
- Simplecast
- Spreaker
- Audioboom
- CastBox
- Pippa.io
- Anchor
- Google Drive (not recommended because it has slow loading because of all their security checks)

You cannot stream directly from the services below, BUT you can embed their native player on any pages:
x Spotify
x SoundCloud Music
x Apple Podcast
x Google Podcast
x YouTube
x MixCloud

We also support a lot of other providers that are not listed here but we have not tested all of them. If you have a provider that is not listed here and is supported. let us know so we can add it to this list.


20. How to use the newsletter form provided with the theme

MailChimp is the most popular newsletter system in the world and its free.

We have a custom widget called MailChimp that give you the ability to opt-in your visitors into your MailChimp account. You will then be able to manage and send newsletter to your mailing list using MailChimp.

1) To use our widget, you will need a free MailChimp account and create an empty list.

2) Enter your MailChimp API Key in WP-Admin > Theme Options > MailChimp. To find your MailChimp API Key: 

3) Once your API Key is saved into WP-Admin > Theme Options > MailChimp, go edit your MailChimp Widget in your page (or footer) and make sure to select which List you want the user to be subscribed to for that widget. see screenshot: https://d.pr/i/fdvkXg

The lists in the dropdown in the screenshot are pulled directly from your MailChimp account so if you don't see your list there, make sure MailChimp is correctly setup.


21. How to use the music slider carousel

The music slider carousel pulls its content from playlist categories.

1) In order to display a playlist (or album) into the slider, you must provide your playlist with a category name. See video: https://d.pr/v/vdbfRP

2) Then you need to "tell" the slider, which playlist categories you want to display. See video: https://d.pr/v/cp0qHx

3) Your slider is now ready. You can add the Sonaar Revolution Slider Elementor Widget on any of your page. See video: https://d.pr/v/TjXZQ2