Making WordPress site Multi-Lingual

For the purpose of this article, I will be using the Hestia WordPress theme downloaded from the WordPress repository. Hestia is a modern theme based on material design. The theme is sleek, Responsive, SEO friendly and translation ready*. One of the important and unique features of Hestia is it has live front page editor.

* The front page of the free version is not translation ready. for this, a pro license is required.

The purpose of this documentation is to help the users to translate their WordPress site to a language of their interest. It is assumed that the user has a basic understanding of WordPress themes and plugins.

Before we start

  • Install and activate the Hestia theme

https://wordpress.org/themes/hestia/

  • Install and activate PolyLang plugin

https://wordpress.org/plugins/polylang/

In this Article

  • Setup and configuration
  • Translating pages
  • Language switcher and menu
  • Translating categories and tags
  • Translating posts
  • Strings translations
  • Conclusion

Setup and configuration

1. Adding languages

There is not much configurations involved, the process is quite simple and straightforward. Navigate to the languages section to start adding the languages to which the site needs to be translated. The interface is similar to WordPress categories section and hence it’s easy for any user with basic WordPress knowledge to get a hold of it.

Languages section

2. Selecting or changing a primary language

It is important to select a primary language for your site. This would be the default language of your site in which the site content is loaded. The language added first or the language with an active star icon is considered as the primary language. The primary language can be changed from the languages list by activating the star icon which appears on mouse hover over the list of languages..

Primary language with activated star

3. Set your site contents to default language

The site contents (pages, posts, categories, tags) need to be associated with the primary language. There is a notice on the top of the languages section demanding the user to set all the site contents including post, pages, categories, tags etc. to the default language, go ahead and hit the link the plugin automates the process of setting the contents to the primary language.

Notice with link to set the site contents to default language

Translating Pages

In the page edit screen, there will be a new Languages meta section which shows the current language of the page selected in the drop-down. And the translations section lists all available languages. The ‘+’ sign next to the language flag is the indication that the page is not translated to that language.

Language of the page and list of languages

Click the + sign next to the language flag icon to create a new translation of the page which would open up a new blank page just like creating a new page. Fill the contents with the translation text. In this case, I am translating the page to Tamil.  From the below screenshot it is visible that the selected language is Tamil and the page is already available in English.

Translated page indicates the available language

Once you have translated the page you might see a copy of the page in the page list view. It is to be noted that the page acts as an Independent page and only visible in the front end based on the language selected by the user.

Translation of the same page in page list view

Menu and Language switcher

Each language has its own menu, Hestia theme by default has primary, footer and top bar menu locations and each menu location is replicated for all the active  languages. Since the menu does not support inline translation a new copy of menu needs to create and added to relevant menu location. In this case I have a primary menu for English and Tamil.

Primary Menu for English

Primary Menu for Tamil

Language switcher

Language switcher allows the user to change between the languages in the front end. To enable language switcher In Appearance->menus, go in screen options on the top right of your screen and check the “Language switcher” checkbox. You then should have a new meta box which allows adding a language switcher just as you add another menu item.

Language switcher added under Primary menu (Tamil)

Site front end displaying different language menus with language switcher

Translating categories and tags

The steps are almost similar to translating the page. From the categories list click on the ‘+’ icon which will open up a new category addition page and at the bottom of it will have the relevant primary language from which the category is translated.

Image showing category translation

While creating a new category or tag the language section should be set to the relevant language if you want to display the category for particular language alone.

Translating posts

The one main difference between page and post translation is the selection of categories if you have already translated the categories, the categories meta box will list only the translated ones based on the language of the post. Select the appropriate translated category to complete the post translation.

Categories for language English

Categories for language Tamil

Strings translations

Anything that is not in posts, pages, categories, and tags falls under string translation which includes site title, tagline, widget title, footer notes etc. these are user-defined, PolyLang allows translation of such strings. The steps are straightforward the string translation is accessed from WP dashboard Languages-> strings translations. The page will display the list of strings available and then a text field for each language.

Strings translation section showing translated strings

Site before Strings translations

Site After Strings Translations

Conclusion

Translating using PolyLang comes handy since there is no much technicality involved, understanding the flow and structure of the translation system would be sufficient to get started. There is some catch with the free version of the plugin the post slugs cannot be localized and if you try to localize the URL it would lead to a 404 page. The option is available with a premium add-on. The plugin has documented the process very well but there is hardly any support provided at the plugin repository. Ignoring these caveats, the plugin serves the best for most of the needs.

Posted in Multi-Lingual WP Theme.

Lead WordPress developer at WP ISLE. 4 years of WordPress experience in developing themes and plugins, Active in WordPress community by helping people with WordPress issues.

Follow on twitter @raja_maks