How to create a multilingual website

A Multilingual website is a website that provides content in more than one language. Lots of international company websites provide their content in different languages for their international audience. It is possible to set up a multilingual website with a simple free plugin called Polylang.

There are three main steps to set up a multilingual website. The first one is installing the Polylang plugin, second configuring the Polylang plugin and third is translating your current content into the target language.

Note: The Jupiter X theme is also compatible with WPML plugin. So you can use either WPML or Polylang to create multilingual website.

Installing the Polylang plugin is the same process as any 3rd-party plugin that is described in the article.

Creating Languages

1. From the WordPress left menu, go to Languages.

2. Choose a language in the select dropdown list.

Note: Polylang will prefill all fields.

3. Click on the Add New Language button.

Note: You can redo the operation and add as many languages as you want.

Translating the Content

After creating a language, you will need to add the content in the target language. In other words, you’ll need to translate each of the pages and posts that you want to display in other languages.

To translate your pages and posts:

1. Edit the page or post.

2. From the Languages section, select your language.

3. Write your content in the target language.

4. Publish or update the page or post.

Note: You should also translate the theme to your other languages. You can find a guide for that matter at the bottom of this article. Please note that .po/.mo files should be created manually for each language.

String Translations

Polylang plugin allows you to translate user-defined strings such as the site title, tagline, or widget titles.

1. From the WordPress left menu, go to Languages > Strings translations.

2. Translate the source string from the input field in the Translations column.

3. Click on the Save Changes button.

Note: The Jupiter X theme is compatible with RTL sites. It has automatic RTL compiler so you can use Jupiter X easily with your RTL site.

By default, Customizer settings are applied to all languages. If you want to change settings for some language, go to Appearance > Customize, select the language in the top panel, and configure the options in Customizer for that language.

Tip: Use Growmatik to show different content to your visitors based on different locations.

---

Troubleshoot

Translated strings are not visible on front-end

Some strings are translated in PoEdit, but they are not loading.

When translating the Jupiter X theme to your language, you may encounter some issues like words can’t be translated or the translation is not working after the theme update.

Be sure that they are not Fuzzy. A Fuzzy string means that it needs to be checked. The translator was probably not sure of it’s translation, so it marked the word(s) as Fuzzy to let others confirm that the translation is correct before using it or the original text was changed in the theme update.

To fix it, you need uncheck Fuzzy selection. On PoEdit for Mac, disable Needs Workoption:

On Windows/Linux, click this Fuzzy icon:

Click on it for each string that is marked as Fuzzy a

New strings are not visible in your translation file

How to translate new strings after theme update?

After theme update new strings may be added to default jupiterx.pot file, but you can’t find them in your translation .po file.

To fix it, you need to synchronize your file with the default one. To update your .po file, navigate to Catalog, choose Update from POT file, and then choose the jupiterx.pot file from which you will get the updated contents. After that, translate the project as you normally do and save all changes.

How to add language switcher in Polylang plugin

You can include the Polylang language switcher in your menu.

To add the language switcher:

1. From the WordPress left menu, go to Appearance > Menus.

2. Click on Language Switcher, and then click on the Add to Menu button.

3. Click on the Save Menu button.

Note: If you don’t see Language Switcher item, open Screen Options at the top and tick the “Language Switcher” box.

Translating the theme

How to translate the theme

Since Jupiter X does not provide files in languages other than English, many users look for ways to translate their theme words into their own language. There are a lot of ways to translate the theme but this article will explain how to translate with the Poedit software and Loco Translate plugin.

Changing the Default Language

To set the default language of WordPress:

1. From the WordPress left menu, go to Settings > General.

2. Change the Site Language field to your target language.

3. Click on Save Changes.

Using Poedit Software

Contrary to other translation methods using plugins, this method requires the Poedit software, a handy computer software that is used for the translation of language files.

Finding and Configuring the Translation File

To find the translation file of your website:

1. Install a child theme.

2. Go to your-website-index/wp-content/themes/jupiterx/lib and copy and paste the languages folder into the your-website-index/wp-content/themes/jupiterx-child folder. So your new language file will be your-website-index/wp-content/themes/jupiterx-child/languages.

3. Add the following code in functions.php file in the child theme: (you can skip this part if you are using an updated version of Jupiter X)

function jupiterx_child_theme_translation() {    load_child_theme_textdomain( 'jupiterx', get_stylesheet_directory() . '/languages' );}add_action( 'after_setup_theme', 'jupiterx_child_theme_translation' );

Translating the Theme

1. Open the Poedit software.

2. Open up the PO file that you copied into your child theme under the languages folder by going to the Files > Open menu. Alternatively, you can use the Control + O shortcut keys for Windows and Command + O for Mac.

Note: You will open jupiterx.pot file (the default Jupiter one) and save it to your language prefix, and translate.

3. Go to Files > Save As to name it according to your target language and click on Save.

For example, in case you want to create a translation file for Spanish (Argentina), name your file as es_AR . The language file extension (.po) will be added automatically.

Note: To find the language code list for your translation file, you can check this page. Check WP Locale table to find your language prefix.

4. Select the line that you want to translate. Alternatively, find the text by going to Edit > Find or use the Control + F shortcut keys for Windows and Command + F for Mac.

5. Write the translated text below the field.

6.  Go to Files > Save.

Uploading the Translation Files

To move your translated files into your website language folder:

1. Access your website index via the (S)FTP software by entering your (S)FTP login credentials. If your website is on a localhost, skip this step.

2. Go to your-website-index/wp-content/themes/jupiterx-child/languages folder and paste your translated files that have the .PO and .MO extensions. Click Yes to override the existing language files if necessary.

Note: You may notice after theme update some translation is not working on frontend, in this case you need update your .po file as described in this article. Also if after theme update you see some new non-translated strings on frontend, and they are not visible in your .po file, you need synchronize it with the new jupiterx.pot as described here.

Using Loco Translate Plugin

Now we’ll explain another method of the translation process using the Loco Translate plugin.

This plugin is free and an excellent plugin for translation management.

Installing the Loco Translate Plugin

To install the plugin:

1. From the WordPress left menu, go to Plugins > Add New.

2. Search for Loco Translate and click Install Now.

3. Click on Activate when the installation is done.

Translating the theme strings

1. From the WordPress left menu, click on Loco Translate > Themes.

2. From the Translate Themes page, click on JupiterX.

3. From the Themes/JupiterX page click on New Language.

4. In the new language configuration section, select your language from the Choose a Language field, and then click on Start Translating.

Note: To keep the translation files safe after a theme update, select Custom or System from the Choose a Location option. If you are using a child theme, only the Custom or System option should be chosen.

5. In the translation editor page, search for a string you want to translate and type its translation in your language under the German translation section. Do the same for other terms and then click on Save.

6. From the WordPress left menu, go to Settings > General page and select your language from the Site Language field.

7. Click on Save Changes and check the result.

Note: If you noticed some translations are not working as expected after theme update, click on the Sync button in the translation edit screen. This option will sync the old translations with new translations.

Translating Raven

Some of the texts are also included in the Raven plugin. For example, there are two Shopping Cart words: one in the Jupiter X theme and the other is inside Raven. When you use a custom header with Shopping Cart element inside it, you would need to translate it in Raven, because the text domain in use is different than Jupiter X. This applies to all the elements that are available in the Jupiter X and Raven as well. So, for translating Breadcrumbs, Menu navigations, Shopping Cart and etc if the translation didn’t work on Jupiter X theme, you may need to check the source of those words and if you were using Raven elements to show them, you would need to translate Raven plugin to translate them.

Translating the Raven plugin is also like the Jupiter X theme. The only difference is that it’s a plugin. So, just like Jupiter X theme, install LocoTranslate, and navigate to Loco Translate -> Plugins from the side dashboard and then chose Raven.

In case it shows that “This bundle isn’t fully configured, so we don’t know what the following files are for.” it means that you need to configure the Raven bundle first. So, click on the setup link or Tab.

Now click on Advanced Configuration.

And fill the Template File field with “includes/languages/raven.pot”. Keep the other fields by default values.

Now Click on Save config button at the end of the page and navigate back to Loco Translate -> Plugins -> Raven.

You can freely start translating any Raven string by clicking on New language or chose from the existing languages. As an example, we will try to change the “Home” in the breadcrumbs. One of the methods to change the words that are not easily changeable is to use the Loco Translate plugin. The method is like translating to the same language. So, we have an English website here and we translate the word “Home” to another word in English.

After clicking on New Language, we chose the English or any other language you want to translate to. Then will change the translation file location to keep it safe in the plugin updates.

Then we will look for word “Home” and change it to whatever we want. Then save the change and wait for it to complete compiling the .po and .mo files.

After that, we can see the change in our front end.

Tip: Use Growmatik to show different content to your visitors based on different locations.