Maintaining the CornerStone Page Builder (X Theme) Compatibility with WPML

Dario

Updated

June 4, 2025

This page is for the CornerStone development team and web developers using the CornerStone page builder. It explains the process of maintaining the compatibility of the CornerStone with WPML, which is done by updating the language configuration file.

In Register Custom Page Builder Widgets for Translation, we explain in detail how to register custom page builder widgets for translation using a language configuration file. Now, let’s check the information needed to achieve this for Cornerstone widgets.

Finding the Widget’s Registration Information

To be able to register a Cornerstone custom widget within the wpml-config.xml file, you first need to find some basic information about it.

You can easily get this information from the _cornerstone_data custom field or by using a plugin like JSM Show Post Metadata. This plugin shows post metadata and their unserialized values in a metabox at the bottom of post editing pages.

Alternatively, you can use the following steps to get this information:

1. Go to the WPML → Settings page, scroll to the Custom Fields Translation section and click the Show system field link.
2. Set _cornerstone_data custom field to Translate.
3. Create a new page and add only the CornerStone widget you wish to register. Save the page.
4. Go to WPML → Settings and in the Translation Editor section, temporarily activate the Classic Translation Editor option.
5. Try to translate the page you created in Step 3 using the Classic Translation Editor, and you’ll notice a serialized array, like this:

6. Copy the content of the serialized array.
7. Use your preferred unserialize tool to better see how the widget is outputting its content. In our case, we used the Unserialize site.

Here is the explanation of the array’s content you will see:

• [_type] contains the name inserted in the widget’s tag name attribute.
• The field value will be the name inside the brackets that will contain the field’s name. For example:[testimonial_content] => You are never too old to set another goal or to dream a new dream. In this case, “title” is the text you need.

Once you have this information, you can proceed with actually registering the widget for translation.

For example, the Testimonial widget that comes with Cornerstone brings a similar structure to this one on its _cornerstone_data custom field. With this information, the widget should be registered as follows to be able to be detected and translated by WPML:

This, of course, is not necessary as the Testimonial widget is already registered by default by WPML in our repository. But it serves as an example for your custom widgets.

Testing the language configuration file

Once you have created your configuration file, follow these steps to test if everything is registered as expected:

1. Set up an installation having both CornerStone and WPML activated. Activate the String Translation, Translation Management, and Media Translation add-ons.
2. You will need to override WPML’s 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.

3. 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 Testimonial module was newly added to the CornerStone Page Builder. Add it to the page, and Publish.

4. Click on the plus icon to translate the page. This will take you to the Translation Editor screen.
5. Ensure that the module textual elements are displayed on the Advanced Translation Editor screen.
6. Fill in your translated text and click on the Complete Translation button.

7. Check the translated page 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.