How to translate FSE themes using WPML?

📝 Note: Please note that in order to translate FSE themes using the following steps, you need first to install the WPML plugin.

⚙️ Configuring WPML

After installing and activating the WPML plugin, navigate to WPML > Setup to start configuring it.

Inside the wizard, select the languages you want to translate. your website into:

Then, select the desired URL format, insert the site key, select how you want to translate the content (it's not permanent, you change it from the Translation Management later), and choose your preferences for the support updates and plugins, and that's it.

🗂 Translation Management

To start sending content to the translation process, you need to navigate to WPML > Translation Management page.

On this page, you can use the dropdown filters to select item types for translation (posts, pages, templates, etc.), as well as their original language, translation language, translation status, etc.

The next thing to do is to pick the things you want to work with and decide whether to translate, copy, or do nothing with them.

Assuming that your need is to find out how to translate content, select the Translate option, and then choose how you want to translate it, automatically or manually (myself).

Automatic Translation

📝 Note: This type of translation requires translation credits. Learn more about this from here.

1

Select the content that you want to translate.

2

Under translation options, select Translate.

3

Select Translate automatically, then press Start translating.

4

You will be asked what actions to perform when the content has finished translation. Select one of the options and proceed.

Manual Translation

For manual translation, as expected, you will have to take care of the content on your own. To do this, you can either select content in the Translation Management tab and add it to the queue or individually in the editor.

1

From the Translation Management tab, select the content that you want to translate.

2

Choose the translation options, and select the Translate myself method.

3

After that, click on the Add to Translation Queue button.

4

Access the content from the queue in WPML > Translations.

5

There, select the content you want to translate and click on the Translate button.

6

From that point, you will be redirected to a new page where you can start translating the paragraphs one by one.

7

When everything is done, click on the Complete button.

Translate FSE Templates

Translating FSE templates is possible after you have made some customizations and saved them.

1

After changing and saving the desired template, navigate to WPML > Translation Management and insert Template inside the filters.

2

Select the templates you want to translate, then choose the method (Translate) > Translate myself.

3

Click on the Add to Translation Queue, then navigate to WPML > Translations.

4

Next to the template, click on the Translate button.

5

The Advanced Editor will open, and you can start translating each paragraph. 

6

When everything is done, click on the Complete button.

You will be able to see the status of the translation once you are done:

💡Result

When you navigate to the page where the translated template appears, you can see the translated version:

Translate Menu

Even if we have explained how to translate an FSE template and the menu is part of it as a Navigation block, you will notice that it does not appear in the translation editor. To translate the menu, you need first to make some changes to the corresponding template part and save it. 

1

To do this, navigate to Appearance > Editor > Patterns.

2

Under Template Parts, open the Header Panel. Select from there the variation that you already use as navigation and make a change to it, then save it.

3

Next, navigate to WPML > Translation Management and add Template Part as filter.

4

Then, navigate to WPML > Translations and click on the Translate button next to the corresponding template part.

5

When everything is done, click on Complete.

💡Result

Translate Strings

Strings include texts like site taglines, call-to-action buttons, error messages, etc. WPML offers support for translating strings as well, using the WPML String Translation.

1

To start translating strings, navigate to WPML > Theme and plugins localization.

2

Select the theme for which you want to translate strings and press the Scan selected themes for strings button.

3

Do the same thing for the desired plugins.

4

Navigate to WPML > String Translation.

5

Start translating the strings by clicking on the plus button.

6

After inserting the translated version, press  Enter to save it.

Translate Content Individually

Another way to translate content is by adding manual translation to individual posts/pages.

1

For this, navigate to Pages > All Pages.

2

Select the page you want to translate and click on the plus button.

3

In the Advanced Translation Editor, insert the translated versions of the paragraphs.

4

When everything is done, click on the Complete button.

1

Another way to do this is by opening the desired page/post in the editor.

2

Under the Language accordion, click on the plus button under the Translate column.

Depending on how you want to proceed, you will have two options:

• The WPML Translation Editor will open the Advanced Translation Editor, as above, where you can translate each paragraph.
• The WordPress Editor will open a modal where you can select how you want to proceed with the translation. 

After this, it will open a new post/page where you can start adding the Romanian translation:

🔄 Language Switcher

Language switcher settings can be found in WPML > Languages. However, because we are using the FSE theme, the menu component is no longer available:

1

If you want to enable the language switcher in the header of your website, navigate to Appearance > Editor > Patterns > Header.

2

From the available variations, open the one that you currently use on your front page. 

3

Once you open it in the editor, click on the plus button to add new items to the menu.

4

Search for the Language Switcher component and insert it.

5

Use the customizations from the sidebar to create the desired appearance.

6

When everything is ready, click on Publish.

💡Result