Translating Customizer and Theme Options

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.