• i18n stands for “internationalization”
• L10n stands for “localization”
• Both are numeronyms, or “number based words”.
• The numbers come from the number of characters in between the “i” and the “n”. You can read all about their storied history here and here.

How i18n (internationalization) works in WordPress

By wrapping some text in a nifty PHP function, we allow that text to be translated into another language.

<?php esc_html_e( 'This text will be translated', 'text-domain' ); ?>

Or

$foo = esc_html__( 'This text will also be translated', 'text-domain' );

Or

echo '<h1 class="title">' . esc_html__( 'An awesome post title will be translated as well', 'text-domain' ) . '</h1>';

All three of those examples will be translated. All three of them do the exact same thing. Check out the WordPress Codex, read this post from Otto, and check out the video from Lisa Sabin-Wilson (below) to learn how to properly “Internationalize” your theme or plugin.

Lisa’s slides via Slideshare

How L10n (localization) can help

If you’ve ever looked at the source code of any WordPress run web site, then you’ve seen:

/* <![CDATA[ ]]> */

and thought? “What is this wacky code?” It’s localization in action! Here is a real world example (from my Radio Theme) using localization to pass variables onto jQuery:

/* <![CDATA[ */
var radioL10n = {"nivo_effect":"random","nivo_speed":"3000","fb_app_id":"123940271011545"};
/* ]]> */

Here is /wp-content/themes/radio/lib/js/radio.js

// Load Default Nivo Settings
jQuery(document).ready(function($) {
 'use strict';
 $("#slider").nivoSlider({
   effect: radioL10n.nivo_effect,
   pauseTime: radioL10n.nivo_speed
 });
});

// Access to Facebook's API
 window.fbAsyncInit = function() {
 FB.init({
   appId : radioL10n.fb_app_id
 });
});

Notice the radioL10n.nivo_effect in the above code? That is the jQuery script looking for our localized “nivo_effect:random” variable. Now, I can grab settings from the theme options page and pass them to jQuery through localization.

Here’s a working snippet from my Radio Theme’s options page, where I use wp_localize_script();

/**
 * Load theme scripts.
 *
 * @author Greg Rickaby
 * @since 1.0.0
 */
function scripts() {

  /** Enqueue theme custom script */
  wp_enqueue_script( 'radio', CHILD_URL . '/lib/js/radio.js', array( 'jquery' ), '1.0', true );

  /** Pass value from PHP to JS */
  $params = array(
    'nivo_effect' => genesis_get_option( 'nivo_effect', $settings_field ),
    'nivo_speed' => genesis_get_option( 'nivo_speed', $settings_field ),
    'fb_app_id' => genesis_get_option( 'station_facebook_app_id', $settings_field )
  );
  wp_localize_script( 'radio', 'radioL10n', $params );
}

Find out more about using localization in your theme by reading the WordPress Codex

Image Credit: Adam Baker