Skip Navigation
Home » Documentation » Developers Information » Maintaining the Avada Builder Compatibility with WPML

Maintaining the Avada Builder Compatibility with WPML

Mohamed Khafaja
Updated
October 11, 2021

This documentation is intended for the Avada development team and web developers using Avada. It explains the process of maintaining the compatibility of the Avada Builder with WPML, which is done by updating the language configuration file.

How the integration of the Avada Builder works with WPML

To understand how the Avada builder works with WPML, let us start by creating a simple page using the Avada Builder. We will include a few modules, such as a Text Block, an Alert, and a Flip Box.

A simple page built using the Avada

As you already know, these modules generate shortcodes, which wrap the content. You can see an example of this in the following image:

The shortcodes wrapping the content

To translate the page, click on the plus icon found in the language meta-box on the top right.

Clicking the plus icon to translate the page

This will take you to the Translation Editor screen, where you can translate your page. Fill in your translated text, and choose Translation is complete for each field, then click on the Save & Close button.

When we view the translated page in the Text editing mode, we can now see the translated strings wrapped with the page builder shortcodes.

Translated page showing the translated strings wrapped by the page builder shortcodes

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; and
  3. removing an obsolete shortcode.

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

Page builder shortcode structure in the language configuration file

To extract strings from pages built using the Avada 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 Avada, we are hosting the language configuration file on our servers. It is set to override the local configuration file placed in Avada’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 Flip Box shortcode to the wpml-config.xml file.

Example of the Avada Builder shortcodes in the language configuration file 
<shortcodes>
  <shortcode>
    <tag>fusion_flip_box</tag>
    <attributes>
      <attribute>title_front</attribute>
      <attribute>title_back</attribute>
      <attribute>text_front</attribute>
      <attribute>image</attribute>
    </attributes>
  </shortcode>
</shortcodes>

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

  • All the shortcodes are wrapped with the shortcodes
  • The shortcode 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 fusion_flip_box.
  • 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 title_front, title_back, text_front, and the image

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 for the attribute. Here is an example:

Example of Avada Builder shortcodes that include link attributes 
<shortcode>
   <tag>fusion_soundcloud</tag>
   <attributes>
      <attribute type="link">url</attribute>
   </attributes>
</shortcode>

Testing the language configuration file

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

  1. Set up an installation having both Avada and WPML activated. Activate the String Translation, Translation Management, and Media Translation add-ons.
  2. You will 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
Overriding the remote language configuration file with the updated one
  1. Create a new page, and add the new module(s) to it. In case 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 Avada Builder. Add it to the page, and Publish.
Adding the new module and publishing the page
  1. Click on the plus icon to translate the page. This will take you to the Translation Editor screen.
  2. Ensure that the module textual elements are displayed on the Translation Editor screen.
  3. Fill in your translated text. Select Translation is complete for each field, then click on the Save & Close button.
Translate the textual elements and click Save and Close
  1. Check the translated page on the front-end.
Translation working on the front-end

The translated page shows all the translated strings, implying that the updated language configuration file is working properly. In case 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 requests and review it.