Building Multilingual WordPress Themes

You’ve just built a great theme, but how can you get more people to use it? Why not turn it into a multilingual theme? All the steps you’ll need to follow to get your brand new theme internationalized and localized. You’ll learn about gettext, Poedit, POT files GlotPress, and more.

Level: Intermediate/Advanced designer, Beginner developer

Prerequisites: Good knowledge of WordPress themes.

Presented on April 27 at WordCamp Ottawa 2013.

Transcript

1. April 27, 2013 Building Multilingual WordPress Themes WordCamp Ottawa 2013
2. Shannon Smith Web Developer Café Noir Design www.cafenoirdesign.com @cafenoirdesign
3. What We’ll Cover ✤ Introduction ✤ Get a multilingual CMS ✤ Internationalize ✤ Localize ✤ After the Theme ✤ Closing
4. Introduction
5. Why build multilingual themes? Photo: nevsred
6. Defining Multilingual ✤ Multilingual vs. Unilingual (but not English) Image: wpbeginner
7. Step 0: Get a Multilingual CMS Photo:Dave Q
8. Step -1: WordPress in Your Language 1.Install WordPress 2.Install Language Files http://codex.wordpress.org/ WordPress_in_Your_Language
9. Help! I can’t find my language! 1.Download the WordPress Translation Files http://svn.automattic.com/wordpress-i18n/ 2.Translate Core Files 3.Install Language Files http://codex.wordpress.org/WordPress_in_Your_Language
10. Find Your Peeps! ❖WordPress Polyglots http://make.wordpress.org/polyglots/ Photo: Joelk75
11. Find Your Project! ❖ L10n:Localization Teams http://codex.wordpress.org/ L10n:Localization_Teams
12. Step 1: Internationalize Photo:andrechinn
13. i18n i18n = internationalization ʨ 18 letters i n
14. Internationalize “The first step is when the program's developers provide a mechanism and method for the eventual translation of the program and its interface to suit local preferences and languages for users worldwide.” http://codex.wordpress.org/Translating_WordPress
15. GNU gettext Localization ❖ Text Domain ❖ Message-Level Translation ❖ POT File http://codex.wordpress.org/Translating_WordPress http://www.gnu.org/software/gettext/gettext.html Photo:liza31337
16. Text Domains
17. Define Text Domain <?php load_theme_textdomain( $domain, $path ) ?> http://codex.wordpress.org/Function_Reference/load_theme_textdomain
18. Twenty-Twelve : Define Text Domain
19. Define Text Domain // Make theme available for translation // Translations can be filed in the /languages/ directory load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' ); $locale = get_locale(); $locale_file = TEMPLATEPATH . "/languages/$locale.php"; if ( is_readable($locale_file) ) require_once($locale_file); http://codex.wordpress.org/Function_Reference/load_theme_textdomain
20. Using the Text Domain <?php $translated_text = __( 'text', 'domain' ); ?> http://codex.wordpress.org/Function_Reference/load_theme_textdomain
21. Message-Level Translation
22. Message-level Translation PHP return statement → __('message') PHP echo statement → _e('message')
23. What is the difference? ❖ PHP echo statement: outputs whatever you tell it to the browser ❖ PHP return statement: returns a value from a function
24. Twenty-Twelve Echo Statement _e('message')
25. Twenty-Twelve Return Statement __('message')
26. Simple Strings http://codex.wordpress.org/I18n_for_WordPress_Developers echo '<h2>' . __( 'Blog Options' ) . '</h2>'; echo __( 'Using this option you will make a fortune!' ); _e( 'Using this option you will make a fortune!' );
27. Strings With Placeholders http://codex.wordpress.org/I18n_for_WordPress_Developers printf( __( 'Your zip code is %2$s, and your city is %1$s.' ), $city, $zipcode );
28. Strings With Plurals http://codex.wordpress.org/I18n_for_WordPress_Developers printf( _n( 'We deleted %d spam message.', 'We deleted %d spam messages.', $count ), $count );
29. Disambiguation http://codex.wordpress.org/I18n_for_WordPress_Developers http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/ $string = _x( 'Buffalo', 'an animal', 'plugin- domain' ); $string = _x( 'Buffalo', 'a city in New York', 'plugin- domain' ); $string = _x( 'Buffalo', 'a verb meaning to confuse somebody', 'plugin-domain' ); /* translators: draft saved date format, see http:// php.net/date */ $draft_saved_date_format = __( 'g:i:s a' );
30. Otto’s Unbreakable Laws of i18n http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/ ❖ Thou shalt not use PHP variables of any kind inside a translation function’s strings. ❖ Thou shalt always translate phrases and not words. ❖ Thou shalt disambiguate when needed. ❖ Thou shalt not put unnecessary HTML markup into the translated string.
31. Automate Adding Text Domains http://codex.wordpress.org/I18n_for_WordPress_Developers php add-textdomain.php -i domain phpfile phpfile ...
32. POT File
33. What Is a POT File? Photo:dbrekke
34. GNU gettext Files ❖ POT (Portable Object Template) files ❖ PO (Portable Object) files ❖ MO (Machine Object) files http://codex.wordpress.org/Translating_WordPress
35. POT (Portable Object Template) files ❖ only file required for i18n ❖ includes every message passed into a __() or _e() function http://codex.wordpress.org/Translating_WordPress
36. POT (Portable Object Template) files
37. How do I get a POT file? Photo:zzpza
38. Option A: Poedit
39. Option B: WordPress-i18n Tools ❖ SVN the WordPress-i18n tools and run the makepot.php script http://codex.wordpress.org/User:Skippy/Creating_POT_Files php makepot.php wp-theme your-theme-directory ❖ Deprecated in favour of GlotPress
40. Option C: GlotPress ❖ Download and install locally
41. Isn’t there a plugin for that?
42. Option D: Codestyling Localization Plugin
43. Option E: ICanLocalize Service
44. Step 2: Localize Photo:slightly everything
45. L10n L10n = Localization ʨ 10 letters L n
46. Localize “The second step is the actual localization, the process by which the text on the page and other settings are translated and adapted to another language and culture, using the framework prescribed by the developers of the software.” http://codex.wordpress.org/Translating_WordPress
47. Localize
48. Localize
49. Language & Locale ❖ en_US – US English ❖ en_UK – UK English
50. GNU gettext Files ❖ POT (Portable Object Template) files ❖ PO (Portable Object) files ❖ MO (Machine Object) files http://codex.wordpress.org/Translating_WordPress
51. Create an MO File
52. What a MO File Looks Like
53. Define Your WordPress Locale
54. Step 3: Profit! Photo:Hub☺
55. Step 3: Multilingual Website Photo:Hub☺
56. Everything after the Theme ✤ Plugins ✤ Widgets ✤ Language Switcher ✤ Translated Content ✤ Plugin (WPML) or WordPress Multisite
57. Closing
58. Shannon Smith Web Developer Café Noir Design www.speakerdeck.com/cafenoirdesign www.cafenoirdesign.com www.chroni.ca @cafenoirdesign
59. Thank You Image: woodleywonderworks