Internationalization: Preparing Your WordPress Theme for the Rest of the World

@LisaSabinWilson - webdevstudios.com | September 19, 2013
Preparing Your Theme For
The World
Internationalization
Monday, September 23, 13

Lisa Sabin-Wilson
WordPress since 2003
Making a living on WP
since 2005
Author: WordPress For
Dummies
@LisaSabinWilson

Remember, no matter where
you go ... there you are.
~ Confucius

WordPress is International
Make sure your themes are too!

Imagine an internet like this.
If you speak Chinese - it’s great! Not so great if
you don’t.

Internationalization (I18n)
The practice of making your theme translation
ready.

Localization (l10n)
The practice of translating an internationalized
theme into a different language.

Internationalization (I18n)
YOU ARE NOT ACTUALLY TRANSLATING IT.
(Unless you really want to.)
You are developing your
theme to make it possible
for someone else to
translate it.

Text Domain
<?php _e(‘Plugin Name’, ‘text-domain’); ?>
Deﬁnes which theme owns the translation-ready
text and tells the GetText utility to return the
translations only from the dictionary supplied with
that name.

Text Domain
*MOST* theme authors use the name of their
theme as the text domain to make it easy to
identify which language ﬁles belong to what
theme.

Text Domain
<?php _e(‘Plugin Name’, ‘startbox’); ?>
Use a unique name here so you don’t conﬂict
with other language libraries in your WordPress
installation.

Theme Functions
Define the textdomain in your Theme Functions
file. This tells WordPress where your theme stores
the language files and what the textdomain for
your theme is.

Theme Functions
1st Parameter: texdomain
This is the textdomain for the theme: lswtheme

Theme Functions
2nd Parameter: location of language ﬁles
get_template_directory() . ‘/languages’
wp-content/themes/lswtheme/lanugages/

Two Basic GetText functions
_e (underscore + small case e)
&
__ (two underscores)

_e
Use this to wrap HTML text
strings within a GetText function
call.

Example of _e in use:
<h2>Plugin Name</h2>
becomes
<?php _e(‘Plugin Name’, ‘text-domain’); ?>

__
Use this to wrap PHP text
strings within a GetText function
call.

Unlike _e ...
__ is used when you need
to add a string of text to an
EXISTING function call

Example of __ in use:
<?php the_content( ‘Read More’ ); ?>
becomes:
<?php the_content( __(‘Read More’, ‘text-domain’) ); ?>

Use of _e or __ identiﬁes
which strings of text are
available for translation.

Other functions
_n , _nx, _x, _ex, esc_attr_e(), esc_attr__(),
esc_html__(), esc_html_e()
Some resources to read:
http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong
http://wp.smashingmagazine.com/2011/12/29/internationalizing-localizing-wordpress-
theme
http://codex.wordpress.org/I18n_for_WordPress_Developers

Without these functions, the
GetText localization utility
will ignore the text and
those text strings will not be
translatable on the ﬂy.

Is Translatable even a word?

YES!

You want your themes to be
eminently translatable.

i18n Tips
Do not put HTML markup inside your GetText
functions. Translators should not have the ability
to change your markup.
Not this:
<?php _e(‘<h2>Title</h2>’, ‘text-domain’); ?>
Do this:
<h2><?php _e(‘Title’,‘text-domain’); ?></h2>

i18n Tips
Acknowledge international date formats by
allowing users to set their own formats in
Settings-->General in their Dashboard.
Not this:
the_time(‘F j, Y’);
Do this:
the_time( get_option('date_format') )

i18n Tips
Google Fonts and other font packs
Not all font packs are made equal. Some do not
support cyrillic languages (Russian, Japanese, etc) or
languages with western european characters (Polish,
etc).

i18n Tips
RTL (Right to Left) Support
Some languages read/write right to left
(RTL): Arabic, Hebrew, Urdu

i18n Tips
Create a stylesheet for RTL:
style-rtl.css

i18n Tips
is_rtl();
Checks if current locale is RTL.
if ( is_rtl() ) {
wp_enqueue_style('rtl',
get_stylesheet_directory_uri().'/css/
rtl.css’);
}

i18n Tips
RTL (Right to Left) Support - CSS
Start by adding this to your body selector in your
style-rtl.css:
body {
direction: rtl;
unicode-bidi: embed;
}

i18n Tips
RTL (Right to Left) Support - CSS
Go through your CSS line by line to create RTL
support for each selector.
Some hints:
http://codex.wordpress.org/Right-to-
Left_Language_Support

i18n Tips
RTL (Right to Left) Support - Testing
RTL Tester
This plugin adds a button to the admin bar that allow
super admins to switch the text direction of the site.
It can be used to test WordPress themes and plugins
with Right To Left (RTL) text direction.
http://wordpress.org/plugins/rtl-tester/

Language Files
Once your theme is fully internationalized...
Create a .pot ﬁle and include it in your /languages
folder

Language Files
.pot stands for Portable Object Template.
Contains a list of all translatable messages in your
theme.

Language Files
.po stands for Portable Object.
Created when you translate a .pot ﬁle to a speciﬁc
language - contains Human Readable text.

Language Files
.mo stands for Machine Object.
A binary ﬁle created automatically by translation
software - - is NOT human readable.

Example default .po ﬁle
From StartBox: http://wpstartbox.com

Example .po ﬁle
msgid = text string available for translation
msgstr = translated text

Example .po ﬁle
Notice: the msgstr string is blank in the default
ﬁle.

Example fr_FR.po ﬁle
Notice: the msgstr string is ﬁlled in with the
French translation of the msgid

.pot | .po | .mo
How do you create these ﬁles?

Translation Tools
Poedit: http://poedit.com
GlotPress: http://glotpress.org
GNU GetText: http://gnu.org/software/gettext

Translation Plugins for
WordPress
WPML:
http://wpml.org/
WP Native Dashboard:
http://wordpress.org/plugins/wp-native-dashboard/
Codestyling Localization:
http://wordpress.org/plugins/codestyling-localization/

The End.
Thank you for listening.

Internationalization: Preparing Your WordPress Theme for the Rest of the World

More Related Content

Similar to Internationalization: Preparing Your WordPress Theme for the Rest of the World

Recently uploaded

Internationalization: Preparing Your WordPress Theme for the Rest of the World