Skip Navigation
Home » WPML Documentation » Developers Information » Maintaining the Avia Layout Builder (Enfold) Compatibility with WPML

Maintaining the Avia Layout Builder (Enfold) Compatibility with WPML

Dario
Updated
October 17, 2024

The compatibility of the Avia Layout Builder with WPML is assured through the language configuration file. Learn how to use this file to maintain compatibility.

This page is intended for the Enfold development team, developers who offer a customized version of the page builder, authors who develop Avia Layout Builder add-ons, and web developers using Enfold.

How the Integration of the Avia Layout Builder Works With WPML

To understand how the Avia Layout Builder works with WPML, let us start by creating a simple page using the Avia Layout Builder. We will include a few modules, such as a Text Block, an Icon Box, and a Button.

A simple page created using the Avia Layout Builder

These modules wrap the content in shortcodes:

The shortcodes wrapping the text

To translate the page we created, click on the plus icon found in the language meta-box in the sidebar.

Click on the plus icon to translate the page
Click on the plus icon to translate a page

This opens the page in the Advanced Translation Editor where you can translate your page. Add your translations and click Complete.

Translating the page from the Translation Editor screen

Now, when we view the translated page on the front-end, we can see the translated content.

Translated textual elements showing on the front-end

Updating the Language Configuration File

You might need to update the page builder shortcodes in the language configuration file for different reasons:

  1. Adding a new shortcode to the page builder
  2. Adding a new attribute to an existing shortcode
  3. Removing an obsolete shortcode

You can download the language configuration file from our repository. Add the shortcodes or attributes to the existing shortcodes within the language configuration file.

Page Builder Shortcode Structure in the Language Configuration File

To extract strings from pages built using the Avia Layout Builder and load them on the Translation Editor screen, we need to configure WPML to identify the shortcodes and attributes containing the strings that require translation. This is done by adding a file, called wpml-config.xml, which is typically placed in the root folder of your theme. For Enfold, we are hosting the language configuration file on our servers. It is set to override the local configuration file placed in Enfold’s root folder, ensuring that the configuration file is always up to date.

The wpml-config.xml file is also used to configure the following elements:

  1. Custom fields
  2. Custom taxonomies
  3. Admin texts / wp_options
  4. Language switcher configuration
  5. Page builder shortcodes

See our detailed documentation to learn more about the language configuration file structure and syntax.

As an example, let us see how we added the Button shortcode to the wpml-config.xml file:

<wp-config>
   <shortcodes>
      <shortcode>
         <tag>av_button</tag>
         <attributes>
            <attribute>label</attribute>
            <attribute type="link" encoding="av_link">link</attribute>
         </attributes>
      </shortcode>
   </shortcodes>
</wp-config>

The structure of the above example can be broken down as follows:

  • All the shortcodes are wrapped with the main shortcodes (plural) tag.
  • The shortcode (singular) tag wraps all the tags belonging to one, single shortcode.
  • The tag tag defines the name of the shortcode, which in this case, is the av_button.
  • Shortcodes can have one or more attributes; hence, we wrap them in the attributes (plural) tag and use the attribute (singular) tag to define the title of each attribute. In this case, we have the label and link attributes.

For shortcodes that include link attributes, you can make internal links automatically point to the translated version of that post by using the type option “link” for the attribute as shown in the previous example.

Testing the Language Configuration File

To test the updated language configuration file, follow these steps:

  1. Set up an installation with both Enfold and WPML activated. Activate the String Translation and Media Translation add-ons.
  2. You need to override the remote language configuration file with the updated one. To do this, navigate to WPML → Settings page and click the Custom XML Configuration tab. Copy the content of your updated language configuration file to the editor and click Save.
Overriding the remote language configuration file with the updated one
  1. Create a new page, and add the new module(s) to it. If you updated some attributes for existing modules, add these to the page as well. In this example, we will assume that the Button module was newly added to the Avia Layout Builder. Add it to the page and Publish.
Add the new module to the page as part of testing the language configuration file
  1. Click on the plus icon to translate the page. This takes you to the Advanced Translation Editor screen.
  2. Ensure that the module’s text is displayed in the Advanced Translation Editor.
  3. Add your translations, then click Complete to save and apply the translations.
Translating text elements as part of testing the updated language file configuration
  1. Check the translated page on the front-end.
Working translation on the front-end from an updated language configuration file

The translated page shows all the translated strings, implying that the updated language configuration file is working properly. If you are encountering any issues, please contact our compatibility development team. They will be happy to check issues related to the language configuration file.

Once done with the tests, please submit a merge request to our repository. Our compatibility developers will receive your request and review it.

Known Issues

There are no unresolved compatibility issues between this plugin and WPML. Search all known issues.