i18n vs L10n

  • 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 _e( 'This text will be translated', 'text-domain' ); ?>

Or

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

Or

echo '<h1 class="title">' . __( '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
Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, built-in Schema.org markup, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child theme that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.


Become a StudioPress Affiliate

Comments

Leave a Reply