Preparing Your Theme for the World

@LisaSabinWilson - webdevstudios.com | December 7, 2013
Preparing Your Theme For
The World
Internationalization

View Slide

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

View Slide

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

View Slide

When in
Rome
… 
do as the
Romans do.
~ St. Ambrose

View Slide

WordPress is International
Make sure your themes are too!

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide


View Slide

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.

View Slide

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

View Slide

Text Domain

Use a unique identiﬁer here so you don’t conﬂict
with other language libraries in your WordPress
installation. Use dashes, not underscores.

View Slide

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

View Slide

Theme Functions
1st Parameter: text domain
This is the text domain for the theme: lswtheme

View Slide

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

View Slide

Theme Functions - 3.7
WordPress 3.7 supports language packs.
!
Include headers in your theme (or plugin)
in order for translations to be most
effective.

View Slide

The text domain should be IDENTICAL to the
plugin folder name.
If your theme is: /themes/my-theme
Your text domain: my-theme

View Slide

The Domain Path is optional.
If you want to include your own translations ﬁles,
use it - otherwise it will use the language pack
system.

View Slide

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

View Slide

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

View Slide

Example of _e in use:
Plugin Name
!
becomes
!

View Slide

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

View Slide

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

View Slide

Example of __ in use:
!

!
becomes:

!

View Slide

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

View Slide

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

View Slide

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

View Slide

Is Translatable even a word?

View Slide

YES!

View Slide

You want your themes to be
eminently translatable.

View Slide

i18n Tips
Do not place PHP variables inside a translation
function (Thanks Otto!)
Not this:
$string = __("You have $number tacos", 'plugin-
domain');
!
Do this:
$string = sprintf( __('You have %d tacos',
'plugin-domain'), $number );

View Slide

i18n Tips
Translation relies on looking up strings in a table
and then translating them. The list of strings to
be translated is built by an automated process.
Some code scans your PHP code, without
executing it, and pulls out all the __()’s it ﬁnds,
then builds the list of strings to be translated.
That scanning code cannot possibly know what
is inside $string.

View Slide

i18n Tips
Do not put HTML markup inside your GetText
functions. Translators should not have the ability
to change your markup.
Not this:
WordSesh', 'text-domain'); ?>
!
Do this:

View Slide

i18n Tips
Mind your plurals! Use the _n function for this -
it will use ﬁrst string if the $number (third
parameter to _n) is one, or the second one if it’s
more than one.
!
$string = sprintf( _n('You have %d beer.', 'You
have %d beers.', $number, 'plugin-domain'),
$number );

View Slide

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

View Slide

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

!

View Slide

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

!

View Slide

i18n Tips
!
Create a stylesheet for RTL:

style-rtl.css

!

View Slide

i18n Tips
is_rtl();

Checks if current locale is RTL.

if ( is_rtl() ) {
wp_enqueue_style('rtl',
get_stylesheet_directory_uri().'/css/
rtl.css');
}

!

View Slide

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

View Slide

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

!

View Slide

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/

!

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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/

View Slide

The End.
Thank you for listening.

View Slide

Preparing Your Theme for the World

Preparing Your Theme for the World

Lisa Sabin-Wilson

More Decks by Lisa Sabin-Wilson

Other Decks in Technology

Featured

Transcript