plugin Internationalizing JavaScript

WordPress provides a function called wp_localize_script() that enables you to pass translated text to an external fi le. You can then use the translated strings within your JavaScript

wp_localize_script( $handle, $object_name, $l10n );

Plugin will add two input buttons to the site ’ s footer. When either of the buttons is clicked, a translated message appears. The fi rst step is to create a new plugin folder called ssd - alert - box and place a new PHP fi le called ssd - alert - box.php in this folder. In the ssd - alert - box.php fi le, add your plugin information. Next, you need to load your translation using load_plugin_textdomain. At this point, you need to load your script using the wp_enqueue_script() function. After calling that function, you can localize your script using the wp_localize_script() function. Now you add a couple of fun input buttons to the footer of the site. Notice the use of the esc_attr__() function from earlier in the chapter to translate and escape the value attributes of the buttons. The last step - add a JavaScript fi le called ssd - alert - box - script.js to your plugin folder. After it ’ s created, you can add two functions for displaying the alert boxes on screen. Within the ssd - alert - box - script.js file , add the JavaScript

<?php
/**
 * Plugin Name: ssd Alert Box
 * Plugin URI: http://example.com
 * Description: A plugin example that places two input buttons in the blog footer that when clicked display an alert box.
 * Version: 0.1
 */
 
/* Add the translation function after the plugins loaded hook. */
add_action( 'plugins_loaded', 'ssd_alert_box_load_translation' );
 
/**
 * Loads a translation file if the paged being viewed isn't in the admin.
 *
 * @since 0.1
 */
function ssd_alert_box_load_translation() {
 
    /* If we're not in the admin, load any translation of our plugin. */
    if ( !is_admin() )
        load_plugin_textdomain( 'ssd-alert-box', false, 'ssd-alert-box/languages' );
}
 
/* Add our script function to the print scripts action. */
add_action( 'wp_print_scripts', 'ssd_alert_box_load_script' );
 
/**
 * Loads the alert box script and localizes text strings that need translation.
 *
 * @since 0.1
 */
function ssd_alert_box_load_script() {
 
    /* If we're in the WordPress admin, don't go any farther. */
    if ( is_admin() )
        return;
 
    /* Get script path and file name. */
    $script = trailingslashit( plugins_url( 'ssd-alert-box' ) ) . 'ssd-alert-box-script.js';
 
    /* Enqueue our script for use. */
    wp_enqueue_script( 'ssd-alert-box', $script, false, 0.1 );
 
    /* Localize text strings used in the JavaScript file. */
    wp_localize_script( 'ssd-alert-box', 'ssd_alert_box_L10n', array(
        'ssd_box_1' => __( 'Alert boxes are annoying!', 'ssd-alert-box' ),
        'ssd_box_2' => __( 'They are really annoying!', 'ssd-alert-box' ),
    ) );
}
 
/* Add our alert box buttons to the site footer. */
add_action( 'wp_footer', 'ssd_alert_box_display_buttons' );
 
/**
 * Displays two input buttons with a paragraph.  Each button has an onClick() event that loads
 * a JavaScript alert box.
 *
 * @since 0.1
 */
function ssd_alert_box_display_buttons() {
 
    /* Get the HTML for the first input button. */
    $ssd_alert_box_buttons = '<input type="button" onclick="ssd_show_alert_box_1()" value="' . esc_attr__( 'Press me!', 'ssd-alert-box' ) . '" />';
 
    /* Get the HTML for the second input button. */
    $ssd_alert_box_buttons .= '<input type="button" onclick="ssd_show_alert_box_2()" value="' . esc_attr__( 'Now press me!', 'ssd-alert-box' ) . '" />';
 
    /* Wrap the buttons in a paragraph tag. */
    echo '<p>' . $ssd_alert_box_buttons . '</p>';
}
 
?>
 
//Code snippet ssd - alert - box - script.js
/**
 * Displays an alert box with our first translated message when called.
 */
function ssd_show_alert_box_1() {
    alert( ssd_alert_box_L10n.ssd_box_1 );
}
 
/**
 * Displays an alert box with our second translated message when called.
 */
function ssd_show_alert_box_2() {
    alert( ssd_alert_box_L10n.ssd_box_2 );
}

When translators create translations of your plugin, they use your plugin ’ s POT fi le to create two fi les: ssd - alert - box - $locale.mo and ssd - alert - box - $locale.po. ssd - alert - box is the $domain parameter used in the translation functions throughout the plugin. $locale is a variable that represents the language and regional dialect. Using Poedit from the “ Translating Tools ” section, you can create a POT fi le. You need to input only a few pieces of information, and Poedit does the rest for you.

//lang/ssd-alert-box.pot
msgid ""
msgstr ""
"Project-Id-Version: Tricks localizing\n"
"Report-Msgid-Bugs-To: \n"
"POT-Creation-Date: 2013-06-28 23:34-0600\n"
"PO-Revision-Date: 2013-06-28 23:35-0600\n"
"Last-Translator: Serhii <>\n"
"Language-Team: Serhii\n"
"MIME-Version: 1.0\n"
"Content-Type: text/plain; charset=UTF-8\n"
"Content-Transfer-Encoding: 8bit\n"
"X-Poedit-KeywordsList: _e;__;esc_attr_e;esc_attr__;esc_html_e;esc_html__;_x;_ex;esc_attr_x;esc_html_x;_n;_nx;_n_noop;_nx_noop\n"
"X-Poedit-Basepath: ../\n"
"X-Poedit-SearchPath-0: .\n"
 
#: tom-alert-box.php:48
msgid "Alert boxes are annoying!"
msgstr ""
 
#: tom-alert-box.php:49
msgid "They are really annoying!"
msgstr ""
 
#: tom-alert-box.php:65
msgid "Press me!"
msgstr ""
 
#: tom-alert-box.php:68
msgid "Now press me!"
msgstr ""

Leave a Comment

Fields with * are required.

Please enter the letters as they are shown in the image above.
Letters are not case-sensitive.