Contents

1. My audio tracks don't play but I can see the sticky footer player. What's wrong?

2. Which streaming platforms do you support?

3. Maximum execution time of 29 seconds exceeded in class-wp-image-editor-imagick.php

4. How to import your podcast from a RSS Feed

5. When installing the theme it says "Are you sure you want to do this ? / the link you followed has expired"

6. How to add audio directly in a post

7. Responsive Website using Revolution Slider

8. How to make parallax effect with Visual Composer?

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

10. How to change Header, Mobile Menu and Offcanvas Menu

11. How to optimize and speed up your website

12. The Music slider style has changed since I have updated Slider Revolution to v6.x

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

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

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

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

17. How to Add Custom Font and Typography

18. How to activate the child theme ?

19. How do I update my theme ?

20. How I change hard-coded texts?

21. I'm using JetPack plugin. What should I know?

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

23. How to add Buy Now / Add To Cart button with WooCommerce

24. How to use the podcast Show page template

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

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

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

28. How do I update the plugins ?

29. Supported Audio Streaming Providers

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

31. How to change the background color and background images

32. How to use the MP3 Music Player Plugin + Shortcodes

33. How can I edit the footer area?

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

35. How to install the Elementor Templates Kit

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

37. Recommended image size (resolution)

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

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

40. How to use the music slider carousel

41. How to prevent a specific page to load with AJAX

42. How to work with Moonlight

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

44. How to setup the Event Section ?

45. Facebook display an unwanted preview of my image and text.

46. Automatically fetch/import new episodes on your website from your existing Podcast hosting

47. How to import theme demos

48. How to update MP3 Audio Player Pro ?

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

50. ACF Support

51. There are codes showing up on my page ? My site is broken! What's wrong ?

1. My audio tracks don't play but I can see the sticky footer player. What's wrong?

The issue seems mostly related if you use a CDN (Content Delivery Network) or GoDaddy Shared Hosting (GoDaddy enable a CDN by default)

The player shows up at bottom but it won't play any audio. This happens because you have CDN (Content Delivery Networks) enabled in your GoDaddy control panel. If you check your console log (with Chrome), you will see a CORS Policy error such as this one: https://d.pr/i/Be7qSM

It's because your player is hosted on yourdomain.com but the player tries to play a file that is hosted on a different domain name thus it gives a permission error. (CORS). Since our player use javascript to request the audio file, the source server (aka requested server) must "accept" incoming request from the server (aka origin server) where the player is embed.

There are 3 different options to resolve this issue:

1) You disable your CDN on GoDaddy (check in your Godaddy panel)

2) You turn off real-time spectrum analyzer in wp-admin > theme options > general settings (this disable the javascript request at the same time)

3) You check with your CDN to add yourdomain.com to its CORS header.

2. 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.


3. Maximum execution time of 29 seconds exceeded in class-wp-image-editor-imagick.php

Problem: If you get this error message when importing a theme demo:

Maximum execution time of 29 seconds exceeded in /xxxxxx/wp-includes/class-wp-image-editor-imagick.php on line 366

Solution: Add this piece of code in your child theme's function.php:

add_filter( 'wp_image_editors', 'change_graphic_lib' );
function change_graphic_lib($array) {
return array( 'WP_Image_Editor_GD', 'WP_Image_Editor_Imagick' );
}



4. How to import your podcast from a RSS Feed

1. Create a Podcast Category

First, we recommend that you create a new podcast category (where your episode will be imported into) by going to wp-admin > Podcast Episodes > Podcast Category > add new.


2. Import the feed

To import your existing podcast episodes into your theme, go to wp-admin > tools > import > Podcast RSS Feed > Run importer

Paste the URL link of your actual RSS feed into the RSS Link URL field and we will import the episodes. Before importing your RSS feed, make sure you have a valid RSS Feed. You can validate it here: https://castfeedvalidator.com/


3. Keep your episode synchronized with a third party

If you are want to synchronize your exisiting RSS feed and episodes to your wordpress site and avoid running this importation process everytime, you will need to setup a cron-job. Please read this article.

5. When installing the theme it says "Are you sure you want to do this ? / the link you followed has expired"

There are 2 different causes for this issue.

If you are installing your theme from the WordPress theme dashboard, but get a message that says “Are you sure you want to do this OR the link you followed has expired ?”, most likely your web server is configured with PHP settings that are too low to allow the theme ZIP file to upload. Specifically, PHP is configured to a maximum file upload size limit at 8 megabytes or less. The theme ZIP is currently about 34 MB. Thus, the web server is rejecting the upload. WordPress is giving you a rather ambiguous message in response.

This is not a theme fault or bug.

SOLUTION 1)

You can either increase your PHP limits. Since every server is configured differently, there are 3 ways to do this. You can try to do it yourself but if you don't have the skill, just ask your web host and they usually will do it for you.

To raise the PHP limits, try one of the 3 solutions below:

a) Add this in the .htaccess file of your server php_value memory_limit 128M php_value post_max_size 128M php_value upload_max_filesize 128M php_value max_execution_time 1800

b) Add this to wp-config.php

define(‘WP_MEMORY_LIMIT’, ’64M’); c) Create a text file and name it php.ini then upload php.ini file in your root folder by FTP. In the php.ini file, add: upload_max_filesize = 64M post_max_size = 64M

--- 

If it still doesn't work, you can ask your web host to raise the upload and memory limit (Just tell them you are trying to upload a WordPress theme file that is around 35MB) OR jump to SOLUTION 2 below:

SOLUTION 2)

You can upload your theme via an FTP client. Please read this article for more info: 

 http://codex.wordpress.org/Using_Themes#Adding_New_Themes_Manually_.28FTP.29

----- 

Recommended PHP configuration limits are as follows:

max_execution_time 600

memory_limit 256M

post_max_size 64M

upload_max_filesize 64M

You can verify your PHP configuration limits by installing a simple plugin called WordPress phpinfo().


ADDITIONAL INFO:

Sometimes, you might be trying to upload the whole theme package zip file (which contain the PSD, Licence, Theme, etc..), instead of only the theme zip file.

If that's the case, make sure you unzip the theme package zip file on your computer, then look into the /Theme/ folder. Make sure you are uploading sonaar.zip that is located in that theme folder.

6. How to add audio directly in a post

Adding audio in any kind of post without creating a playlist is pretty easy.

1) Install and Activate MP3 Audio Player Pro by Sonaar.

2) Go to WP-Admin > MP3 Player > Settings and enable the post type you want. See screenshot: https://d.pr/i/nV2mNo

3) Edit your post and now you will be able to upload/insert a track. See screenshot: https://d.pr/i/GJbWAq

4) Add the player anywhere in the post. You can use either our Elementor Widget MP3 Player, Gutenburg block or simply use the shortcode below:

[sonaar_audioplayer]

View all shortcode attributes available here


7. 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:

8. 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.

9. 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.

10. How to change Header, Mobile Menu and Offcanvas Menu

Since version 4.20 of Sonaar, you can change the headers and menu directly within the Elementor editor. 

Choosing which template to use as your header.

  1. Go to WP-Admin > Theme Options > Menu Options.
  2. In the Menu Type, select Elementor Header
  3. Choose the template you want to use as your site header. The page template can be set up in WP-Admin > Headers & Footers.

Editing your header

  1. Go to your website front-end where you see your header.
  2. In the top toolbar, select Edit with Elementor > and select your header.

* Pro note: If you don't see the template to edit in this sub-menu, make sure to refresh the page.

* Pro note #2: As you can see, this sub-menu unveils all Elementor templates that are being used on the current page. It's useful if you want to jump into Elementor editing straight off from your site's front-end.

* Pro note #3: You can also access the header and footer templates in WP-Admin > Headers & Footers. The Off-canvas template is located in WP-Admin > Templates.

Changing your logo.

  1. Go to WP-Admin > Appearance > Customize > Site Identity

Editing Mobile Menu

  1. In the top toolbar, select Edit with Elementor > and select your header, as shown in the image above.
  2. Once you are in the editor and depending on the theme you are using, you might see 2 versions of your header. The first one is your desktop, and the second section below is your responsive version.




  3. To jump between Mobile, Tablet, or Desktop views, click the Mobile label in the yellow rectangle, or click the responsive icons and select Mobile:



  4. To set your responsive versions and decide which section to show or hide depending on the screen size, select the section and go to Advanced > Responsive. As you can see on the screenshot below, the selected section is 'Hide on desktop' which means it's gonna be shown on tablet and mobile and thus become our tablet and mobile version! The section above the selected one (aka the desktop version) with the yellow rectangle is set to be hidden on Tablet and Mobile and thus, become our desktop version.



  5. In this mobile menu, we are using an Off-Canvas menu which is represented by a hamburger menu. Using the off-canvas menu gives us all the flexibility we want to create any kind of mobile menu using Elementor. It's very powerful. To edit the template used when we click the hamburger menu, select the off-canvas widget and you will see which template is used, and a link to edit it.

    All Offcanvas templates are located in WP-Admin > Templates. They are basically Elementor templates.

  6. The template below can be edited by going on the front-end of your site and click Edit With Elementor > Off-Canvas, OR go to WP-Admin > Templates.

  7. The appearance and styling of the off-canvas are set by editing the off-canvas widget > Style tab. The content of the off-canvas is set by editing its template.

Pro Note: Everytime you want to edit a header, footer or off-canvcas menu within Elementor, and you are lost, go on your site's front-end and click Edit With Elementor > and select the template you want to edit.

Edit your menu items and menu labels

1. Go to WP-Admin > Appearance > Menu


11. How to optimize and speed up your website

Here's an article about optimizing your website and make it faster. If you experience slow issue, this article is for you:


Use the "Dynamic CSS into Static Stylesheet's" theme option.

Our theme options and individual page options are loaded every time a page is loaded. This mean there are calls to your DB whenever a page loads and this can slow your site, especially if you use PHP 5.x. (PHP 5.x is twice slower than PHP 7 by the way). So make sure to activate the option "Move Dynamic/Custom CSS Into External Stylesheet?" by going to WP-Admin > Theme Options > General Settings. See screenshot: https://d.pr/i/yIpFnj

Wait! There is one downside with this option: Since your options will become a standard CSS file, it will be saved in your browser's cache. When you will change one of your theme options or page options, you will have to clear your browser's cache to see the change.

Use a Cache plugin

This is essential! Any great and fast website use a caching system and this might speed up your website 5X faster. Caching plugins allow you to publish static HTML files instead of dynamic files. This greatly reduces the time a page takes to load as there are no PHP or MySQL commands to execute.

Additional caching features include minification, caching of feeds, Gzipping, Content Delivery Network (CDN) support, and much more, but lets keep it simple for now.

Caching your pages is one of the most effective ways of improving your page loading times, with many plugins promising an improvement of at least ten times. We recommend using WP Rocket. It's a paid plugin but so much effective! There are other free caching plugins but WP Rocket is the way to go.

If you are using WP Rocket, (or any cache plugins), make sure that:
1- Page HTML Cache is activated
2- Disable Minify CSS and Minify JS (Our files are already minified thus, it will create conflicts)
3- Disable Combine CSS and disable Combine JS

Check your plugins

Make sure Iron Demo importer plugin is deactivated once you have imported your first theme demo. You don't need this plugin except for importing a new theme demo so it's better to leave it deactivated.

Before you install any third party plugin on your website, ask yourself “Is this plugin necessary?”.

Third Party Plugins are one of the biggest causes of  slow WordPress site. The more plugins you install without research, the more likely you will face performance issues; however the sheer number of plugins you have installed is not the reason a WordPress website can slow down.

Certain plugins are known for causing websites to be slow. There are many reasons for this including bad coding, calls to external servers and persistent calls and updating of your WordPress database. Pay close attention to how much CPU plugins use too. Many plugins can bottleneck your CPU due to persistent processes. If this happens, your whole server could go down.

One plugin I highly recommend you use is P3 Profiler. Developed by GoDaddy, the plugin will show you exactly how much load time your plugins are adding. A breakdown is given which displays exactly how much load each plugin adds. It is the most effective way of seeing what plugins are slowing down your website.

If you are using Essential Grids:

Make sure that the grid items use an appropriate image format. By default, the items displayed in your grid is set to load the large or full image. By example: If your grid contains 50 items and each items loads a 1mb image, the user will have to download 50mb of images in order to display the page! Its too much. You should load medium image for desktop and thumnails for mobile. See screenshot: https://d.pr/i/nigBv6

For more Essential Grid optimization, see official documentation here: https://www.themepunch.com/essgrid-doc/optimization/

Optimize your image

Images can help break up long pieces of text and can help your articles be shared more frequently on social media services; however they also take up a lot of storage. Therefore, pages that contain many images can take a long time to load.

It is therefore in your best interests to optimise your images for the internet before you upload them to your website. Most photo editing applications, such as Photoshop, allow you to do this via the “Save for Web” option.

A good plugin to optimize images that have already been uploaded is WP Smush.it. It utitlizes the Smush.it API to optimize JPEG images, strip meta data from JPEGs and convert GIF images to PNG. You should however be aware that the plugin uses up a lot of resources when it is converting images, therefore your website may be slow whilst it is running.

12. The Music slider style has changed since I have updated Slider Revolution to v6.x

When we update Slider Revolution from version 5 to version 6, the music slider provided by our demo content will be a bit altered. The perspective effect will be removed. 

How to reset the Perspective effect:

The plugin update will also enable the carousel "auto rotate slideshow" option by default. Here how to disable this option.