Get Bricks

How to use WPML with Bricks

September 29, 2023

WPML is a WordPress plugin known for its role in facilitating the creation of multilingual websites.

Coupling it with Bricks (@since 1.9.1) allows not only for the manual translation of posts, pages, and various content types into numerous languages but also offers automatic translation features, significantly broadening your website’s reach and accessibility.

Once you’ve established a page in your primary language with Bricks, WPML enables you to easily translate the content into any language you wish to add to your website, be it manually or automatically.

This documentation will guide you through the process of translating your Bricks website using WPML.

Setting up the environment

Before translating, set up your environment with the necessary plugins:

  1. Bricks setup:
    • This guide will illustrate the translation process using a simple Bricks website. This website has main pages like Home and Blog, and templates including a header and an “All Archives” template, which has a template condition to apply to all archives and the blog page.
  1. WPML plugin installation:
    • You can use the OTGS installer to install the required WPML Multilingual CMS and WPML String Translation plugins.
  1. Language Configuration:

Translation Options with WPML

WPML offers different ways to translate your content:

  1. Advanced Translation Editor:
    • Manual Translation: A method where each page & string is translated individually. This guide focuses on this approach.
    • Automatic Translation: A method that allows for automatic content translation, with an option for later edits.
  2. String Translation:
    • An additional feature for translating strings, such as widgets and admin texts.
  3. Edit with Bricks:
    • Post-translation, modifications to content and design for different languages can be done directly with Bricks, if necessary.
  4. Additional Resources:

Translating website content

Translate your website content using WPML and Bricks through the following steps:

Page & posts translation:

Use the WPML Advanced Translation Editor to create translations for each page in the desired languages.
For comprehensive guidance on the various methods to translate pages and posts created by page builders like Bricks, refer to WPML’s official documentation about this topic.

Template translation:

Translating templates follows the same process as translating WordPress pages & posts. Your template settings & type will be automatically duplicated to the translated post.

If the translation of templates is not automatically enabled when you activate WPML, please refer to the WPML documentation on how to enable translation for custom post types, and ensure that it is enabled for “bricks_template”.

Example: Translating an archive template:

We have set up a simple archive template, which is applied to both the “Blog” page and its translated version, “Blogue”.

Each blog page will only display blog posts of that particular language (using only one template):

Language switcher & menu translation

  1. Language switcher
    • Bricks provides a “Language switcher” element for WPML, which you can add anywhere on your site. You can customize the language switcher from the WordPress dashboard under WPML > Languages > Custom language switchers.
  1. WPML menu translation:

Sync Bricks data across translated pages

After translating a page, you might want to modify the original page. Those changes you perform with Bricks in your original page are not applied to the secondary language pages.

But Bricks and WPML make it seamless to sync your design changes across translated pages without affecting the translated text. Here’s how you can do it:

Step 1: Edit your original page with Bricks

Open the page in the primary language in the builder. Make the necessary design changes (edit layout, change styles, etc.)

Step 2: Save your changes

Once done, save your changes.

Step 3: Edit with WordPress

Close the builder by clicking “Edit with WordPress” to edit the page in WordPress.

Step 4: Update translation in the “Languages” panel

In the WordPress editor, navigate to the “Languages” panel. Typically found in the right sidebar or the document settings panel.

Here, you will find an option to edit or update the translation. Click the icon to open the “Advanced Translations Editor” as shown in this screenshot:

Translate any untranslated strings inside the Advanced Translation Editor, then click the “Complete” button at the bottom of the screen. Your new design changes are now synced with this translated page without affecting the translated text.

Editing translated content with Bricks

You can also access and edit the translated content directly with Bricks for specific language design or content modifications.

Additional resources

Consult the following official WPML documentation for further guidance:

  1. Getting Started with WPML.
  2. WPML FAQ.
  3. Translating Content Created with Page Builders.
  4. Translating External Links.

Fancy trying out WPML?

If you found this post insightful and you’re considering giving WPML a try, we encourage you to use our affiliate link.

Note: The link we’ve provided is an affiliate link. This means we may earn a small commission if you decide to make a purchase through it. This comes at no extra cost to you, and it assists us in further innovating and refining our offerings.