Translating Customizer and Theme Options

Dario

Originally written

May 30, 2016

Updated

December 28, 2018

WPML allows you to translate contents of the Customizer or different theme options as like sliders, footer, and widgets.

Strings coming from these theme options sometimes do not appear for translation automatically. In that case, you need to find the options first, make them translatable and then translate them.

Finding the theme options and making them translatable

To make the theme options translatable go to the WPML -> String Translation page and click the Translate texts in admin screens option.

On this page, you have to find the right option. Usually, theme options are listed somewhere below theme_mods_{themename}.

The following image shows an example, where we looked for the WP Real Estate Pro theme’s options and found them under WP Pro Real Estate 6_options.

Theme options are presented in a tree view and inside, we found the sliders stored under the name ct_flex_slider. We checked all slide titles to make them translatable.

Translating the theme options

Now that the theme options are marked as translatable, they appear on the WPML->String Translation page. You translate them just like any other strings.

The following image shows our slides on the front-end after we translated all the slide title strings.

Other types of theme options

Besides slides, you can use this approach for translating any other theme options.

For example, custom Widgets are usually found under options named similar to widget_{widget_name}.

Translating your theme options directly on the theme options panel

You may face situations where you need to assign a different value for your theme options directly from the options panel. This is possible with WPML API since 3.9.3 version, however, it requires adding some code and using the wpml_multilingual_options function.

Translating your Favicon

Since WordPress 4.3, WordPress implemented a Site Icon feature that enables favicon in your web site. You only need to specify a square image that is at least 512 pixels in width and height, from the Appearance -> Customize screen.

1. Click the “Site Identity” in the Customizer menu.	2. Add or change a “Site Icon”.

As you can see, Site Icon is a Customizer option, so its translation is not different than for any other option. Basically, it takes the ID of the image you select to be your Site Icon and uses it for displaying on the front-end.

To use different images as Site Icons in other languages, you need to “translate” this ID by specifying the appropriate image IDs for this option in other languages.

Let’s do this step by step!

Go to the WPML -> String Translation page and click the Translate texts in admin screens link at the bottom of the page. On the next page, scroll down until you find the site_icon option. Select it and click on the Apply button to save your options.

Now, this option is available on the String Translation panel and you need to translate it. In order to do this, you need to add the ID of your image that will correspond to the favicon translation.

The next step is to obtain the ID of that image. For this, you need to upload a new favicon image on the Dashboard –> Media Library page. When you hover your new image, you can see its ID on the URL as displayed in the image below.

Alternatively, you can select it and take note of the URL ID. Both are perfectly fine and point to the same ID. In our example it is 2217.

Finally, go to the WPML –> String Translation page and select the admin_texts_site_icon domain using the top search. Under this domain, you will find your site_icon. Translate it by adding the ID or your new favicon.

Resolving issues with MaxInputVars value

If you encounter a problem during saving this could be due to a to low value of MaxInputVars. To check the minimum MaxInputVars value required to save the page do the following:

1. Go to WPML -> String translation and open a Translate texts in admin screens link.
2. Open your browser’s console and go to Console tab. Each browser has a different way for invoking a console. In Google Chrome you need to press F12 on your keyboard and in Mozilla Firefox shortcut is Shift+Control+K.
3. Enter command jQuery('input').length into Console tab and press Enter.

The value that is returned is the minimal MaxInputVars value required to save the page.

To increase PHP limit for max_input_vars you need to edit either php.ini or .htaccess file. Let us say that you want to increase max_input_vars value to 10000. You could one of the following:

• • add line max_input_vars = 10000 to php.ini
  • add line php_value max_input_vars 10000 to .htaccess

If you do not have permission to change your server settings you can ask your hosting provider to increase the value of MaxInputVars.

If you can not increase the value of MaxInputVars you can add strings to translation with wpml-config.xml file.