WPML How to translate value in OptionTree?

WPML is a plugin that is used to translate wordpress text to different language.

Warning: To understand how to translate values in OptionTree, you need to write PHP code, which means, you need to know how to program using PHP, how Wordpress Plugin works, and ideally, how to write a wordpress plugin.  Otherwise you will find very difficult to understand what the below content means.

I am using WPML 2.8.2.

And if you normally buy theme from ThemeForest.net, chance are you will see some themes that is using OptionTree to save theme value.

However, there are situation when, you enter some display text in admin panel, and you want to translate those text.

As of this writing, according to this reply, WPML is not compatible with OptionTree.  Although you can use some workarounds as described in that post, that workaround is actually OUTDATED and may not be applicable to you.

To understand the solution, you need to understand how OptionTree works first.

How OptionTree works?

If you click on the "Save Changes" button, ALL THE VALUES will be saved to wp_options table.  The option names are: option_tree and option_tree_settings.

• option_tree_settings: Save the structure and default value
• option_tree: Save the value you input in array format.

When needed, a function called ot_get_option() will be used to get the value from option_tree.  

The Solution

Under this workflow, all you need to do are two things (FYI: here is the WPML developer documentation):

1. When settings are saved, add a translation using icl_register_string()
2. When setting is fetched, use icl_t() to translate the text.

The action hook that we are using is ot_after_theme_options_save, which is called when options in OptionTree are saved.

Putting it in action:

This function first define what input values should be translated.  (In this example, I put it under theme's functions.php file)

Step 1:

if(!function_exists('some_function')){

function some_function($options){
if(count($options['hs_promos']) > 0){
$i = 1;
foreach($options['hs_promos'] as $promo){
icl_register_string('context_name', 'context_label_'.$i, $promo['title']);
$i+=1;
}
}
return $options;
}
add_action('ot_after_theme_options_save', 'some_function');
}

This function does the following:

1. Check if defined function exists before
2. If yes, check if an option saved in OptionTree (in this case hs_promos) has value or not.
3. If value exists, use icl_register_string() to register the string that needs to be translated.  All three parameters should be entered because, later on we would use these values to retrieve the translation
4. Attach this function to ot_after_theme_options_save.

Save this file, go back to wordpress and click "Save Changes" in OptionTree.  Then go back to WPML > String Translation.  You should be able to see your newly registered string appear there.

Step 2:

This line will simply fetch the value from WPML, based on the language your website is using:

icl_t('context_name', 'context_label_1', $promo['title']);

Hope it helps someone.