How to translate themes using Polylang?
In this guide, we will explain how to translate themes using Polylang plugin.
- Download and install Polylang plugin
- Adding languages
- Translate posts/pages
- Translate built-in sections of the theme
- Translate Menus
- Translate Widgets
- Translate non-dynamic strings
- The Child Theme case
- Show/hide section based on the language, in Hestia Pro
- Translating the logos in Hestia Pro
- ๐ฅ Video - How to Translate the Front Page of Hestia?
- Translating the logos in Neve
1. Download and install Polylang plugin
2. Adding languages
Now that the plugin is installed, let's configure the desired languages.
Dashboard > Languages > Languages, Add new.
After adding all of them, make sure that there is at least one post created in each language -- if you don't know how to add a new post in a certain language check step 3.
From this page, a default language can be set for all posts that were on the site before installing Polylang plugin.
3. Translate posts/pages
Posts can be translated in Dashboard->Posts. Just localize the desired post and click the plus sign corresponding to the desired language next to the post name.
This way, a new post was created with the same attributes, so you just need to add the content here.
The post language can be also set while editing it. Also, the correspondent of the post in other languages will be visible in the sidebar while editing the post.
The same steps can be followed for translating pages.
4. Translate theme built-in sections/front page
๐ Note: The steps in this section apply to the following ThemeIsle themes: Hestia Pro, Zelle Pro, and ShopIsle Pro. The same approach should work for translating the Customizer strings of any theme.
The following themes, Hestia Pro, Zelle Pro, and ShopIsle Pro, have front page sections that can be edited only from the customizer( Dashboard >Appearance >Customize ). Therefore, you can't create a new page as you would do for regular pages.
All those strings can be translated in Dashboard >Languages >Strings translations.
๐ Note: If a particular string doesn't appear there, you can try modifying it and save changes within the customizer.
The image set in the customizer can also be translated here by setting a different image URL for a different language.
Such an image URL can be found in Dashboard >Media Library.
The same approach can be used to translate a contact form. Just create a new one for a different language and translate the shortcode.
In case the front page of the theme works with the Static Page option, make sure to choose a page that exists in all languages as the front page.
Hestia Pro works like that.
๐กExample - translating Hestia's Big Title Section
- 1
- Navigate to Dashboard > Languages > Strings Translations.
- 2
- Use the search bar to look for the title and description.
- 3
- Once you have found them, insert the corresponding translation into the field and click Save Changes.
- 4
- Go to the front page and check the changes.
- 5
- After changing the URL of the image, you can also have a distinct image depending on the language.
5. Translate menus
Menus can be translated in Dashboard->Appearance->Menus.
You can create a different menu for another language or use the same on all languages. If the theme you are using is compatible with Polylang plugin, each menu location will appear at least twice, depending on the number of languages that you have configured on your site.
Adding language switcher to the menu
In order to add a language switcher to the menu, you have to enable it from the screen options, add it to the menu and configure how it should work(as a drop-down, displaying language name or just flags).
6. Translate widgets
- 1
-
To translate the widgets using the Polylang plugin, navigate to Appearance > Widgets.
- 2
-
Expand one of the available locations (e.g. Sidebar).
- 3
-
Click on an existing widget/add a new one, and select the desired display language.
7. Translate non-dynamic strings
A non-dynamic string is one that can't be edited with the theme settings.
For more information, please check this guide.
8. The Child Theme case
If you are using a child theme, like Orfeo Pro which is a child theme of Hestia Pro, an additional step might be required.
Copy the wpml-config.xml file from the parent theme folder(in this case Hestia Pro) into the child theme folder(in this case Orfeo Pro).
At the beginning of the file, you will see a line similar to the following one
<key name='theme_mods_hestia-pro'>
Change the theme name, with the child theme name. This one can be found in the style.css file of the child theme. Use the words next to the Theme Name entry, with lowercase and dash between the words.
<key name='theme_mods_orfeo-pro'>
That's it! All of the steps presented in this guide should now work for the child theme as well.
9. Show/hide section based on the language, in Hestia Pro
In Hestia Pro, the front page sections can be shown or hidden from the option available in the Customizer, example below.
It is possible to translate this option, by creating a child theme. You can download it from here, and install it as a new theme.
In case you are already using one, please add this file to the child theme folder.
After that, you can translate the value of the show/hide option, as follows.
- 1 - means true
- 0 - means false
It depends on how did you set the control, basically, if the section is enabled on the default language, you can add 1 in the translation to hide it on the other languages.
10. Translating the logos in Hestia Pro
In Hestia Pro, the logo can be translated in Strings translations, by using the post id given by WordPress to the image, which is a number.
How to find out which is the number you are looking for? Navigate to Media Library, click on the logo, then hover on an action button to see the post ID in the bottom left corner of the screen.
In the above case, 64 is the image you are looking for in Strings translations or the image that should be displayed in a different language.
That's it!
11. Translating the logos in Neve
Translating the logo in Neve requires configuring two languages and two logos uploaded to the Media Library.
Navigate to Dashboard > Translations > Strings translations. Search for the Neve logo, and you will see a JSON format with numbers and a true / false parameter,
๐ Note: For more details about translating Neve's logo, check the dedicated documentation.