Back to Top

Script Localization for WordPress

Previous Post:

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>

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'])
));

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);

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);
}

That’s it! Simple but powerful!

References

  1. http://www.w3schools.com/ajax/default.asp []
  2. http://codex.wordpress.org/Function_Reference/wp_locali ... ize_script []

Take Social Sharing to
the Next Level with Monarch!

Take Social Sharing to the Next Level with Monarch!
Print Article Trackback Trackback to this Article   Subscribe to Comments RSS Subscribe to Comments RSS

2 Opinions for Script Localization for WordPress

  1. User's Gravatar
    1
    f marchan January 26, 2012 at 3:07 am – Permalink

    Thank you for posting this! I found it very helpful.

  2. User's Gravatar
    2
    Shantell February 8, 2014 at 1:21 am – Permalink

    Hello there, I think your web site could be having
    internet browser compatibility problems. When I look at your web site in Safari, it looks
    fine but when opening in Internet Explorer, it
    has some overlapping issues. I just wanted to give you a quick heads up!
    Aside from that, great website!

Speak Up Your Mind!

An asterisk (*) indicates a required field and must be filled.




  • Web page and e-mail addresses turn into links automatically.
  • Wrap codes in: <code lang=""></code> or <pre lang="" extra="">
  • Lines and paragraphs break automatically.

Next Post: