How to – Page 3 – G5Theme Support

How to Hide Pre-loading Animation or Customize it (ex ZORKA)

1. Hide pre-loading animation
Go to ThemeOptions >> General Setting tab, scroll down and choose as the screenshot below to on/off selector and loading animation.

2. Customize loading
Please follow these steps:
2.1 – Change content out html: Open file jquery.animsition.js on this path: zorka\assets\plugins\animsition\js edit here:

2.2 – Min file js above(jquery.animsition.js) to jquery.animsition.min.js => copy all content(after min js).
Next, open file plugins.js on this path: zorka\assets\js, paste content to replace here:

– May be you must edit style css if change html on step 2.1

————
If you have any troubles configuring your website applications with the above settings you can contact the Support Center by signing up and submit a new topic. G5Theme Support Team will be glad to assist you.
Thank you very much for choosing G5Theme!

How to speed up your website

Your website may be slow because of many reasons:
– Internet Speed
– Server/hosting CPU/RAM
– Number request at the same time(when you access)
– Use CDN or not?
– Use plugin cache?
– Use server cache? etc

On our demo:
– We used plugin: http://wp-rocket.me/ and do follow https://gtmetrix.com suggest: images, css, js, gzip…etc, only that.
– And used CDN of https://www.cloudflare.com/ => you can use free or pay packaged.

Check Website On Google Page Insights and GT Metrix:

Please follow these steps as below to check your website for Google Page Speed:

Visit this site https://developers.google.com/speed/pagespeed/insights/
Type your website URL and click on Analyze button to know your website speed.

Check your website on GTMetrix:

Visit this site: https://gtmetrix.com/
Type your website URL and click on Analyze button to know your website speed.

This article will offer you our advice so that you can enhance your website’s performance. We will show our guideline for configuration WP Rocket (http://wp-rocket.me/) plugins and Cloudflare (https://www.cloudflare.com) with the free package. Both of them are used on all my theme. Now, let’s get started.

1. Config for WP Rocket, do follow:

1.1 Config tab “Basic Options”

Next to:

1.2. Config “Advanced Options”

Then scroll down to check the checkboxes as the image below. Then click “Save Changes”

1.3. Config tab “CloudFlare”, if not exist, go to 1.4:

1.4. Config “CDN”

After all step above done, click “Save Changes” button.

2. How to config CloudFlare account:

2.1. Integrated DNS’s your domain to CloudFlare.

Login to account manager domain then change/point DNS value to DNS Cloudflare’s server. In case you don’t know what to do, please contact domain provider.
With my domain, point to:
john.ns.cloudflare.com and wally.ns.cloudflare.com view here:

2.2 Add DNS your domain to DNS cloud’s server.

Login to Cloudflare then go to DNS tab

Result as below(example) is ok. In case color of “cloud icon” is grey => not correct, you must click on “cloud icon” to change.

You can buy plugins WP-Rocket or use https://wordpress.org/plugins/w3-total-cache (or another plugin cache) to improve speed. You can also consult the plugin named WP Fastest Cache for website cache. You can install this plugin and also learn how this plugin works, by following the below steps:

Login to your WordPress admin panel
Navigate to Plugins → Add New
Search for WP Fastest Cache, then install and activate the plugin.
Check on Submit, to enable the cache.

Aside from that, here are some more things you can do to better speed up your site:

Image Compress with TinyPNG:

You can compress images from TinyPNG website. Visit https://tinypng.com/ and compress all images before uploading them on your website. By this process, you can decrease your website loading time and provide your visitors, a better experience.

.htaccess Code For Better Website Speed:

Please copy and paste the below code to your .htaccess file (you will find this file on the root folder of your hosting directory) for improved performance of your website.

(Notice: Please don’t replace any code that already exists on the .htaccess file because it may have serious implications on your website)

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

—————————————

If you have any troubles configuring your website applications with the above settings you can contact the Support Center by signing up and submit a new topic. G5Theme Support Team will be glad to assist you.

How to Configure Email

Google’s GMail SMTP server is a free service for anyone who has a GMail account. You can use this free SMTP server to send emails from your website. E-mail sending will take place just the same as a standard e-mail client (Windows Mail, Outlook, Thunderbird).

Gmail automatically rewrites the “from” line of any e-mail you send via their SMTP gateway to your Gmail address, and it overrides any Reply-To settings you may have in your e-mail software in favor of the one in Gmail’s web interface. So while Gmail’s SMTP access sure is handy, it’s not a perfect solution for everybody. Gmail also stores and indexes anything you send via SMTP as if you had sent it using the website, so all your e-mail is still searchable and in one place.

If you don’t have a GMail account, you can create one at the GMail account creation page. Firstly, please install WP SMTP. Then all you need to do is configure your mail client to use GMail for outgoing mail server.

Access to configure Email

The details you should use are:

Outgoing Mail (SMTP) Server: smtp.gmail.com
Port: 465 or 587
Use Secure Connection: Yes (this can be TLS or SSL depending on your mail client)
Use Authentication: Yes
Username: your GMail account, i.e. user@gmail.com
Password: your GMail password

You can review more detailed information about the Google SMTP configuration at: https://support.google.com/a/answer/176600?ref=G5Theme

If you have any troubles configuring your website applications with the above settings you can contact the G5Theme Support team and they will be glad to assist you.

How to Manually Add New Custom Font to your theme

Adding your own choice of fonts is relatively easy by using Custom CSS function on the G5Theme item. All that’s required is uploading a font to your server, then adding it to your theme with a few small snippets of CSS.

Let’s look at how to do it for your WordPress theme as well as a G5Theme item.

Step 1: Prepare all your font files

There are many places to find great web fonts for free, just make sure the font you choose has a license suitable for your needs.
Once you have chosen your new font, you need to download its file. Keep in mind that there are different kinds of font files and they aren’t all compatible across most major browsers (ex: my theme used eot, woff2, woff, ttf, svg)

Step 2: Upload font files to your directory

Once you’ve prepared all your font, it’s a good idea to back up your entire site before making any changes.

Unzip the font packaged file and upload the contents to your theme folder which can be found under this path wp-content\themes\your-theme\assets\fonts (“Fonts” folder to house your file to keep things organized, especially if you plan on adding more than one font)

Step 3: Add Custom CSS

Go to Theme Options >> Custom CSS tab on the backend, add CSS below:

@font-face {
font-family: 'your_name_font_family';
src: url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.eot');
src: url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.eot?#iefix') format('embedded-opentype'),
url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.woff2') format('woff2'),
url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.woff') format('woff'),
url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.ttf') format('truetype'),
url('https://your_domain/wp-content/themes/[your_theme]/assets/fonts/your_font_file_name.svg#ge_ss_twolight') format('svg');
font-weight: normal;
font-style: normal;
}

– your_name_font_family: name of the font, you can type anything you want (make sure that it don’t duplicate already fonts)
– your_domain: your website URL
– your_font_file_name: they are the name of files (which you uploaded to directory font).

Step 4: Save changes

Click “Save Changes” and “Generate Less To CSS”
or click “Save & Generate CSS” button. Recently, we integrated “Save Changes” and “Generate Less To CSS” button (http://prntscr.com/gb0920) so you can simply click on “Save Changes” button.

After that, you can use style: font-family: 'your_name_font_family';anywhere on your website.

How to add a new font to Theme Options in Real Estate Themes

These screenshots below are captured in the Benaa theme – one of the real estate WordPress themes developed by G5Theme.

Step 1: Prepare all your font files and declare the new font to the functions.php file

Download the package of the font you have chosen, then log in your FTP account to declare the new font to the functions.php file which located in this path: wp-content/plugins/benaa-framework/inc/smart-framework/inc/funtions.php

1-update-function-file — Declare the new font to function.php file

Step 2: Upload all the font files and create a new CSS file for the font

Unzip the font packaged file then go to this path: wp-content/themes/benaa/assets/plugins/ and upload the folder that included all the font files.

Create a new CSS file named fonts.css which declare the font files as below:

2-add-font-css file — Upload all the font files and create the fonts.css file

Step 3: Declare the font to the frontend-enqueue.php

Declare the font to the frontend-enqueue.php file which can be found under this path: wp-content/themes/benaa/inc

3-update-frontend-file — Declare the font to the frontend-enqueue.php

Step 4: Use the new font in Theme Options

Go to Theme Options -> Font Options to choose the new font from Font Family

4-use-font-in-theme-options — Theme Options -> Font Options

——————-

If you have any troubles configuring your website applications with the above settings you can contact the G5Plus Support team by signing up and submit a new topic. We will be glad to assist you.

Thank you very much for choosing G5Theme.

How To Update Shortcode/framework Plugins To Lastest Version?

On each theme, we have a special plugin name: themename-framework, such as with MEGATRON: megatron-framework, with DARNA: darna-framework…and respective.

Without these plugins, the theme won’t work properly. When update theme to version higher, you need to update this plugin to ensure that you don’t run into any compatibility issues with the latest version of G5Theme.

Update framework notice

Note: This manually update shortcode/framework just apply for these items: HEARTSTONE, ACADEMIA, MEGATRON, HANDMADE, WOLVERINE, DARNA, INNOVATION, GROVE, ZORKA, CUPID (This is not updated for XMENU)

Step 1 – Deactivated current plugin and delete it on your website (delete it and all files current)

Step 2 – Download G5Theme package (latest version from ThemeForest) and extract it. Find theme-plugins folder on path: [root_G5theme]\theme-plugins\

Update-framework

For example with MEGATRON theme, path: megatron/theme-plugins, you will see megatron-framework.zip file.

– Re-install plugins/framework by upload file.

After Updating

After you are done updating your theme please also perform the following steps:

Clear your Site & Browser Cache

Whenever you update ANY plugin, theme or WordPress you must clear your browser and site cache to help avoid any potential cache-related bugs.

Updating WPBakery Page Builder

After you update your theme please make sure to update your WPBakery Page Builder plugin as well following the guide for updating the theme’s recommended plugins. If you update the theme and not the WPBakery Page Builder you may run into issues (Please consult this GUIDE)

How To Update Theme to Lastest Version?

Our customers on Envato can get the updated versions of the theme for lifetime without paying any other fee. There are two ways to update G5Theme items. The first method is to use Envato Market plugin which was included in G5Theme. The second is the upload the theme manually, either via FTP or WordPress. This is the traditional method and this method requires you to download the update-theme files from ThemeForest first.

How To Update Via Envato Market plugin

This is a quick and easy way to make sure that you keep all of your wordpress themes from ThemeForest up-to-date. This plugin help you to install WordPress themes purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token

Note: We highly recommend backing up your theme, files and entire database before updating.

Step 1 – Install and activate Envato Market plugin

Step 2 – Navigate to the WordPress Dashboard => click on the Envato Market, then click on Generate a personal token link to create an Envato API token.

Step 3 – Log in your Envato Account, then you will see a window with permission request of the plugin to access via your Envato account. Insert your Token name, check the options you want and click to Agree to the Term and Conditions and choose Create Token button to create your token.

Step 4 – Back to your WordPress installation and insert your Envato API token and choose Save Changes. When your token is saved and validated, the Envato Market plugin was successfully synced to your site and your purchased items will be right in your site.

Step 5 – When there is any update available for these item, a notice will be shown. In addition, you will see the notice on the core WordPress update page in Dashboard -> Updates.

To update Envato item using Envato Market Plugin, you just need to click on Update Available link in the update notice. All you need is waiting for the update to complete. A success notification will be displayed once the theme is updated successfully.

Step 6 – Don’t forget to update the G5Theme-Framework

Manual Update Method

With the Manual Update Method, you can either choose to upload the theme files manually via FTP or WordPress. Before you can update manually, you have to download the theme files from ThemeForest. Continue reading below for instructions on how to download the theme files and how to upload them.

Note: We highly recommend backing up your theme, files and entire database before updating.

How To Download The G5Theme Files From ThemeForest

Step 1 – Login to your ThemeForest account, navigate to your ‘Downloads’ tab and locate your G5Theme purchase.

Step 2 – Click the ‘Download’ button and choose to either download the ‘Installable WordPress file only’, which is just the WordPress installable file or choose to download ‘All Files & Documentation’ which is the full G5Theme package.

downloads

Step 3 – After downloading the files, you need to decide if you want to upload the theme files via FTP or WordPress. For instructions on both methods, please continue reading below.

How To Update G5Theme Via FTP

Uploading the theme files via FTP requires you to delete your old theme folder entirely. This is to ensure that any deprecated theme files that could cause update issues are removed completely.

Step 1 – Log into your server using FTP and navigate to the [your_website]\wp-content\themes\[your_G5theme_folder].

Step 2 – Backup [your_G5theme_folder] by saving it to your computer, or simply delete it. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the Installable WordPress file, then you only need to extract it once to get to the update version of [your_G5theme_folder].

Update-theme

Step 4 – Once extracted you can drag and drop the new G5Theme folder into [your_website]\wp-content\themes\ … location.

Step 5 – Don’t forget to update the G5Theme-Framework

How To Update G5Theme Via WordPress

Step 1 – First you need to deactivate your current G5Theme located in the WordPress Dashboard > Appearance > Themes section of your Installation. To deactivate, simply switch to a different theme.

Step 2 – After deactivating you can go ahead and delete it. To do this, hover over the theme thumbnail then click ‘Theme Details’. In the bottom right corner of the window, click the ‘Delete’ button. Your content such as pages, options, images and posts will not be lost or erased by doing this. However, any customizations to the theme’s core files, such as PHP files will be lost unless you’re using a child theme.

Delete theme

Step 3 – Retrieve the theme files you’ve just downloaded. If you’ve downloaded the installable WordPress file, then you do not need to extract it. If you’ve downloaded the Full Theme Package, you have to extract it once to access the secondary ‘g5plus-themename-ver1.1.zip’ file.

Step 4 – Then install by uploading the new version (.zip file).

Upload new version on Mowasalat update package

Once uploaded, click ‘Install Now’

Step 5 – When this has completed successfully, re-activate the theme by clicking the ‘Activate’ link.

Step 6 – Don’t forget to update the G5Theme-Framework

After Updating

After you are done updating your theme please also perform the following steps:

Clear your Site & Browser Cache

Whenever you update ANY plugin, theme or WordPress you must clear your browser and site cache to help avoid any potential cache related bugs.

Updating Visual Composer

AFTER you update your theme please make sure to update your visual composer as well following the guide for updating the theme’s recommended plugins. If you update the theme and not the Visual Composer you may run into issues.

Update Theme Compatible with Woocommerce 3.0+

Note: If you’re using a ecommerce theme supported WooCommerce from G5Theme (such as ORSON, HANDMADE, ARVO…), you need to do as follow to update the theme version that compatible with Woocommerce 3.0+

WooCommerce 3.0+ is a major update, and we alway try our best to resolve compatible problem in the theme update shortly. It is important that you make database backups and ensure theme version and extensions are 3.0 compatible (Check carefully our change logs, ex on Zorka: http://themes.g5plus.net/zorka/changelog.html), then delete the old theme version file before upgrading.

If you’ve used any WooCommerce related plugins please consult with respective plugin’s author. After update theme, if you have any troubleshooting with Woocommerce, it might be a plugin or other conflict (custom code etc). We definitely recommend getting in touch with us with screenshots to get us to figure out what is causing the issues ASAP. We’ll be glad to get you sorted.

Troubleshooting (related topics in customers support)

Menus can’t update

Visual composer update

Demo Data Not Loading

After updation product pages are not working properly

If you’re still having trouble upgrading your theme after reading this post, let us help! G5Theme awesome support team can help you with any issue.

How to Change Speed Testimonials Shortcode (on GROVE)

G5Theme default value 5 seconds may be not enough to read, so in case you want it to be longer, you can change value speed testimonials shortcode.

1. Do follow to custom value:
– Go to this path: /your_website_directory/wp-content/plugins/grove-shortcode/testimonial, edit file testimonial.php then go to line 99 and 125 or line have class “owl-carousel“, view here:

and here:

– Change value as you want: 1000 is 1 second

2. Download testimonial.zip at https://support.g5plus.net/wp-content/uploads/2015/08/testimonial.zip then extract and replace file testimonial.php on this path: /your_website_directory/wp-content/plugins/grove-shortcode/testimonial => value default is 10000.

You can refer its document for more customization: http://owlgraphic.com/owlcarousel/#customizing
You only need add param as above document. All done.

How to change languages via po/mo file?

Very few developers develop their plugins and themes in a language different from English so you will have to translate the phrase in theme and plugins into many different languages by yourself, and I’ll explain to you how. There are two ways to do it.

– Directly within WordPress by using a localization plugin (such as Loco Translate plugin – that’s free and most of my customers used successfully). You can also consult our guide on How to Translate using LOCO Translate plugin
– On your PC/Mac, using Poedit. To change the value field of the theme via language file, you can do follow one of 2 methods below.

Method 1.

Edit .po/pot file(in directory languages) as the image below(root is my theme):

– Rename file corresponding with your Locale here: https://make.wordpress.org/polyglots/teams/
(In this article I will get an example: change en_US.po to it_IT.po). View image:

– Then download & install Gettext Translations Editor software(free) at https://poedit.net/wordpress
– Edit new file(it_IT.po) with software just installed.
– Change/add value as you want, then convert .po to mo file via http://po2mo.net/.
+Open http://po2mo.net/ choose .po file, click ‘Convert‘ button.

+ Then download MO file after convert.

The file downloaded has the name look like: abcdedg_it_IT.mo, change file name downloaded to “your_local.mo” file. Example: changed to it_IT.mo

Method 2.

Download and install software Gettext Translations Editor at https://poedit.net/wordpress then open/edit file .po/pot on the path as the image above(method 1).
After changed content/value, click Save:
– If exist po/mo files language as you want => it will override current.
– If not exist, do follow:

After all, you will get file name look like: it_IT.mo

Last step for both mothed:
Copy/upload .mo file up to languages directory(in my theme) on your server.

Note: to active your local language, you must go to Settings >> General menu, do follow:

Thanks
G5Theme