How To Translate A Website

If our website runs on WordPress, then getting it translated is a reasonably easy thing to do. However, it would be best to have a translation or multilingual plugin to handle the main task.

We might have heard that WordPress is "translation-ready" or "ready for localization," which suggests that all the tools required to get our website translated are already built-in.

WordPress being translation-ready only means that it makes it possible for website translation on the code level. In other words, if you're a web developer, WordPress has some ready-made structures for you in place that add translation capability to your themes or plugins. However, this does not help the end-user much.

This is where we use the translation plugins.

Translation plugins, e.g., TranslatePress, take WordPress's built-in tools, expand on them, add user-facing interfaces, and effectively provide you with the best way to translate a website from start to finish.

We will show you how to translate a website in the following tutorial.

Step 1: Install and configure a translation plugin

The translation plugin we will use is our TranslatePress. The free version of the plugin gives you access to all the features required to translate a website effectively.

Installing TranslatePress on your website is a straightforward process.

• First, go to your WordPress dashboard,
• Plugins → Add New, and put "TranslatePress" into the search field,
• Next, click on Install and then on Activate next to the plugin's name.

TranslatePress allows you to add up to two new languages in the free version and multiple languages in the premium version. You can do that in Settings → TranslatePress. Click on the Add button to begin:

Next, let us decide how our readers will be able to switch between these languages:

Decide where to place your language switchers

At the bottom of the settings page, we will see these options:

TranslatePress gives you three main language-switching mechanisms:

Shortcode: It is a unique text that you can add to any post or page. When WordPress sees this text, it will replace it with a live language switcher.

Menu item: This is the most commonly used type of language switcher. Your visitors will generally expect to see links to other languages in the main menu.

Floating language selection: The last type of language switcher is a floating box that sits in the corner of the screen, no matter the page that the visitor is currently browsing.

Feel free to pick whichever of these options work best for your site and configure what you want them to look like.

Apart from the language switcher, I also encourage you to read the other options on this settings page and fine-tune them to your liking.

Click on Save Changes at the bottom when done.

If you need inspiration on what the best practices are for language switchers, read this all-in-one guide to language switchers.

Step 2: Translate your menus

With your new language or languages added to the website, an excellent place to start working on actual translations is your website navigation - the menus you have on the site.

• Click on the Translate Page button in the top admin bar.
  
  This will take you to the main translation interface of TranslatePress.
• To translate any of your menu links, hover your mouse over them and click on the blue pencil icon.

This will bring up the translation box in the sidebar and allow you to add localized versions of each of your menu links.

• Click on save translation at the top to approve your input.

Go through your menu links one by one and create new localized versions of them. Keep in mind that we're only translating the links themselves at this point. We are going to take care of the actual content that these links lead to later on.

When you are done with the main menu, go through the same process with the other menus on the page.

Want to show different menu items for different languages

We want to display a different set of links for each language version on our website in some cases. This is easy to do using the Navigation Based on Language add-on.

Step 3: Translate your content (pages, blog posts, CPTs, etc.)

• Go to any page that you want to translate and click on the Translate Page button in the top admin bar. This is the same interface we entered when translating the menus.
  Hover your mouse over any piece of text on the page and click on the blue pencil icon. Enter your translation in the sidebar.

• Just like that, go from paragraph to paragraph until you have the whole page translated.
  To help you not miss anything important, TranslatePress lists everything that can be translated on a given page inside a drop-down menu in the sidebar. You can go through that list or use the available keyboard shortcuts instead of scanning your page manually.

Repeat this process to translate the other pages on your website.

If this seems like manual labor, you can take advantage of the automatic translation module in TranslatePress:

Enabling automatic translations:

Automatic translations can be a huge time saver - especially if you get started translating your website and have pages upon pages of content to deal with.

• Go to Settings → TranslatePress. Switch to the Automatic Translation tab.

The automatic translation module works with either Google Translate or DeepL (AI translator).

Getting it hooked up to Google Translate is easier and cheaper to get started with. All that's needed is obtaining a translation API key. Here is a detailed guide on how to get the API key.

As soon as you enter that API key and validate it, TranslatePress will get to work and generate your translations automatically.

What is also important is that you can step in and correct any translations that haven't turned out ideally.

Translate any page builder content

Page builders like Elementor, Divi, or Beaver Builder have been getting popular lately. And not without reason! They are a great way to build yourself a great-looking page without having to code anything.

You will be happy to know that TranslatePress can handle page builder content quickly as well. Therefore, you can translate any page created with a page builder the same way you have been working with your standard pages.

Again, click on the blue pencil icon next to the text you want to translate and add your translation in the sidebar.

We have separate guides on how to translate Elementor content and Divi Builder content. Give them a read if you need anything clarified.

Step 4: Translate your contact forms

If you have contact forms on your website, you'll want to translate them as well. The good news is that no matter which plugin you're using for the contact form functionality, translating the form won't be a problem.

Go to the page with your contact form and click on the Translate Page button in the top admin bar.

Hover your mouse over the elements of your form, such as the "Your Name" field label, etc. Then, translate all those texts in the sidebar. Remember to click on Save translation after adding each one. You can also similarly translate your send button.

With the primary form texts done, you should also take care of any error and success messages that your form script generates after a visitor makes a submission attempt.

The easiest way to trigger those is to click on the send button yourself and see what happens. You'll see something like this:

You can click on any of these texts and translate them in the sidebar.

With the errors done, now fill out the form with example info and click on the send button again. This will show the success message. Translate it as well.

Translate that success message as well.

Step 5: Translate SEO elements

If you want your translated pages to rank in Google, you should also translate their meta strings and URLs.

These strings are what Google looks at when determining what your page is about and where it should sit in the rankings.

You can translate all SEO elements on a page using the SEO Pack Add-on for TranslatePress. It's a separate plugin that installs alongside TranslatePress. This add-on integrates with all popular SEO plugins such as Yoast SEO, Rank Math, All in One SEO Pack, etc.

With the add-on active on your site, you'll be able to access the new SEO options by:

• clicking on the Translate Page button in the top admin bar.
• Then clicking into the drop-down menu of the available translations.

Step 6: Have a WooCommerce store

If you have a WooCommerce store running on your WordPress site, translating the products in your catalog might be something you're interested in.

Taking care of essential translations in your store works just the same as it does for any other page.

For starters, visit your main shop page and click on the Translate Page button in the top admin bar. Next, go from product to product and translate their names, descriptions, and the other details associated with them. Finally, click on the pencil icon next to a given text and add the translation in the sidebar.

Your main shop catalog and individual products are not everything. Don't forget about your shopping cart page, the checkout page, and the customer profile page as well.