How to translate strings in WordPress Customizer

Home/Documentation/How to translate strings in WordPress Customizer

Most of themes are now on the move from “Option Panels” to the WordPress Customizer.

For the users, the process of customizing the theme becomes more standardized: the Customizer’s interface is the same for all themes. For the WPGlobus Team, supporting Customizer was quite a complicated issue – until the Version 1.3.0 released on The Back To The Future Day.

The “classic” approach (WPML) was to edit all texts in a special “String Editor” module. WPGlobus’ approach is more intuitive: translate where you enter the texts, and not somewhere else!

Let’s take a look at the process of theme customization:

Strings in Customizer - the process

Once you Add and Activate a new theme, WordPress prompts you to customize it. Click the “Customize” button, go to the Customizer screen, change the options, enter all texts and Save.

WordPress saves your edits in the wp_options database table. Then, the theme’s code uses WP API methods to retrieve the options from the database. When it’s about texts, the theme outputs them to the screen.

For example, the Zerif Lite theme shown on the screen above, uses a similar code to display the “Big Title”:

// Retrieve the title from options
$zerif_bigtitle_title = get_theme_mod( ‘zerif_bigtitle_title’,
__(‘ONE OF THE TOP …’,’zerif-lite’));
// Print the title
if( !empty($zerif_bigtitle_title) ):
echo $zerif_bigtitle_title;

The get_theme_mod retrieves the title from the database. Then, echo prints it.

Now, what’s with translation? Where is WPGlobus in all this?

WPGlobus stores multilingual strings using special delimiters:

Multilingual text in WPGlobus format

So, if you enter a text using this format…

Wait, do not go away, you won’t be entering this!
It’s just a little bit of technical background… please continue reading :)

…then WPGlobus could parse it and extract the portion for the current language…


…if the theme authors were applying the recommended filter before printing on the screen:

// Apply filter before output
echo apply_filters( ‘the_title’, $zerif_bigtitle_title );

Because there is no filter in the code, WPGlobus needs to intercept the get_theme_mod and extract the relevant portion of text there. For that, we need to install, activate and setup the WPGlobus Translate Options plugin (free).

WPGlobus Translate Options - Zerif Theme

As long as WPGlobus Translate Options is setup to hook into the theme_mods_zerif-lite, no additional filters are required in the theme.

Great! Now, how to enter the multilanguage texts in Customizer?

For that, your theme should come with the WPGlobus Configuration File. We started building a collection of configuration files for popular free themes on GitHub. If your favorite theme is not there, let us know. Even more important – let the theme authors know!

Here is a small presentation on how the multilingual editing works in Customizer when the theme is multilingual-ready:

2015-10-23T17:29:32+00:00 October 23rd, 2015|Documentation|