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

Building Multilingual WordPress Themes

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.

275e113775bcd075ff1923687986b9a8?s=128

Shannon Smith

April 27, 2013
Tweet

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