Blog / Articles14 January 2020

How to add multiple language versions to a Wordpress site: step-by-step instructions

This article is aimed for people who are familiarized with the structure of Wordpress files. All edits can be made with access to the administrative panel of the site.

On the 15th of May 2019 the "Law on providing the functioning of the Ukrainian language as the state" was adopted in UkraineArticle 23, part 6 of this Law states that sites and social pages of companies selling products in Ukraine, and the ones, which are registered in Ukraine, must be in Ukrainian. On the websites of foreign companies that sell products in Ukraine, the Ukrainian version should also be loaded by default. Mobile apps and PWAs also must have the Ukrainian version.

For sites in Ukraine that do not yet have a version in the state language, its implementation can cause certain technical difficulties. That is why in this article we are going to tell you how to make your Wordpress site multilingual. This CMS is not our random choice, because nowadays WP is the most popular content management system in the world.

What is needed to create multilingual site on Wordpress?

The standard Wordpress framework does not support multilingualism. But with the help of plugins it can be implemented by creating posts and taxonomies (product or post categories) for different languages ​​in the database and making a connection between them. To implement the multilingual support for the Wordpress site, we at Arto use Polylang plugin, which will be discussed further.

Moreover, we will need Loco Translate, which allows you to translate themes and other plugins by making changes to their .mo and .po files.
So, let’s get started!

Step-by-step guide to make Wordpress multilingual

1. Install plugins

  • Polylang
  • Loco Translate

If your site uses Woocommerce or Contact Form 7, you should also install Hyyan WooCommerce Polylang Integration Plugin and Contact Form 7 Polylang Module.

2. Add languages

Go to the Languages ​​page and add all the languages ​​necessary for your site. After that, mark the default language of your site with a star icon.

Languages settings page. The screenshot shows that two languages ​​have been added: Ukrainian and Russian. In this example, Russian is marked with a star as the default language of the site.

3. Make additional settings of Polylang

For doing this, go to the page:

The following options are available.

  • URL modifications. Defines the url format of the language versions of your site. The approach depends on the SEO strategy that you have chosen: creating alternative language versions as subdomains (for example, en.site.com, de.site.com) or as subdirectories (for example, site.com/en/, site.com/de/). We suggest to add the language version as a directory, for example, https://example.com (main language), https://example.com/ru/ (Russian), https://example.com/en/ (English).
  • Detect browser language. Activation or deactivation of the automatic detection of user’s browser language, followed by automatic redirection to a suitable language version. If there is no this language on the site, the default language will be selected. Users do not always correctly set language in their browsers, so we recommend disabling this option.
  • Media. Activate or deactivate translations for media files. If enabled, translation of image metadata into other languages ​​will be available. In this case, the images become bound to certain languages. When using the media library for editing an item, you can only select images that are associated to the language of the item being edited. If you see images in your media library "disappear" after enabling the plugin, then this setting may be the main cause of the problem. If you do not need to translate the alt and title attributes of your images, you should disable this option.
  • Custom post types and taxonomies. Using this option you can configure which types of posts and taxonomies should be multilingual and which ones should not. In most cases, you need to check all the options.
  • Synchronization. This setting allows you to update posts while changing meta data ​​in one of the language versions. For example, if you have a Wordpress online store and you have changed the price of a product in one language version, then it automatically changes in other language versions of the corresponding product. We advise to mark all the fields.
  • WPML compatibility. This option is responsible for using WPML language packs. Worth enabling.
  • Tools. There is only one field for deleting Polylang data after removing the plugin. It is worth leaving unchecked.

4. Specify default language

When the settings are completed, you should use the Polylang’s offer to assign a default language to all currently existing pages and taxonomies. You will see a suggestion message at the top of the screen on the Languages page.

 

After clicking the confirmation button, all your existing pages will be automatically “linked” to the default language of your site.

5. Translate WP theme and plugins

To do this, you need the previously installed Loco Translate. The link to it is in the left pane. Choose what you want to translate first: the theme or plugins (check the screenshot below).

For example, let’s choose the Woocommerce from the list of installed plugins. Let’s move to it, and we will see a list of available language files where you should add or modify translations. In most cases, you will find all the languages ​​that you need here. But if the specific language you need is not in the list, then you should create it by clicking on the “New Language” button (check the screenshot below).

For example, we added Greek, which was not in the list of languages ​​of Woocommerce plugin (check the screenshot below).

When the new language is successfully added, you will see it in the general list of language files. Select it and go to the editing page, where you translate all the necessary strings (check the screenshot below).

Such translations do not always have to be done manually. There is a large number of ready-made translations for popular plugins or topics on the Internet, and you can probably find and download them without problems. Then upload the translation file in the .mo or .po files format using the buttons, as in the screenshot below.

6. Make some point translations

In a perfect case, after making translations in Loco Translate, every word or a phrase on your site should be translated. But, unfortunately, not all of plugins can be translated using Loco Translate. Some of them just do not have .po files. For such cases, you can use the php functions of the Polylang plugin. To understand how it works, let’s consider the following example. Imagine that we are translating a site from English into Ukrainian and we still have untranslated words “Product” and “Price”. To translate them, we need to do the following:

  1. Open functions.php file in the admin panel.
  2. Register the strings in the Polylang plugin database using the pll_register_string() function (more details can be found here):
    
    pll_register_string('Price', 'Price');
    pll_register_string('Product', 'Product');
    
    
  3. Then, go to the Strings translations page, which you can find in the left pane of the navigation menu.
  4. Above the translation table, use the search field that is located above it to find the untranslated word or phrase that we previously registered with pll_register_string(). When you find it, make a translation and save the changes. The screenshot shows an example search by the word "Продолжить".
  5. After saving the changes, we return to the functions.php file and create an associative array, where the key is the word or phrase that should be translated, and the value is its translation, returned by the pll__() function (read about it in details here).
    
    $to_translate = array(
        'Product' => pll__('Product'),
        'Price' => pll__('Price'),
    );
    
    
  6. Below, under the array, add the gettext() function filter, which will intercept an attempt to translate a specific line and return the translation from $to_translate associative array. Details on how this filter works can be found here.
    
    add_filter('gettext', function($translation, $text) {
    
        global $to_translate; 
    
        if(!empty($to_translate[$text])) { 
            // return custom translation if we have it in the array
            return $to_translate[$text]; 
        }
    
        // return original text if no translation was found
        return $translation; 
    
    }, 10, 3);
    
    
    After adding this filter to the functions.php, you can intercept the output of specific strings from plugins, the developers of which did not include the possibility of multilingualism.
  7. If even after these actions you still have untranslated words on your site, there is a possibility that they were put directly into the code. This practice usually is absent in official plugins, but can occasionally appear in self-written scripts, for example:
    
    <span>Go home</span>
    
    
    In this case, we register this phrase with the pll_register_string function, add it on the Strings translations page (as described above), and then replace it in the file by calling the Polylang translation function:
    
    <span><?php pll_e( 'Go home' ) ?></span>
    
    

7. Translate your content

To do this, in the administrative panel of the site, we select any page, post, category or product that we want to translate and click the button to add a translation of this material into another language. It looks like a plus. If you want not to add, but to edit a previously created translation for a specific post, then you should click on the button, which looks like a pencil.

And finally, if alternative language versions of the page have already been created, but they are not interconnected (the system identifies them as two separate pages in different languages), then we shoud combine them manually. To do this, go to the post edit page and begin to type the page name of the alternative language version in the special field of the right panel of Polylang block. When the name appears in the drop-down list under the field, select it by clicking.

All the posts and taxonomies have the same field to bind the alternative language versions.

8. Set up navigation

The final step in translating the Wordpress site is to localize the menu so that the navigation should match the chosen language. To do this, go to the “Appearance” page and select “Menu”.

It is necessary to create new menus for each language and add links to pages of the corresponding version.

Also, you need to add a language switcher in the menu.

In the settings of the new menu, you need to specify the position of this menu in the site template.

Finally! We have successfully set up multilingual Wordpress site, which not only complies with the new legislation of Ukraine, but also makes it more convenient for users.

Yaroslav Yasinskiy
Web-developer
I have been working with web development since 2015. I specialize in the creation, modification and support of CMS-systems. I am interested in electronics and modern technologies, for inspiration I organize hiking trips to the Carpathians. If you have questions regarding this article, please write to yaroslav@arto.agency.

Be first to know about important!

How-to articles, news and reviews. We write to you when we really have something to say
COMMENTS
LEAVE A COMMENT
LOGIN
  • Facebook
  • Twitter
ВИТАЛИЙ
04 November 2020, 10:52
Спасибо огромное за статью. Как для новичка - очень полезно.
У меня по какой то причине в рус версии сайта перевод тянется из МО файла. Для укр же версии перевод не тянет. Приходится добавлять перевод как описано в статью, через Polylang translate string. Буду благодарен если объясните как исправить что бы укр версию переводов тоже тянул из соответствующего МО файла.
ДЕНИС
27 July 2020, 17:48
По локализации/переводу изображений - Вы написали, что можно иметь разные изображения для разных языков, но это не так. Можно менять их атрибуты альт, и проч. для разных языков, но не само изображения
НИКОЛАЙ АШПИН
28 July 2020, 12:57
Денис, спасибо за ваш комментарий! Вы правы, исправили соответствующий абзац в статье.
THIS SITE USES COOKIES
We use cookies to analyze traffic, provide social networks features, and for functions of the commenting system on the site. The list of cookies to be set is located on this page. Do you agree to accept cookies?