The Non-Technical Guide to a WordPress Multilingual Site

WordPress Multilingual Site

Reaching an international audience or a diverse community that speaks multiple languages is now available to almost any type of business and can have a positive impact on your website traffic and revenue. The first step required is to add multilingual functionality.

“I Increased My Search Traffic by 47% from Translating My Blog into 82 Languages” – Neil Patel 

It’s also worth mentioning that there’s been an increase in websites translated in more languages, in the last period of time. Build With comes with an interesting graphic explaining the Multilingual trends.

Businesses that should have a multilingual site

Firstly, let’s make a short roundup of some international businesses that would need a multilingual site:

  • Tourism agencies & Hotels
  • Companies that are doing or extending their business on international markets
  • Companies active in a country with more than one language, such as Canada (English, French)

Types of translation available

As my colleague explained some time ago, “WordPress in more languages can be anything between a slight annoyance to a real problem that can stop your project halfway”. The WordPress platform still doesn’t have a clear solution for multilingual sites, and the most common one is to use a multilingual plugin.

Besides, if we discuss the types of translation available on the market, and which can help you translate your WordPress site, these can be divided into three categories:

  • Automatic translation
  • Semi-automatic translation
  • Human Translation

Furthermore, there is also the core functionality of WordPress, namely WordPress Multisite, that lets you create multiple websites on the same WordPress installation.

Inside a WordPress Multisite installation, you can create one website version for each language need to display on your site. It’s a good option for true multilingual sites using different content in different sites, however, you should keep in mind that it can be quite difficult to configure and manage for non-technical users.

Going Multilingual with TranslatePress

Going forward with WordPress Multilingual, we’ll use TranslatePress, which is an easy to use WordPress translation plugin, that has a friendly interface, and which combines two translation possibilities: transform your site into a multilingual one with human translation or use Google Translate API to automate the process. According to Build With, the number of websites using the Google Translation API has increased.

Also, if the plugin has translations available in the languages you want to translate your site, they will be automatically served.

As for our example, if WooCommerce has already translations available in French, the translation for the strings connected to WooCommerce will be automatically taken from the .po files.

Now let’s say you are a Canadian business owner that wants to translate his actual English site to French. I will guide you further on how to translate your website using TranslatePress, considering the following topics:

  • Manual & Automatic Translation
  • How to translate an entire page
  • Translating dynamic strings (gettext)
  • How to display a language switcher on your site

To make sure we’ll go through this tutorial without problems, there are a few steps you have to follow:

  • Go to the Plugins Section, in your WordPress dashboard;
  • Search for TranslatePress;
  • Install and activate the plugin

After activating the plugin, you will find the Translate Site button on your Admin Bar. You can use it to access the translation interface.

Before starting to actually translate your website, you will need to configure a few settings for TranslatePress. The Settings panel can be found by going to your Dashboard -> Settings -> TranslatePress.

On this page, you can choose your Default Language, Translation Language and if you want Manual or Automatic Translation, among other things.

Manual Translation

In our case the default language for the Canadian business site is English, and we’ll want to translate it to French. On the Settings page, we need to check that the Automatic Translation option that is making use of Google Translation API is set to No.

To start translating, click on the Translation Site button, found on the Settings page or the one from your Admin Bar. A new page will open with the front-end editor and you can start translating the entire page, by adding the translation string by string.

As an example, if you want to start with “My Account” page, you click on the name on the page and then hover over each string.

In the translation editor, you will also find a list with all the strings contained in the current page. Some of them are public and can be directly edited with hover over the name, and others are hidden. One of the hidden strings are the SEO ones, which can be translated with the PRO version of TranslatePress.

Furthermore, you just easily navigate from one page to another, just with a few clicks.

Automatic Translation with Google Translate API

In this case, you will use Automatic Translation for your website, with the help of Google Translate API to help you as a starting point with simple strings until you put in place the manual translation.

With the Google Cloud Translation API, you can easily translate the text between thousand of available languages. There are a few steps you need to follow in order to enable the API and easily integrate it with TranslatePress.

In order to activate the Automatic Translation feature, you need to go to your WordPress Dashboard -> Settings -> TranslatePress. There you will find a field named Google Translate API, where you will have to insert the API key.

In our case, we said that we want a bilingual site, for the Canadian business, so we only need to activate French.

We’re going to switch back to the Editor Interface on the front-end of your site, choose French from the language list, and the page will automatically load the translated version of your site. Now you have a nice preview of how it will look like.

Translating an entire page

After the live preview of your translated site, you can choose a particular page, click on it and the editor will load all the strings available, even the hidden ones, such as SEO meta tags and description.

In this case, I navigated to the WooCommerce Cart which is now named Chariot.

Translating dynamic strings (gettext)

The next step in translating your WordPress site is to Translate Dynamic Strings that are coming by default from WordPress, or from other plugins and themes.

Gettext strings are different from normal strings and can take various forms, such as:

  • Dynamic variables (%1$s by %2$s) – there are strings that can contain things like username, plugin settings or other variables;
  • Original strings – Can be strings added by plugins/themes. You will find these strings under the “Original string” box in the translation editor;

Using TranslatePress you will be able to translate the dynamic strings loaded on that page.

Display a Language Switcher

With TranslatePress you can also have the option to display a language switcher so that your users can easily switch from English to French.

 

To implement the language switcher, go back to the WordPress Dashboard -> Settings -> TranslatePress and there you have the following options:

  • Using the  shortcode [language-switcher] on any page or widget;
  • As a WordPress Menu item, from the WordPress dashboard -> Appearance -> Menus to add Language Switcher Languages in any menu;
  • As a Floating Language selection where you can display a floating drop-down menu that will follow the user on every page within your website;

That’s it! We went through configuring a multilingual site for a Canadian business with the help of TranslatePress.

There are some key advantages if you use this plugin to transform your site into a multilingual one:

  • Allows you to translate the entire page by using an intuitive UI similar to the Customizer;
  • Full integration with Google Translate API;
  • Fast and friendly with both Manual and Automatic Translation;

Download TranslatePress

Have you ever considered transforming your site into a multilingual one? What solutions have you used? Were there any features they were lacking?

Let us know in the comments section below!

Subscribe to get early access

to new plugins, discounts and brief updates about what's new with Cozmoslabs!

8 thoughts on “The Non-Technical Guide to a WordPress Multilingual Site

    1. Custom tables. The query themselves are rather fast as they are simple. We’re also batching them together so it’s one larger query rather then many small ones, making it even faster.

      Now, there still is a performance impact as far as a standard WordPress site, but there is no good workaround for that. We have to search for the translated strings 🙂

      1. Does the string search and replace happen on every page load? Does it cache the first search/replace action so subsequent page load become faster? if yes how are you storing the cache data? custom table or using transient (which falls back to object cache if one is found such as redis)?

        I am asking ‘cos we are sick of WPML. It’s too involved and I love how simple TranslatePress is.

        1. No caching as of now, however, static front-end caching works out of the box.

          We’ll look into finding a way to cache the queries in the near future, however, we need to see where the bottleneck is.

          The query itself might not be that bad, it’s quite possible the PHP dom parsing is what’s slow and there is no way around this. We have to detect all the strings in the page.

        2. There should be a way to implement caching. Then add an action hook that is triggered when a new translation is modified or added to burst/delete the cache for that page.

          That will significantly improve performance. You shouldn’t always rely on the fact that users have a page-caching plugin like super cache.

        3. You’re right. It’s on the development list.

          There will be some sort of caching implemented. But we have quite a few of development tasks on our todo list and the last thing I want to do is to do a rush development of the cache invalidation.

          “My translated string doesn’t appear” is a lot worst then “I have a 10000 words page and it’s a bit slow.” 🙂

  1. Hey! This guide was super useful for me, I think you really know what you’re doing and how to explain it to the community =) So I wanted to say Thank You before I go back to work on my wordpress!

Leave a Reply

Your email address will not be published. Required fields are marked *