This tutorial is for advanced WordPress developers, if you are a WPML client and would like to know how to use Beaver Builder with WPML, check our tutorial on translating websites built with Beaver builder using WPML.

Translating Beaver Builder modules is done by custom code in WPML. The code is available now on GitHub in the – Beaver Builder code for WPML on GitHub.

This code uses three hooks as described here – In this example.

When a post is saved the JSON structure for the layout is read and parsed and all the strings found are registered for translation.

This is the key file that defines the modules in our GitHub.

This file defines the structure of the modules and lists the fields that we need to translate for each module type and the type of field to use for translation.

Eg. For the ‘rich-text’ field we have this structure:

rich-text-field
'rich-text'      => array(
  'conditions' => array( 'type' => 'rich-text' ),
  'fields'     => array(
     array(
        'field'       => 'text',
        'type'        => __( 'Text Editor', 'wpml-string-translation' ),
        'editor_type' => 'VISUAL'
     ),
  ),
),

This specifies that the ‘rich-text’ module has one field for translation. It is ‘field’ and ‘text’ and it should be edited with the Visual Editor. The ‘type’ is the label for the field that’s shown in the text editor.

We can also add more advanced modules in the modules directory.These modules are generally modules that allow having multiple items like sliders, accordions, etc.