Contents

1. Updating Theme and Plugins

2. Adding new font icons for content elements

3. Adding new social icons

4. Instagram feed removal

5. Updating theme and plugins

6. Wordpress 5.5: Important update information

7. Issues with tabs, tours, accordions

8. WPML

9. Updating Theme and Plugins (Theme version 3.4 and older)

10. Recommended PHP Settings

11. Theme translation

12. Adding your own icons

13. Increasing Pagespeed of your site

14. Adding your own font icons / social icons

15. Increasing Pagespeed

16. Removing search icon

17. Recommended sizes for logo

18. TheGem for Elementor released

19. "News" post type (ver. 4.x)

20. Plugins activation

1. Updating Theme and Plugins

Updating Theme:


1.
 In case new theme update is available, you will see the following notice in your WordPress admin area:


2. Updates also appear on the “Themes” page in your WordPress admin area:


and on the “Updates” page:


3. For the change-log just click the corresponding button and an overlay with updates history appear:


4. Before updating you need to read and confirm the following important notice:

Finally, just click on “Proceed with update” and it will start automatically.


Updating plugins:


Note: all of the plugins included and required / recommended in our themes are being regularly updated via our own plugin repository.  Please note: for ensuring the highest quality of working as well as full compatibility we are releasing an updates of the plugins only after checking it on possible compatibility issues with our themes.

For updating required and recommended plugins please go to your WordPress admin dashboard and select "Updates"


Then, select plugins you wish to update:

Finally, click on Update plugins". That’s all.



2. Adding new font icons for content elements

Step 1: Adding new icons

1. Find the file "scalia-socials.svg" in folder "fonts" (in Scalia theme) and import this file to https://icomoon.io/app/#/select 



2. Add to the end of this imported set new icons from icomoon, which you wish to have. After that, select all icons and click on "Generate Font"



3. Click on "Codes" and make "Reset codes" beginning from e601



4. Click on "Preferences". Make "Font Name" scalia-socials and click on "Font Download"




Step 2: Adding icon font in theme 

We would recommend to use scalia main child theme for these modifictaions (if you use main Scalia theme) 

  1. Install child (check in folder Child_Themes / scalia-default-child.zip)
  2. Per FTP copy to the child's folder the folder /fonts/ from the ZIP you have downloaded from icomoon
  3. In the beginning of the file style.css of the child theme add following:
@font-face {
font-family: 'scalia-user-icons';
src:url('fonts/scalia-user-icons.eot?-yiqymz');
src:url('fonts/scalia-user-icons.eot?#iefix-yiqymz') format('embedded-opentype'),
url('fonts/scalia-user-icons.woff?-yiqymz') format('woff'),
url('fonts/scalia-user-icons.ttf?-yiqymz') format('truetype'),
url('fonts/scalia-user-icons.svg?-yiqymz#scalia-user-icons') format('svg');
font-weight: normal;
font-style: normal;
}


That's all. If you don't use the child theme, so just replace the files in folder /fonts/ with the files you have downloaded from Icomoon. 

3. Adding new social icons

Install and activate „TheGem_child_user_icons“ child theme, included in theme’s main package.
For installation instruction please refer to chapter „Installation“

You can use any online service, allowing to create icon fonts, for example https://icomoon.io/app/#/select

1. Create your own icon package. For details on how to do this pls refer to icomoon’s documentation here https://icomoon.io/#docs

2. After you are done with preparing your icon package, click on „Generate Font“


Optionally you can reset the numeration of the icons in your package to make it serially numbered


3. IMPORTANT: In the settings of the icon package you need to definee the Font Name as „UserPack

4. After that, click on „Download“ to download the zip archive with your icon fonts „UserPack“. Unzip after downloading in a separate folder to get corresponding woff, svg, ttf, oet font files

5. Upload the unzipped woff, svg, ttf, oet files via FTP to the child theme’s folder „fonts/UserPack“ You will find this folder in the child theme „TheGem_child_user_icons“, which you have installed and activated in Step 1.

After you are done, you will get an additional icon pack „UserPack“ in the select box for selecting icon packs:

So here you can see the icon codes. 

Step 2: Adding your social icon.

In the functions.php of the child theme add this code to connect user pack on your site:

function thegem_child_enqueue_icons_userpack() {   
    wp_enqueue_style('icons-userpack');
}
add_action( 'wp_enqueue_scripts', 'thegem_child_enqueue_icons_userpack');

Adding icons:

add_action('thegem_print_socials', 'thegem_print_new_socials');
function thegem_print_new_socials() {
    ?>
    <a class="socials-item custom-social-icon-1" href="#" target="_blank" title="New icon 1"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <a class="socials-item custom-social-icon-2" href="#" target="_blank" title="New icon 2"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <a class="socials-item custom-social-icon-3" href="#" target="_blank" title="New icon 3"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <?php
}
add_action('thegem_footer_socials', 'thegem_print_new_footer_socials');
function thegem_print_new_footer_socials() {
    ?>
    <a class="socials-item custom-social-icon-1" href="#" target="_blank" title="New icon 1"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <a class="socials-item custom-social-icon-2" href="#" target="_blank" title="New icon 2"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <a class="socials-item custom-social-icon-3" href="#" target="_blank" title="New icon 3"><i class="socials-item-icon custom-social-icon-1 "></i></a>
    <?php
}

Set there your social URLs.

In the style.css of the child theme add:

.socials-item-icon.custom-social-icon-1:before {
    content: '\e600';
    font-family: 'UserPack';
}
.socials-item-icon.custom-social-icon-2:before {
    content: '\e601';
    font-family: 'UserPack';
}
.socials-item-icon.custom-social-icon-3:before {
    content: '\e602';
    font-family: 'UserPack';
} 

Here you need to set your icons codes. 

That's all


4. Instagram feed removal

As of June 29th, 2020, the Instagram platform will be deprecating its API.

TheGem's instagram gallery element will be impacted by this, as access depends on this system to connect.

Instagram gallery element will be removed from TheGem

As of June 29th, 2020, TheGem theme releases will exclude the instagram gallery element. For older versions, the instagram gallery element may be visible but no longer functional as of the deprecation date (June 29th, 2020).

We recommend you to remove the instagram gallery element from your website before June 29th, 2020.

Alternative: manually add images using another TheGem's gallery elements

If the Instagram feed is crucially important for your website, consider to use TheGem's galleries to add image galleries manually to your website. 

5. Updating theme and plugins

Updating theme:

Note: If you plan to modify the source code of the main parent theme (php, js, style.css) we strongly recommend to install child theme and make such modifications inside this child theme in order to avoid any possible problems & issues by installing updates of  the main parent theme in future. 

Updating plugins:

Note: all of the plugins included and required / recommended in our themes are being regularly updated via our own plugin repository.  Please note: for ensuring the highest quality of working as well as full compatibility we are releasing an updates of the plugins only after checking it on possible compatibility issues with our themes.

For updating required and recommended plugins please go to your WordPress admin dashboard and select "Updates"

Then, select plugins you wish to update:

Finally, click on Update plugins". That’s all.

6. Wordpress 5.5: Important update information

In order to avoid any issues after updating to WordPress 5.5 please update TheGem theme, TheGem Elements plugin, ZillaLikes plugin as well as Revolution Slider plugin to the latest versions. For updating instructions please check this article: Updating Theme and Plugins

If you have updated to WP 5.5, please DON‘T SAVE any projects in Slider Revolution until updating to versions 6.2.18. A certain deprecated jQuery function in WordPress 5.5 is causing some settings in Slider Revolution to be set to their default value upon opening the Slider Revolution editor. Don't save any projects if you updated to WordPress 5.5 but haven't updated Slider Revolution to version 6.2.18 yet. Please refer to the official Revolution Slider statement: https://www.themepunch.com/faq/wordpress-5-5-important-update-information/

7. Issues with tabs, tours, accordions

In case you have any issues in working with tabs, tours and accordions, just update our theme to the latest version (check for update instructions here  https://codexthemes.ticksy.com/article/8025/) or update the file vc_tta_global.php in:

/wp-content/themes/scalia/vc_templates/vc_tta_global.php 



8. WPML

If you need to make your website multilingual, WPML could be the best solution to do it. WPML is the set of plugins, allowing you to easily translate your website in other languages. Scalia was carefully tested and is fully compatible with WPML. In order to use WPML you need to purchase the license for this plugin here http://wpml.org/purchase/

On the WPML.org website you can find very detailed documentation about using this plugin, check this link http://wpml.org/documentation/getting-started-guide/. After purchasing WPML you will get free support from WPML team, you can use their support forum here http://wpml.org/forums/forum/english-support/.

Below you will find some specific aspects of using WPML with Scalia. 

FIRST STEPS / SETTING UP WMPL

  1. Install and activate following core WPML Plugins:
    • WPML Multilingual CMS
    • WPML String Translation
    • WPML Translation Management
  2. Go to "WPML->Languages" and make initial WPML setup. Check WPML documentation for general description here http://wpml.org/documentation/getting-started-guide/.
  3. For "Language URL format" we recommend to choose the first option "Different languages in directories". In order to get this properly work, you will need to adjust your .htaccess file in your WP website root-directory on FTP as follows:
# BEGIN WP
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WP

LANGUAGE SWITCHER

In Scalia you have a pre-defined location for language selector:


In order to enable language selector in the top menu, go to "WPML -> Languages", section "Language switcher options" and make following selection:

To display language selector at the bottom of the website choose following:

USING SCALIA-STYLED COUNTRY FLAGS

Scalia is provided with the set of country flags, styled in flat style suitable for Scalia design. You can find all flags in folder PSD, "Flags". You can use these flags to display them in languge selector. To do this:

  1. Go to "WMPL -> Languages", here look for "Site Languages" and click on "Edit languages". You will get this page


  1. Here you can upload Scalia flags using "Upload flag" option in column "Flag"
  2. As WPML resizes all flag images to its default size, you need to overwrite these automatic resize by copying your original PNG flags using FTP in folder "wp-content/uploads/flags" on your hosting

TRANSLATING PAGES & POSTS

Go to "Pages" -> "All Pages". You see columns for each active language, with a pencil icon (for ‘edit translation’) or a ‘+’ icon (for ‘add translation’) next to each page. Using these icons you can add a new language version of this page or edit the exiting one. The easiest way to start is to edit the original language page and here to check "duplicate" checkbox in "translate" box and then to click on "Duplicate". In this way you create a copy of your page in other language version with all the content from original language, so you can easily translate it.



You’ll probably be interested in the process of batch duplication of pages and posts. To use this feature, go to WPML->Translation Management, and from the Translation Dashboard, select the filter you want (Pages/Posts), and click ‘Display’. Select the pages or posts you want to translate or duplicate (you can select them all by clicking the checkbox besides the ‘Title’ header or footer):


Then, at the bottom of the page, choose languages for which you want to translate or duplicate, and ‘Submit Documents’:

In general, with WPML you can always choose between ‘translating’ or ‘duplicating’ content. If you do the former but want to import content from the original you can always use the buttons to ‘copy content from the original’ in their edit page; if you do the latter, you can always choose later ‘Translate independently’ so that you can save your edits. Try both procedures to see which one you find better for your workflow.

TRANSLATING QUICKFINDERS, PORTFOLIOS, TESTIMONIALS, TEAMS ETC.

Scalia comes with a rich set of custom post types such as portfolios, quickfinders, testimonials etc. and custom taxonomies. In order to get a similar interface & workflow for translation/duplication as for posts and pages (see description above), you need to go to WPML->Translation Management, and select the tab ‘Multilingual Content Setup’. At the bottom of the page you’ll see:

You need to select ‘translate’ for the custom post types you want to make translatable.

TRANSLATING HOMEPAGE

If you choose to use some specific static page or blog list to be shown on your homepage, you just need do translate this page /posts as it was described above.

If you prefer to use Home Constructor to build your homepage, be sure, that all of your content elements you would like to use on your translated homepage, are already translated. So, please, before using Home Constructor in another language version, translate your quickfinders, portfolios etc. which you use on your homepage. For process of translating pages, quickfinders etc. see description above.

NOTE: Home Constructor is language-independent. That means, that you can build different homepages in different content languages. Form example in English version you can use quickfinders, and in German language you can skip them.

To build your homepage in another language do the following:

  1. Go to "Appearance" - "Theme Options"
  2. Choose another language version in your WP Admin in the top menu
  3. Select "Home Constructor"

Here you will see, that your homepage content is empty and you can start configuring it for the chosen language version. Proceed in the same way, as you have done it before for your initial language version . Choose content elements, drag-n-drop them into homepage area and arrange it in the way you'll like it. (as noted above, you can build your homepage for another language version in other way, as for your initial language, because Home Constructor works separately with different language versions.)

For each content element choose content from selectboxes, which you would like to see on your homepage. Note, that in selectboxes you see only translated versions of your content for this language specifically. That means, that for example in German version of Home Constructor you see only German pages, portfolio sets, quickfinders etc., and no English pages, portfolios, quickfidners etc. Home Construtor filters automatically the needed language versions and shows it in selectboxes. That's why it is important, that you translate your content before building the localized language version with Home Constructor.

TRANSLATING MENUS

WPML can synchronize menus. This means that if some entries, for example some pages, posts or categories, are in the English menu, WPML can generate and keep in synch menus for other languages pointing to the translated versions of these pages, posts or categories.

NOTE: before synchronising menus be sure you have translated all of the pages you would like to appear in the new language version. Only translated pages will be synchronised!

Go to Appearance->Menus and look at "Synchronize menu" link on the top.

By clicking on it you will get following screen:

By clicking on the Sync button at the bottom of the page (with its informative legends by its side) you’ll be presented with a set of menu items that can be translated; select them all, and go ahead to apply the changes. After the synching operation you can individually edit the menus in each language from WordPress "Appearance->Menus".

TRANSLATING THEME SPECIFIC STRINGS

After translating your website content you would be probably interested in translating some theme specific phrases or words like "Next" button in testimonial or "Follow Us" title in "Follow & Contact Us" area. To do this, proceed as follows:

  1. Go to "WPML -> Theme and plugins localization"
  2. In the first section "Select how to localize the theme" choose "Translate by WPML." and then "Save"
  3. In section "Select how to get translations for WordPress core" select "I will download translations for WordPress and save .mo files in wp-includes/languages", then "Save"

      4. Scroll down. At the bottom of section "Strings in the theme" you will find a checkbox "Load translations if found in the .mo files. (it will not override existing translations)" - activate and and hit the button "Scan the theme for strings"


         5. Now go to "WPML -> String Translation". Here you will find all of the theme specific strings you can now translate.

9. Updating Theme and Plugins (Theme version 3.4 and older)

Updating theme:

Note: If you plan to modify the source code of the main parent theme (php, js, style.css) we strongly recommend to install child theme and make such modifications inside this child theme in order to avoid any possible problems & issues by installing updates of  the main parent theme in future. 

Updating plugins:

Note: all of the plugins included and required / recommended in our themes are being regularly updated via our own plugin repository.  Please note: for ensuring the highest quality of working as well as full compatibility we are releasing an updates of the plugins only after checking it on possible compatibility issues with our themes.

For updating required and recommended plugins please go to your WordPress admin dashboard and select "Updates"


Then, select plugins you wish to update:

Finally, click on Update plugins". That’s all.


10. Recommended PHP Settings

In order to avoid any possible import issues because of your server and php its settings, we would recommend setting up following PHP values in your server’s php.ini:

You can verify your PHP configuration limits by installing a simple plugin "Host PHP Info":

https://wordpress.org/plugins/host-php-info/

or by creating a phpinfo page. Follow the next steps to create a phpinfo page using your FTP File Manager:

  1. Navigate to the directory with you are working. This is important because each folder can actually be set to have different php settings. 
  2. Create a plain text file, name it for example phpinfo.php, add following lines and save: 
    <?php  
        phpinfo();
    
  3. Visit this page in your browser. If you created this file in the root of your public_html folder, then visit http://example.com/phpinfo.php, replacing example.com with your own domain name.
  4. To find the specific value of a setting, search the page for what you're looking for. In this case, simply use browser's search feature CTRL-F (Windows) or COMMAND-F (Mac).

If you don’t have an access to the php configurtation on your server, you can try to set this values in .htaccess file:

php_value max_input_vars 4000 

php_value max_execution_time 180

php_value memory_limit 256M

php_upload_max_filesize 16M

Pls be careful, because some of hosting companies don’t allow to change php settings directly using .htaccess. In case you have some problems after modifying your .htaccess file, log in to your FTP account and remove these modifiactions from .htaccess

In any case you can contact your hoster and ask him to set required settings.


11. Theme translation

All of our themes are fully compatible and optimized for using a powerful WPML plugin for any multilanguage websites and translation tasks http://www.wpml.org . We strongly recommend to use this plugin. 

However, you can translate the theme's PO files using poedit https://poedit.net/

Translation of the theme: 

  1. Go to the theme folder and click on folder "languages" . Here find the file scalia.po. Download it and open this file using poedit application, edit your translations and save it as a scalia-XX_YY .mo / .po. Instead of XX_YY use your language code. You can find the list of language codes here https://make.wordpress.org/polyglots/teams/ . As an example, the language code for English is en_EN
  2. Using your FTP, create a folder "themes" inside the folder wp-content / languages and upload the PO file you have translated.  

Translation of the theme's "elements" plugin:

  1. Go to the theme's plugin folder (wp-content / plugins / scalia_elements) and select folder "languages". Here find the file scalia.po. Download it and open this file using poedit application, edit your translations and save it as a scalia-XX_YY .mo / .po. Instead of XX_YY use your language code. You can find the list of language codes here https://make.wordpress.org/polyglots/teams/ . As an example, the language code for English is en_EN 
  2. Using your FTP, create a folder "languages" inside the folder wp-content / languagesand upload the PO file you have translated.  

Tell Wordpress what language to use:

You need to make sure your wp-config.php file matches your language files. For example, if you’re using a French translation, you’ll need to add the scalia-fr_FR.po and scalia-fr_FR.mo files to your theme and plugins folder (see above), then set your language in wp-config.php, like this:

define ('WPLANG', 'fr_FR');

By the way, your wp-config.php file is located in the main directory where all your core WordPress files are located.

Save your wp-config.php file, upload it to your WordPress installation, and you are ready to go.


12. Adding your own icons

TheGem comes with three powerful icon packs (material design icons, font awesome and elegant icons), resulting in more than 2.500 icons in total. However, you have always an option to add additional icon pack – your own. To do this, you need to use the child theme „TheGem_child_user_icons“, included in theme. Proceed as follows:

Install and activate „TheGem_child_user_icons“ child theme, included in theme’s main package.
For installation instruction please refer to chapter „Installation“

You can use any online service, allowing to create icon fonts, for example https://icomoon.io/app/#/select

1. Create your own icon package. For details on how to do this pls refer to icomoon’s documentation here https://icomoon.io/#docs

2. After you are done with preparing your icon package, click on „Generate Font“

Optionally you can reset the numeration of the icons in your package to make it serially numbered

3. IMPORTANT: In the settings of the icon package you need to definee the Font Name as „UserPack

4. After that, click on „Download“ to download the zip archive with your icon fonts „UserPack“. Unzip after downloading in a separate folder to get corresponding woff, svg, ttf, oet font files

5. Upload the unzipped woff, svg, ttf, oet files via FTP to the child theme’s folder „fonts/UserPack“ You will find this folder in the child theme „TheGem_child_user_icons“, which you have installed and activated in Step 1.

After you are done, you will get an additional icon pack „UserPack“ in the select box for selecting icon packs:


13. Increasing Pagespeed of your site

Here is a short list of recommendations that will help to increase pagespeed values of your website:

  1. check your server's response times. In case your server answers slowly, contact your server's provider to resolve this issue
  2. check any third party plugins you are using in your Wordpress installation.  Third party plugins and its scripts can cause lower loading speed and decrease ratings
  3. optimize images you are using on your page. Using large not optimized images affects the loading speed of your pages, resulting in lower pagespeed ratings
  4. enable html minifiers and website caching. For example we can recommend to use following plugins to achive this:

14. Adding your own font icons / social icons

Step 1: Adding your own font icons

1. Find the file "scalia-socials.svg" in folder "fonts" (in Scalia theme) and import this file to https://icomoon.io/app/#/select 


2. Add to the end of this imported set new icons from icomoon, which you wish to have. After that, select all icons and click on "Generate Font"


3. Click on "Codes" and make "Reset codes" beginning from e601


4. Click on "Preferences". Make "Font Name" scalia-socials and click on "Font Download"



Step 2: Updating font file

1. Upload the folder "Fonts" from the zip-file you have downloaded from icomoon in your child theme folder per FTP.

2. Open "style.css" of the child theme and add:

@font-face {
font-family: 'scalia-socials';
src:url('fonts/scalia-socials.eot?-yiqymz');
src:url('fonts/scalia-socials.eot?#iefix-yiqymz') format('embedded-opentype'),
url('fonts/scalia-socials.woff?-yiqymz') format('woff'),
url('fonts/scalia-socials.ttf?-yiqymz') format('truetype'),
url('fonts/scalia-socials.svg?-yiqymz#scalia-socials') format('svg');
font-weight: normal;
font-style: normal;
}

If you don't want to use child theme, just replace the existing "scalia-socials" fonts (svg, eot, woff, ttf) in folder "fonts" in Scalia theme with the downloaded ones (it is recommended to make backup of the existing font files before replacing).


Adding social icons in Top Area

1. In functions.php add;

add_action('scalia_print_socials', 'my_scalia_print_socials');
function my_scalia_print_socials() {
?>
<div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
<div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
<div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
<?php
}

in href pls place the URLs you wish to have

2. Enter this custom css in Theme Options - General:

.socials-item.custom-social-icon-1 a:after {
content: '\e609';
}
.socials-item.custom-social-icon-2 a:after {
content: '\e60a';
}
.socials-item.custom-social-icon-3 a:after {
content: '\e603';
}


Adding social icons in footer

1. In functions.php add

add_action('scalia_footer_socials', 'my_scalia_footer_socials');
function my_scalia_footer_socials() {
?>
<div class="socials-item custom-social-icon-1"><a href="http://link-to-social-1.com" title="Custom social 1">Custom social 1</a></div>
<div class="socials-item custom-social-icon-2"><a href="http://link-to-social-2.com" title="Custom social 2">Custom social 2</a></div>
<div class="socials-item custom-social-icon-3"><a href="http://link-to-social-3.com" title="Custom social 3">Custom social 3</a></div>
<?php
}

in href pls place the URLs you wish to have

2. Type in this custom css in Theme Options - General:

.footer-socials-item.custom-social-icon-1 a:after {
content: '\e609';
}
.footer-socials-item.custom-social-icon-2 a:after {
content: '\e60a';
}
.footer-socials-item.custom-social-icon-3 a:after {
content: '\e603';
}

15. Increasing Pagespeed

Probably you are already aware of this topic and have checked this kind of useful articles
on how to optimize your website for better loading speed and Google's pagespeed results:

https://www.keycdn.com/blog/google-pagespeed-insights-wordpress
https://www.wpbeginner.com/wordpress-performance-speed/

To keep this short, here is the list of criterias which should be met:

1. Usage of web-optimized images & media
2. Smart image loading
3. Minimization of client-server requests:
    - minimization of number of scripts used on the page
    - minimization of number of styles used on the page
    - minimization of number of media & other resources used on the page
4. Proper positioning of page's styles and scripts
5. Usage of html minifiers
6. Usage of webpage caching
7. Fast server response time
8. Usage of CDNs
In addition, specifically for WordPress, one more point is important:
9. Use as less third-party WP plugins as possible 


Brief explanation of this criterias:
  

Usage of images & media, optimized for web (in your todo)

Optimize images you are using on your page. Using large not optimized images affects the
loading speed of your pages, resulting in lower pagespeed ratings. You can use such online tools like:

https://www.jpegmini.com/

https://tinypng.com/

to get the most of image  compression. Or you can use traditional tools like "Save for web" in Photoshop. The main aim is to reduce the filesize of your images for better pagespeed scores. Another useful
recommendation is to use modern image formats for web. For example WebP. Recently,
Google updated the logic of their pagespeed tool and now PageSpeed Insights strongly
recommends to use WebP format for images, increasing the pagespeed score in case it is
really used. For more information on image optimization please check this useful article

Smart image loading (already done, can be enabled in Theme Options)

TheGem includes one very useful feature, allowing you to enable the image loading on
your webpages in a smart way. In common terms it is a lazy loading of media resources
upon arrival of the browser/device viewport. In this way, by loading your webpage, all
images below the fold (which are not immediately displayed for user) are physically not
loaded. And only by scrolling down the page, as soon as this images appear in above the
fold area they are being loaded and displayed. In order to avoid any unpleasent loading
interruptions, there is a special "buffer" zone below the fold, which enables the image
loading some pixels before this images appear in above the fold area.  
You can enable and set this feature in TheGem here:


By default, this feature is disabled and can be enabled with this setting:


You can control the buffering area with this setting:


You can enter an any value in pixels here; we recommend to use 400-600 pixels.

In case your website uses any caching or minification plugins or technologies (see above;
we strongly recommend to do this) you need to activate this setting:


in order to get this feature to properly work.

Minimization of client-server requests (already done)

While using TheGem you should not care about this point, because all scripts and styles in
TheGem are already optimized to be kept at the lowest needed level. However, while
building your own new webpages, keep in mind, that the higher number of used media
content (for example images) results in higher number of server requests. 

Proper positioning of page's styles and scripts (already done)

Again, you should not care much about this point, because all scripts & styles in TheGem
are already positioned properly to get the highest loading pagespeed scores. 

Usage of html minifiers (in your todo)

It is strongly recommended to minify the html code of your web-pages to achieve better
pagespeed result. For code minifications you can use one of the following plugins:

https://wordpress.org/plugins/fast-velocity-minify/
https://wordpress.org/plugins/wp-super-minify/
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/
https://wordpress.org/plugins/wp-fastest-cache/


Usage of webpage caching (in your todo)

For faster delivering of static content Google recommends to use webpage caching. In this
way all your pages are getting cached and saved on your server, so by requesting this
pages the delivery occurs in much faster way. For webpage caching you can use one of
the following plugins:

https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/

https://wordpress.org/plugins/wp-fastest-cache/

Server response times (in your todo)

This is how quick your server with your website reacts to client's requests. In case the
response time is low, you need to contact your server's provider to resolve this issue or,
alternatively, use another server & hosting provider 

Usage of CDNs (optional, recommended)

CDNs are an excellent way to speed up your webpage loading by delivering it to the user
from the nearest available server, in this way reducing the number of nodes needed to
deliver your content. If your website audience come from all around the world or from
different countries, we recommend to use CDN services. Another useful feature here is an
option to use smart image compression (available via CloudFlare, https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/). If you choose to use
such tools like "Polish" in CloudFlare, you don't even need to care about image
optimization by yourself - all this will be automatically done by this service and you will get
excellent results

Use as less third-party WP plugins as possible (optional, recommended)

The last thing we would strongly recommend is to keep your WordPress installation as
deflated as possible. Try to avoid any third-party plugins, which are not really needed for
your project / websites. Firstly, it could be a great security leak (as the experience of the
previous decade shows) and secondly, it brings additional code, scripts and styles which
can slow down your website.

Other tips

a) We would recommend to use „Load more“ pagination style for blogs, portfolios, galleries
etc. This type of pagination is preferable by Pagespeed Insights, because in case of
classic pagination all items are being loaded at once 

b) You can use Chrome’s developer tools to check the size of your webpages. Check
https://developers.google.com/web/tools/chrome-devtools/#network As stated above, try to
keep your pages deflated in size and number of resources being requested 

16. Removing search icon

For removing search icon you can use following css:

li.menu-item.menu-item-search {
    display: none !important;
}

 

Or in the functions.php of the child theme add following code:

function thegem_child_init_remove_icon() {
    remove_filter('wp_nav_menu_items', 'thegem_menu_item_search', 10);
}
add_action('init', 'thegem_child_init_remove_icon');

17. Recommended sizes for logo

Here is a list of logo sizes we are using on our demo website:

18. TheGem for Elementor released


Important
: TheGem for Elementor is included as a separate theme in the main theme package. To get TheGem for Elementor, please proceed as follows:

  1. login to your themeforest account
  2. go to https://themeforest.net/downloads
  3. download the full theme package 



  4. unzip the downloaded zip file
  5. you will find "TheGem_Elementor.zip" file in the unzipped folder. Use this file to install in your WordPress admin


Important
: TheGem for Elementor is a reworked version of TheGem theme, which is lightweight and optimized for Elementor. TheGem for Elementor is NOT compatible with TheGem for WPBakery.  In case you will install TheGem for Elementor on the same installation where you have TheGem for WPBakery, your content created with WPBakery will not be supported. Please use TheGem for Elementor on a new fresh installation.


Note
: TheGem Blocks plugin is not yet included in TheGem for Elementor, but will be released very soon. 


Documentation
: Here you can find detailed documentation about TheGem for Elementor https://codex-themes.com/thegem/documentation/elementor/


Frequently Asked Questions


1. What do you recommend to use? WPBakery or Elementor? And why?

We would recommend to use Elementor:

If you prefer fast working frontend page builder with plenty of cool options, we would go with Elementor.


2. Could you compare WPBakery and Elementor? Does Elementor has the same features like WPBakery?

Editors
Elementor has the same features as WPBakery and even more (check here https://codex-themes.com/thegem/documentation/elementor/#useful-features )
Both builders are good, however Elementor is an excellent choice for frontend content editing and WPBakery could be a good choice for those, who prefer backend editing. Though WPBakery comes with frontend editor as well, in performance and responsive aspects Elementor is a definite winner offering faster editing and more customization options. 

TheGem Elements
Both Elementor and WPBakery are enriched with the same set of unique TheGem content elements. Visit our demo website codex-themes.com/thegem to check the wide selection of elements coming with TheGem theme.
The Elementor's version of TheGem elements plugin is optimized for Elementor's approach. It means mix of easiness and flexibility. On one hand you have "skins" - pre-made designs and presets for content elements, which you can insert with one click and that's it. On the other hand, all elements have been reworked and extended with much more customization options. You can customize any skin & preset in any imaginable way. And you have definitely better control over responsiveness.


3. Will there be updates and features for WPBakery in future?

Hi, yes, sure. As TheGem theme evolves, both versions (TheGem for WPBakery and TheGem for Elementor) are being updated consequently with the same features.  Both WPBakery team and Elementor team continue to work on their builders. Elementor's team makes tremendous progress in extending their editor.


4. Everything on my page is written with WPBakery so on. Is it possible to switch to Elementor seamlessly?

WPBakery and Elementor are not compatible with each other. WPBakery uses the shortcode principle, Elementor not. So there are no automation tools to migrate. The only way is to make it manually. The question is how much customization did you make? In case you have used our prebuilt demos and only replaced images and text, so you can recreate it in Elementor very fast. If you have made deep design customization, it could take bit more time, but the cool thing in Elementor is its easiness and speed, so it should take less time to migrate your pages in Elementor as you have spent on building it with WPBakery.


5. Do I need to buy Elementor Pro?

No, you don’t. TheGem requires only the free version of Elementor. TheGem comes with TheGem Elements plugins, which enriches the free version of Elementor with many cool features and elements. So you don’t really need to purchase a pro version of Elementor. Read more about TheGem Elements plugin here https://codex-themes.com/thegem/documentation/elementor/#thegem-elements-plugin.

If you still want to use Elementor Pro, you can purchase it separately. TheGem theme is 100% compatible with Elementor Pro. TheGem offers some features that do not exist in Elementor Pro and the opposite is also true meaning that Elementor Pro may have some features that are not available in TheGem.



19. "News" post type (ver. 4.x)

Beginning from version 4.0 of TheGem theme the obsolete "News" post type has been deactivated. We recommend to use blogs and blog posts instead of news. In case you still wish to use the old "News" post type (or in case you have used it previously and would like to keep it further) you can activate it as follows:

Go to "Theme options" in "TheGem" menu in your WordPress admin, open "General -> Advanced", activate the "Activate News post type" checkbox and click on "Save Changes"


20. Plugins activation

You don't need to activate any of premium plugins included in our themes!  All of this plugins are being updated via our own plugin repository, check this article  

https://codexthemes.ticksy.com/article/8023/


Please ignore any of "plugin activation" messages in your Wordpress admin.