Contents

1. Removing search icon

2. Updating theme and plugins

3. Theme translation

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

5. Recommended PHP Settings

6. Adding new social icons

7. Plugins activation

8. Instagram feed removal

9. Recommended sizes for logo

10. Adding new font icons for content elements

11. Adding your own font icons / social icons

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

13. Adding your own icons

14. Updating Theme and Plugins

15. Wordpress 5.5: Important update information

16. WPML

17. Issues with tabs, tours, accordions

1. 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');

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

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


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


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


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


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

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

9. Recommended sizes for logo

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

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

11. 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';
}

12. "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"


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


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



15. 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/

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

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