Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Big in Japan : A guide to WordPress theme internationalization

Big in Japan : A guide to WordPress theme internationalization

You’ve just built a great theme, but how can you get more people to use it? All the steps you’ll need to follow to get your brand new theme internationalized and localized. If gettext, Poedit, POT files GlotPress, all seem like a foreign language to you, this session will change that. Prerequisites: Good knowledge of WordPress themes.

Shannon Smith is the founder of Café Noir Design, a boutique Montreal web design company specializing in multilingual web development. She builds beautiful, functional websites that her clients can update themselves and that are easy for search engines to find.


Shannon Smith

July 26, 2013

More Decks by Shannon Smith

Other Decks in Technology


  1. WordCamp San Francisco 2013 Shannon Smith Big A guide to

    theme internationalization in Japan
  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 0 : 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 Framework • 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

  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 Get The Slides:

    http://chroni.ca www.cafenoirdesign.com @cafenoirdesign