WordPress started off as a tool for bloggers, but over the last few years has developed into a fully functional CMS that is highly adaptable and is now used to create all manner of sites, from news portals, ecommerce websites (using WooCommerce) to community forums. Indeed, in 2018 one in four websites were designed in WordPress.
What is the best translation plugin?
There are a range of translation plugins available to help create a multilingual WordPress site and we looked for one that:
- Allows the manual translation of content – Google have stated that they consider automatically translated websites to be spam. Currently automatic translations often also create unintentional hilarious results, we therefore only considered plugins that allow a manual translation.
- SEO friendly results – For a translated website to rank well with Google, it must have a separate URL (web address) for each language, rather than using cookies only to control the language, or having multiple languages on the same page. We therefore only considered plugins that have these features and that allow you to translate Metatags, etc. too.
- Ease of use – We looked for plugins that are easy to use based on their reviews and number of downloads.
- Price – Where a free translation plugin provides a comparable service to a paid plugin, we opted for the free one.
After comparing various plugins on the above factors, we would recommend Polylang to create a multilingual website. It is a user-friendly, free plugin that creates SEO friendly results.
How to install and configure Polylang?
First install and activate Polylang, as you would any other plugin (see details on how to install plugins in WordPress). After activation, go to settings via the plugin or via Languages, this will take you to /wp-admin/admin.php?page=mlang and add the desired languages.
To change the default language, simply click in the Star column next to the new language you want to make the default.
When you add each new language the required .mo and .po files with translations will be downloaded and filed in WordPress-content/languages/
Next you have to set how to configure the different languages – using different domains, subdomains, or directory names. Go to Languages->Settings->URL modifications Settings. In this example, we will work with different domains:
Next we have to determine what we want to translate. Visit Languages -> Settings -> Custom post types and Taxonomies. You can safely choose everything. And - very importantly – synchronization.
Languages->Settings->Synchronization settings.
The synchronization settings allow you to choose what automatically synchronizes on a page in one language, when it’s changed on another translation of that page. If you don’t have custom fields, you can safely tick everything, for example, this means if you change the ‘featured image’ in English, it will automatically update in French and German, or whatever languages you have configured on your site.
If your images have text in multiple languages as part of them (e.g. an infographic or banner with writing on), you will need to deselect the ‘featured image’ field too.
If you have custom text fields, then they shouldn’t be ticked.
If you are creating an ecommerce website, there are then some extra steps, as detailed below. If you are creating a simpler WordPress site, then you can skip the steps on Ecommerce and scroll down to see how to translate menus, other text strings and to add flags or another way for visitors to select their language.
Creating a multilingual WooCommerce website
For an ecommerce site there are a few extra things that need configuring on your plugin. Visit
Languages -> Settings -> Synchronization settings again.
In our example – our products have a custom field that is a text area and of course this will be different for the different languages, so we would need to deselect it. If we selected this field, then when we start translating, in all languages it will look the same – whatever the last variant that we modified.
When you start translating, it’s therefore best to check to be sure that the original English hasn’t been translated accidentally. If you had this field selected and translated 200 products from English to German, say, then at the end, all the English products would also show in German and this is a fairly simple mistake to make, so pay careful attention to this.
What extra WooCommerce plugins do you need?
One reason we recommend the Polylang and WooCommerce plugins for multilingual sites, is because they integrate together, however they need several extra plugins to work, plus add any additional functionality that you might need on a multilingual site.
For ecommerce sites, we therefore recommend that you install the following plugins:
- Hyyan WooCommerce Polylang Integration plugin – required to make WooCommerce and Polylang work together.
- Loco translate – Allows the editing and translation of WordPress plugins and themes.
- WooCommerce Currency Switcher – for sites using multiple currencies.
- Polylang Theme Strings – Lets you translate miscellaneous strings of text not covered in the other plugins.
- Polylang Slug – Lets you translate the URL slugs.
Complete a standard installation of all of the above-mentioned plugins, starting by installing and configuring Polylang and Loco Translate.
It's good to now translate the taxonomies and product categories before beginning the basic translation.
We are already ready for this and now the Products -> Categories screen looks like this:
Translating the rest of the website
For all steps in the process - with the content, menus and widgets, where they already exist, we need to re-save the content/menu to the default language and create a new one for each of the other languages.
If you are observant, you have already noticed that after activating Polylang, a new element has appeared in the admin bar – Show all languages with a drop-down menu for each language.
This is not the so called Language switcher, but it will be useful for you in the future when you begin translating. The Language switcher is still just as inactive widget, you have to go to the tab Appearance → Widgets and you can drag it wherever you want to allow visitors to change language easily.
Personally we chose to put a snippet of code in our theme header file:
<?php pll_the_languages(array('show_flags'=>1,'show_names'=>0,'hide_current'=>1));?>
For more information, see the Polylang WordPress website.
To configure the widgets, simply drag the widget to the appropriate area and select whether you want to display it for one or multiple languages.
Next, translate the title:
If a particular widget has additional text input fields, also create one widget for each language and make the necessary translations.
Menus
For each menu that is supported by the theme, the corresponding location for each language will have automatically been added:
Re-save the given menu in the default language, then create menus for all the other languages and assign them to the corresponding theme locations. When you add pages that already exist to the menus, it’s very useful to use “Show all languages” in the top admin bar switcher as a filter.
Themes
Perhaps the essence of translation is the translation of the theme. In order to translate the theme, it’s important that the theme has been developed with a multilingual site in mind. Moreover, some themes will have already be translated into the most common languages.
We recommend doing two elementary checks when choosing a theme:
- Is there a folder WordPress-content/themes/your-theme/languages with .mo and .po files?
- If so, open some of the theme-specific files, such as header.php, footer.php, functions.php… Is text enclosed in brackets and before it “__” or “_e”, for example __(“Search”) or _e(“Add new comment”). If you find these things, then your theme is ready for translation, and in the best case scenario there is already a default translation built into it.
Naturally some corrections or additional translations will be needed.
As we said at the beginning, we will use Loco Translate for this phase.
Loco Translate provides in-browser editing of WordPress translation files. With its help, you can easily edit/update the language files, and if necessary create new ones. The idea of WordPress translation (this is the same for other popular CMS systems too), is to use string-string language files - .po files, which are structured in a series of pairs of rows, as follows:
msgid "Search"
msgstr "Ricerca"
When we add a new language, the plugin will scan the files and everything it finds in the following format __(), _e() … will then be saved in the corresponding language files, giving you the ability to edit/update it.
Usually we do not have to translate everything, for example, most of the language files for a theme or plugins contain administrative interface strings, such as “Choose a product’s main image” or “Select background color”, which you do not need to translate.
If you have configured everything correctly, then there is nothing special about translating the content itself. At this point the following should all be properly configured:
- The synchronization.
- The necessary taxonomies / categories
- Menus
When opening a page/post/product for edit you will find the flags in the appropriate languages with a pencil beside them. If you've synchronized things correctly, you won’t need to enter a category or image for each language, as that will automatically appear.
For SEO, it’s also essential that you translate the Metatag Titles and Description for each language. These appear in the search results and if you have e.g. French metatags on a German website, then you will receive a lot less traffic to your site.
This article tackles the mechanics behind designing a multilingual WordPress website. It’s also important to consider cultural differences and other SEO aspects for each language version of your site and our article on how to translate a website provides more detail on this topic.
If you would like any assistance with creating a multilingual site, then please get in touch.
