translate wordpress content

How to translate content on a WordPress website

No time to read it now?

We will send a link to the article to your inbox

Read later

The problem of translating content on a WordPress website

Our client, a home security system manufacturer, operates in the USA and Canada. Its main website is in English, but since Canada has French-speaking provinces and America has states with large Spanish-speaking populations, it has three language versions.

Our task was to translate the texts published on the main website from English into French and Spanish and set up a translation management system for further operation of the online store.

Although there are plenty of WordPress services for translation automation, sometimes developers have to continue working manually. This case study confirms the fact that not all of the client’s problems can be solved using technology and that you should not hold on to a decision but get involved in the client's situation.

how to translate pages built with elementor

How to translate pages built with Elementor

The client’s store was built using Elementor, a WordPress website builder plugin. Simple pages, for example, content pages, can be easily assembled from default blocks. But for more intricate pages, you will need to create custom sections.

standard elementor section
A standard section featuring an image and text available by default
custom elementor section
A custom section consisting of three cards in a row, which was not available in the builder and which we developed ourselves

When it comes time to translate texts on a website, default blocks are automatically broken down into elements that can be translated individually. (The developers call them “lines”; see the picture.) Once the work is completed, they are “glued” back together into a solid block using Elementor, and the translation gets updated.

wordpress website translation


Custom sections require more preparation. The contents of such sections must first be described in a special XML file to prepare it for translation. The Elementor developers have already described the default sections using this principle, but we had to describe the custom ones ourselves.

In the document, the developer specifies what elements the section structure consists of and which of them need to be translated. For example, the widget we developed is a slider. A slider can contain an infinite number of slides. Each slide has a picture, a title, and a piece of text. The title and text are marked as translatable elements of this section.

Next, the XML file is added to the settings of the WordPress Multilingual Plugin (WPML), which breaks the translated content into “lines.” More on the plugin in the chapter below.

How WPML works

One manages the translation of a WordPress website page using multilingual plugins. We chose the most popular one — WPML. The plugin helps site administrators manage translation requests, interact with translators from agencies, and manage language versions of pages.

First of all, the developer activates the plugin on the site. If the website owner wants the texts to be translated by a person and not a machine, after installing the plugin he has to select a translation company that will provide the service.

wordpress multilingual plugin


The site owner selects a suitable company from a list of translation agencies that work with such tasks and pays for “coins,” which he can spend on future work (“jobs”). After registration and payment, they can commission translations directly from the WordPress admin panel.

The process looks like this. The texts to be translated are put in an XML document, and this doc is then sent to the service. After it is sent, this unit of text is assigned an ID. The service specialist translates the texts, marks them as ready, and the document is sent back to the website.

The admin can manage translations into different languages ​​from the translation editor. It looks like this:

wpml editor


The finished translation should be automatically integrated into the site, but the process does not always go like clockwork.

How we translated a WordPress website

Attempt 1

At first, we tried to organize the translation process through the translation service we described above, but technical hiccups constantly occurred and impeded progress.

The developer would send a request for translation, and the translator would complete it, but the new text would not appear on the website. Sometimes it turned out that for some reason the document was mistakenly sent over to the translator one more time, and the translations that he had already begun were not saved. It can take a long time to find out whether an error occurred on the website’s back end, whether something in the service did not work, or whether the translator did not save the changes. But the result is the same: the work is not done.

Attempt 2

After the failure with the translation service, we went head-on. We created a simple spreadsheet with columns for “original,” “Spanish version,” and “French version” and manually copied and pasted each line to be translated. We gave the hired translators access to the table and then transferred the result back to the website.

In this case, flexibility was more important to us than commitment to technology. And here's why.

The client launched a marketing campaign. He paid for social media ads, got integrations from bloggers, and did everything he could to drive traffic to the site. But because of a glitch, the translations weren't showing up on the pages. It was impossible to find out on whose side the error occurred, the advertising money was trickling away.

Sometimes, it is more important to just make it work and do it quickly. For this reason, we did not try other plugins (testing and setup would have required too much time) and resorted to manual labor.

how to work with multilingual websites

How we work with multilingual websites now

We were never able to find the cause of the problems and set up the work through a professional translation service inside the plugin. The developers were spending a lot of time checking whether the texts were sent to the service and what the translations looked like when they would return to the site (and whether they returned) — all of which should have happened automatically and without their intervention.

The following algorithm proved to be the best option. Admin accounts were created for company employees who speak different languages. When texts on an English page are changed, admins receive a notification indicating the specific “line” that was edited. They sign into the translation editor and edit the Spanish or French version of the text from there. The client preferred this option to automation.

how to work with wordpress multilingual plugin

For those working with WordPress Multilingual Plugin

After the plugin is installed on the website, you should carefully monitor how site administrators make changes to the content of different language versions.

When creating a new language version of a page, WPML generates a web page identical to the original in structure but with an added prefix, for example, https://www.alarmsandbeyond.com/es.

If an admin tries to edit a page in a secondary language directly, WordPress will inform them that the page is linked to the original one and cannot be edited manually and will offer them to do it through the translation editor.

 wordpress website translation management


However, the user has the opportunity to close the notification and continue making edits to the page directly. In this case, the connection between pages in different languages ​​is broken, and they are no longer synchronized. Now the admin will no longer receive notifications that the texts on the original page have been edited and which “lines” are affected by the changes. All that remains is to manually check the content on the pages in all languages, which inevitably leads to missed edits.

In the early stages of our work on the project, the client often ignored the warning and edited the translation directly on the page. It took a few such missteps to make the client realize that this violated the relationship between the language versions of the pages.

Conclusion

Negative experience also counts. If working with a specific translation service was a prerequisite for the client, we would start communicating with its technical support and compile a list of bugs for them to fix. However, the client was okay with using another translation management option, so we decided to get out of the spot by changing the approach.

You might also like

Why upgrade PHP

Why you should upgrade PHP (in simple words)

Why upgrade PHP? For a non-technical person that’s a fair question as not always this topic is addressed. In this article, we’re going to discuss why upgrading software is a necessary part of website security and overall performance.