Translating the theme

Updated on August 19, 2020

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.

 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.

Raven template file: includes/languages/raven.pot

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.

Changing the breadcrumb home using Loco Translate

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

Did this answer your question?