Previous Post: Remove WordPress’s Version Number
Script Localization for WordPress
There are many WordPress plugins out there that use Javascript to add AJAX1 support to their applications. Since everything related to WordPress should be internationalized, i.e. ready for translation, AJAX applications need to be translatable, too. AJAX basically means no (or little) page reloading and for that reason you will have to echo localized data directly on a page so that your Javascript file can use them (server-side l10n function will not work in client-side scripts, of course).
An example of this could be WP-Polls, a very popular poll plugin. If you used it, you would be able to see the following snippet near the closing </body> tag:
- <script type='text/javascript'>
- /* <![CDATA[ */
- var pollsL10n = {
- ajax_url: "http://example.com/wp-content/plugins/wp-polls/wp-polls.php",
- text_wait: "Your last request is still being processed. Please wait a while ...",
- text_valid: "Please choose a valid poll answer.",
- text_multiple: "Maximum number of choices allowed: ",
- show_loading: "1",
- show_fading: "1"
- };
- /* ]]> */
- </script>
- <script type='text/javascript' src='http://www.example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.50'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var pollsL10n = {
ajax_url: "http://example.com/wp-content/plugins/wp-polls/wp-polls.php",
text_wait: "Your last request is still being processed. Please wait a while ...",
text_valid: "Please choose a valid poll answer.",
text_multiple: "Maximum number of choices allowed: ",
show_loading: "1",
show_fading: "1"
};
/* ]]> */
</script>
<script type='text/javascript' src='http://www.example.com/wp-content/plugins/wp-polls/polls-js.js?ver=2.50'></script>Those ‘text_’ things are simply localized string that are used within poll-js.js and they are internationalized using a magic function called wp_localize_script()2. Below is how WP-Polls currently does that (in wp-polls.php):
- wp_enqueue_script('wp-polls', plugins_url('wp-polls/polls-js.js'), array('jquery'), '2.50', true);
- wp_localize_script('wp-polls', 'pollsL10n', array(
- 'ajax_url' => plugins_url('wp-polls/wp-polls.php'),
- 'text_wait' => __('Your last request is still being processed. Please wait a while ...', 'wp-polls'),
- 'text_valid' => __('Please choose a valid poll answer.', 'wp-polls'),
- 'text_multiple' => __('Maximum number of choices allowed: ', 'wp-polls'),
- 'show_loading' => intval($poll_ajax_style['loading']),
- 'show_fading' => intval($poll_ajax_style['fading'])
- ));
wp_enqueue_script('wp-polls', plugins_url('wp-polls/polls-js.js'), array('jquery'), '2.50', true);
wp_localize_script('wp-polls', 'pollsL10n', array(
'ajax_url' => plugins_url('wp-polls/wp-polls.php'),
'text_wait' => __('Your last request is still being processed. Please wait a while ...', 'wp-polls'),
'text_valid' => __('Please choose a valid poll answer.', 'wp-polls'),
'text_multiple' => __('Maximum number of choices allowed: ', 'wp-polls'),
'show_loading' => intval($poll_ajax_style['loading']),
'show_fading' => intval($poll_ajax_style['fading'])
));So, to make your script ready for localization, all you have to do is to register or enqueue it (using wp_register_script() or wp_enqueue_script()) and then use wp_localize_script() with a proper object name, as per the codex page, like so:
- wp_enqueue_script('my_handle', url-to-script);
- $l10n_obj = array(
- 'response_error' => __('Incorrect response!', 'domain'),
- 'response_correct' => __('Correct Response!', 'domain')
- );
- wp_localize_script('my_handle', 'my_l10n_obj', $l10n_obj);
wp_enqueue_script('my_handle', url-to-script);
$l10n_obj = array(
'response_error' => __('Incorrect response!', 'domain'),
'response_correct' => __('Correct Response!', 'domain')
);
wp_localize_script('my_handle', 'my_l10n_obj', $l10n_obj);In your script file, use ‘my_l10n_obj’ to get translated strings, like so:
- function response($error)
- {
- if ($error)
- alert(my_l10n_obj.response_error);
- else
- alert(my_l10n_obj.response_correct);
- }
function response($error)
{
if ($error)
alert(my_l10n_obj.response_error);
else
alert(my_l10n_obj.response_correct);
}That’s it! Simple but powerful!
References
- http://www.w3schools.com/ajax/default.asp [↩]
- http://codex.wordpress.org/Function_Reference/wp_locali ... ize_script [↩]
Other Useful Tips
Topics: Javascript
Thank you for posting this! I found it very helpful.