How to translate a WordPress theme directly in your browser

February 16, 2017 - Categories: WordPress tutorials

Written by: MagicPress

If your WordPress site is in a language other than English, it makes sense for the theme of your site to also be translated. A lot of WordPress themes may have already been translated in your language. However, if a translation is not available for the theme you use, you can always do it yourself.

In this example we will be translating a WordPress theme using the popular translation plugin Loco Translate. This allows us to translate WordPress plugins and themes within the browser.

A couple of points before we begin:

  • This guide results in a translation of the theme strings ONLY. This is not about the content of your posts or pages.
  • Perhaps some of your site content is generated through a plugin. Although the translation process is the same, a different translation for the strings generated by the plugin is required.

1) Installation and activation of Loco Translate

Let’s begin by installing the required plugin. Loco Translate can be downloaded at the WordPress plugin repository and uploaded to the plugins directory in your WordPress site, or added directly through the Dashboard at Plugins > Add New. After you have installed an activated the plugin, the Loco Translate menu item will appear in the Dashboard menu.

2) Using Loco Translate

Clicking Loco Translate in the Dashboard menu will take you to the overview of the plugin. The active theme, as well as running plugins available for translation, will be listed.

You may view all themes and plugins available for translation by clicking the Themes or Plugins submenu under Loco Translate in the Dashboard menu. WordPress will display the core files available for translation. The plugin options can be configured by clicking Settings.

3) Adding a new language to a theme

In this example we will be translating the Technico theme. In order to begin, click Loco Translate > Themes in the Dashboard to view all available themes, then click Technico.

An overview of the theme translations will be displayed. As we can see, no translations are available for this theme at the moment. Click New language to add a translation for the theme.

Note: Some themes may require additional configuration in the Setup and Advanced tabs, however in most translation-ready themes this won’t be necessary.

Select the language to which you want to translate the theme from the drop down menu:

By default, WordPress downloads and saves translation files in the /wp-content/languages directory. You may select a different save location, keeping in mind the issues that may arise. For instance, if you choose to save the translation in the Author location (inside the theme directory), the translation file may be lost when the theme is updated. Likewise, if you select a custom save location, you may not have the required permissions for the file to be saved.

It’s good practice to stick to the default settings, so in this case, let’s select the System location and click Start translating to begin.

Note: Your WordPress configuration must allow for files to be modified for the translation file to be created.

4) Theme translation

This is the Editor tab of the Loco Translate plugin. It displays a list of all text strings of the theme available for translation. These strings either appear in the theme templates or in the Dashboard and Customizer.

Start the translation process by selecting a string from the list, then enter its translation in the respective field at the bottom of the page. The Source text is displayed above for reference. Select the next string for translation and continue the process.

The translation file may be saved at any point by clicking the Save button at the top. A confirmation message will appear when the files are saved.

5) Change site language

For the translation to be visible, the site language needs to be changed at Settings > General. Choose the language for which the theme has been translated and click Save Changes.

6) View translation

Now that a few of the theme strings have been translated, let’s see how they are displayed. The translations are visible on the actual website

“Read More” button text translated in Greek

as well as the Dashboard and Customizer fields.

“Display featured image” checkbox text translated in Greek

Several customizer fields translated in Greek

You may continue the translation process described above, until all theme strings are translated. At any time, you may view the translation progress by clicking Loco Translate > Themes in the Dashboard and selecting the respective theme.

What about plugins and WordPress core?

You may use the guide above to translate plugins as well as WordPress core.