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
   

   View Slide

2. Shannon Smith
   Web Developer
   Café Noir Design
   www.cafenoirdesign.com
   @cafenoirdesign
   

   View Slide

3. What We’ll Cover
   ✤ Introduction
   ✤ Get a multilingual CMS
   ✤ Internationalize
   ✤ Localize
   ✤ After the Theme
   ✤ Closing
   

   View Slide

4. Introduction
   

   View Slide

5. Why build multilingual themes?
   Photo: nevsred
   

   View Slide

6. Defining Multilingual
   ✤ Multilingual vs.
   Unilingual (but not
   English)
   Image: wpbeginner
   

   View Slide

7. Step 0: Get a
   Multilingual CMS
   Photo:Dave Q
   

   View Slide

8. Step -1: WordPress in Your
   Language
   1.Install WordPress
   2.Install Language Files
   http://codex.wordpress.org/
   WordPress_in_Your_Language
   

   View Slide

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
   

   View Slide

10. Find Your
    Peeps!
    ❖WordPress Polyglots
    http://make.wordpress.org/polyglots/
    Photo: Joelk75
    

    View Slide

11. Find Your Project!
    ❖ L10n:Localization
    Teams
    http://codex.wordpress.org/
    L10n:Localization_Teams
    

    View Slide

12. Step 1:
    Internationalize
    Photo:andrechinn
    

    View Slide

13. i18n
    i18n = internationalization
    ʨ
    18 letters
    i n
    

    View Slide

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
    

    View Slide

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
    

    View Slide

16. Text Domains
    

    View Slide

17. Define Text Domain
    
    http://codex.wordpress.org/Function_Reference/load_theme_textdomain
    

    View Slide

18. Twenty-Twelve : Define Text Domain
    

    View Slide

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
    

    View Slide

20. Using the Text Domain
    
    http://codex.wordpress.org/Function_Reference/load_theme_textdomain
    

    View Slide

21. Message-Level Translation
    

    View Slide

22. Message-level Translation
    PHP return statement → __('message')
    PHP echo statement → _e('message')
    

    View Slide

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
    

    View Slide

24. Twenty-Twelve Echo Statement
    _e('message')
    

    View Slide

25. Twenty-Twelve Return Statement
    __('message')
    

    View Slide

26. Simple Strings
    http://codex.wordpress.org/I18n_for_WordPress_Developers
    echo '' . __( 'Blog Options' ) . '';
    echo __( 'Using this option you will make a fortune!' );
    _e( 'Using this option you will make a fortune!' );
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

31. Automate Adding Text Domains
    http://codex.wordpress.org/I18n_for_WordPress_Developers
    php add-textdomain.php -i domain phpfile
    phpfile ...
    

    View Slide

32. POT File
    

    View Slide

33. What Is a POT
    File?
    Photo:dbrekke
    

    View Slide

34. GNU gettext Files
    ❖ POT (Portable Object Template) files
    ❖ PO (Portable Object) files
    ❖ MO (Machine Object) files
    http://codex.wordpress.org/Translating_WordPress
    

    View Slide

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
    

    View Slide

36. POT (Portable Object Template) files
    

    View Slide

37. How do I get a
    POT file?
    Photo:zzpza
    

    View Slide

38. Option A: Poedit
    

    View Slide

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
    

    View Slide

40. Option C: GlotPress
    ❖ Download and install locally
    

    View Slide

41. Isn’t there a plugin for that?
    

    View Slide

42. Option D: Codestyling
    Localization Plugin
    

    View Slide

43. Option E: ICanLocalize Service
    

    View Slide

44. Step 2:
    Localize
    Photo:slightly everything
    

    View Slide

45. L10n
    L10n = Localization
    ʨ
    10 letters
    L n
    

    View Slide

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
    

    View Slide

47. Localize
    

    View Slide

48. Localize
    

    View Slide

49. Language & Locale
    ❖ en_US – US English
    ❖ en_UK – UK English
    

    View Slide

50. GNU gettext Files
    ❖ POT (Portable Object Template) files
    ❖ PO (Portable Object) files
    ❖ MO (Machine Object) files
    http://codex.wordpress.org/Translating_WordPress
    

    View Slide

51. Create an MO File
    

    View Slide

52. What a MO File Looks Like
    

    View Slide

53. Define Your WordPress Locale
    

    View Slide

54. Step 3: Profit!
    Photo:Hub☺
    

    View Slide

55. Step 3:
    Multilingual
    Website
    Photo:Hub☺
    

    View Slide

56. Everything after the Theme
    ✤ Plugins
    ✤ Widgets
    ✤ Language Switcher
    ✤ Translated Content
    ✤ Plugin (WPML) or WordPress Multisite
    

    View Slide

57. Closing
    

    View Slide

58. Shannon Smith
    Web Developer
    Café Noir Design
    www.speakerdeck.com/cafenoirdesign
    www.cafenoirdesign.com
    www.chroni.ca
    @cafenoirdesign
    

    View Slide

59. Thank You
    Image: woodleywonderworks
    

    View Slide