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

2. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Lisa Sabin-Wilson
WordPress since 2003
Making a living on WP
since 2005
Author: WordPress For
Dummies
@LisaSabinWilson
Monday, September 23, 13

3. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Remember, no matter where
you go ... there you are.
~ Confucius
Monday, September 23, 13

4. @LisaSabinWilson - webdevstudios.com | September 19, 2013
WordPress is International
Make sure your themes are too!
Monday, September 23, 13

5. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Imagine an internet like this.
If you speak Chinese - it’s great! Not so great if
you don’t.
Monday, September 23, 13

6. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Internationalization (I18n)
The practice of making your theme translation
ready.
Monday, September 23, 13

7. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Localization (l10n)
The practice of translating an internationalized
theme into a different language.
Monday, September 23, 13

8. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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.
Monday, September 23, 13

9. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Monday, September 23, 13

10. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Text Domain
<?php _e(‘Plugin Name’, ‘text-domain’); ?>
Defines which theme owns the translation-ready
text and tells the GetText utility to return the
translations only from the dictionary supplied with
that name.
Monday, September 23, 13

11. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Text Domain
*MOST* theme authors use the name of their
theme as the text domain to make it easy to
identify which language files belong to what
theme.
Monday, September 23, 13

12. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Text Domain
<?php _e(‘Plugin Name’, ‘startbox’); ?>
Use a unique name here so you don’t conflict
with other language libraries in your WordPress
installation.
Monday, September 23, 13

13. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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.
Monday, September 23, 13

14. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Theme Functions
1st Parameter: texdomain
This is the textdomain for the theme: lswtheme
Monday, September 23, 13

15. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Theme Functions
2nd Parameter: location of language files
get_template_directory() . ‘/languages’
wp-content/themes/lswtheme/lanugages/
Monday, September 23, 13

16. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Two Basic GetText functions
_e (underscore + small case e)
&
__ (two underscores)
Monday, September 23, 13

17. @LisaSabinWilson - webdevstudios.com | September 19, 2013
_e
Use this to wrap HTML text
strings within a GetText function
call.
Monday, September 23, 13

18. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example of _e in use:
<h2>Plugin Name</h2>
becomes
<?php _e(‘Plugin Name’, ‘text-domain’); ?>
Monday, September 23, 13

19. @LisaSabinWilson - webdevstudios.com | September 19, 2013
__
Use this to wrap PHP text
strings within a GetText function
call.
Monday, September 23, 13

20. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Unlike _e ...
__ is used when you need
to add a string of text to an
EXISTING function call
Monday, September 23, 13

21. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example of __ in use:
<?php the_content( ‘Read More’ ); ?>
becomes:
<?php the_content( __(‘Read More’, ‘text-domain’) ); ?>
Monday, September 23, 13

22. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Use of _e or __ identifies
which strings of text are
available for translation.
Monday, September 23, 13

23. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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
Monday, September 23, 13

24. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Without these functions, the
GetText localization utility
will ignore the text and
those text strings will not be
translatable on the fly.
Monday, September 23, 13

25. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Is Translatable even a word?
Monday, September 23, 13

26. @LisaSabinWilson - webdevstudios.com | September 19, 2013
YES!
Monday, September 23, 13

27. @LisaSabinWilson - webdevstudios.com | September 19, 2013
You want your themes to be
eminently translatable.
Monday, September 23, 13

28. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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>
Monday, September 23, 13

29. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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') )
Monday, September 23, 13

30. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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).
Monday, September 23, 13

31. @LisaSabinWilson - webdevstudios.com | September 19, 2013
i18n Tips
RTL (Right to Left) Support
Some languages read/write right to left
(RTL): Arabic, Hebrew, Urdu
Monday, September 23, 13

32. @LisaSabinWilson - webdevstudios.com | September 19, 2013
i18n Tips
RTL (Right to Left) Support
Create a stylesheet for RTL:
style-rtl.css
Monday, September 23, 13

33. @LisaSabinWilson - webdevstudios.com | September 19, 2013
i18n Tips
RTL (Right to Left) Support
is_rtl();
Checks if current locale is RTL.
if ( is_rtl() ) {
wp_enqueue_style('rtl',
get_stylesheet_directory_uri().'/css/
rtl.css’);
}
Monday, September 23, 13

34. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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;
}
Monday, September 23, 13

35. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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
Monday, September 23, 13

36. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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/
Monday, September 23, 13

37. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Language Files
Once your theme is fully internationalized...
Create a .pot file and include it in your /languages
folder
Monday, September 23, 13

38. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Language Files
.pot stands for Portable Object Template.
Contains a list of all translatable messages in your
theme.
Monday, September 23, 13

39. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Language Files
.po stands for Portable Object.
Created when you translate a .pot file to a specific
language - contains Human Readable text.
Monday, September 23, 13

40. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Language Files
.mo stands for Machine Object.
A binary file created automatically by translation
software - - is NOT human readable.
Monday, September 23, 13

41. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example default .po file
From StartBox: http://wpstartbox.com
Monday, September 23, 13

42. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example .po file
msgid = text string available for translation
msgstr = translated text
Monday, September 23, 13

43. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example .po file
Notice: the msgstr string is blank in the default
file.
Monday, September 23, 13

44. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Example fr_FR.po file
Notice: the msgstr string is filled in with the
French translation of the msgid
Monday, September 23, 13

45. @LisaSabinWilson - webdevstudios.com | September 19, 2013
.pot | .po | .mo
How do you create these files?
Monday, September 23, 13

46. @LisaSabinWilson - webdevstudios.com | September 19, 2013
Translation Tools
Poedit: http://poedit.com
GlotPress: http://glotpress.org
GNU GetText: http://gnu.org/software/gettext
Monday, September 23, 13

47. @LisaSabinWilson - webdevstudios.com | September 19, 2013
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/
Monday, September 23, 13

48. @LisaSabinWilson - webdevstudios.com | September 19, 2013
The End.
Thank you for listening.
Monday, September 23, 13