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

Preparing Your Theme for the World

Preparing Your Theme for the World

Internationalize Your WordPress Themes

Lisa Sabin-Wilson

September 23, 2013
Tweet

More Decks by Lisa Sabin-Wilson

Other Decks in Technology

Transcript

  1. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Preparing Your Theme For
    The World
    Internationalization

    View Slide

  2. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Lisa Sabin-Wilson
    WordPress since 2003
    Making a living on WP
    since 2005
    Author: WordPress For
    Dummies
    @LisaSabinWilson

    View Slide

  3. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Remember, no matter where
    you go ... there you are.
    ~ Confucius

    View Slide

  4. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    When in
    Rome
    …

    do as the
    Romans do.
    ~ St. Ambrose

    View Slide

  5. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    WordPress is International
    Make sure your themes are too!

    View Slide

  6. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Imagine an internet like this.
    If you speak Chinese - it’s great! Not so great if
    you don’t.

    View Slide

  7. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Internationalization (I18n)
    The practice of making your theme translation
    ready.

    View Slide

  8. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Localization (l10n)
    The practice of translating an internationalized
    theme into a different language.

    View Slide

  9. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Internationalization (I18n)
    YOU ARE NOT ACTUALLY TRANSLATING IT.
    !
    You are developing your
    theme to make it possible
    for someone else to
    translate it.

    View Slide

  10. @LisaSabinWilson - webdevstudios.com | December 7, 2013

    View Slide

  11. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    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.

    View Slide

  12. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Text Domain
    *MOST* theme authors use the name of their
    theme as the text domain to make it easy to
    identify which theme the language files belong
    to.

    View Slide

  13. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Text Domain

    Use a unique identifier here so you don’t conflict
    with other language libraries in your WordPress
    installation. Use dashes, not underscores.

    View Slide

  14. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions
    Define the text domain in your Theme Functions
    file. This tells WordPress where your theme stores
    the language files and what the text domain for
    your theme is.

    View Slide

  15. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions
    1st Parameter: text domain
    This is the text domain for the theme: lswtheme

    View Slide

  16. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions
    2nd Parameter: location of language files
    !
    get_template_directory() . '/languages'
    wp-content/themes/lswtheme/lanugages/

    View Slide

  17. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions - 3.7
    WordPress 3.7 supports language packs.
    !
    Include headers in your theme (or plugin)
    in order for translations to be most
    effective.

    View Slide

  18. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions - 3.7
    The text domain should be IDENTICAL to the
    plugin folder name.
    If your theme is: /themes/my-theme
    Your text domain: my-theme

    View Slide

  19. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Theme Functions - 3.7
    The Domain Path is optional.
    If you want to include your own translations files,
    use it - otherwise it will use the language pack
    system.

    View Slide

  20. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Two Basic GetText functions
    _e (underscore + small case e)
    &
    __ (two underscores)

    View Slide

  21. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    _e
    Use this to wrap HTML text
    strings within a GetText function
    call.

    View Slide

  22. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example of _e in use:
    Plugin Name
    !
    becomes
    !

    View Slide

  23. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    __
    Use this to wrap PHP text
    strings within a GetText function
    call.

    View Slide

  24. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Unlike _e ...
    __ is used when you need
    to add a string of text to an
    EXISTING function call

    View Slide

  25. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example of __ in use:
    !

    !
    becomes:

    !

    View Slide

  26. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Use of _e or __ identifies
    which strings of text are
    available for translation.

    View Slide

  27. @LisaSabinWilson - webdevstudios.com | December 7, 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

    View Slide

  28. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Without these functions, the
    GetText localization utility
    will ignore the text and
    those text strings will not be
    translatable on the fly.

    View Slide

  29. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Is Translatable even a word?

    View Slide

  30. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    YES!

    View Slide

  31. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    You want your themes to be
    eminently translatable.

    View Slide

  32. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    Do not place PHP variables inside a translation
    function (Thanks Otto!)
    Not this:
    $string = __("You have $number tacos", 'plugin-
    domain');
    !
    Do this:
    $string = sprintf( __('You have %d tacos',
    'plugin-domain'), $number );

    View Slide

  33. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    Translation relies on looking up strings in a table
    and then translating them. The list of strings to
    be translated is built by an automated process.
    Some code scans your PHP code, without
    executing it, and pulls out all the __()’s it finds,
    then builds the list of strings to be translated.
    That scanning code cannot possibly know what
    is inside $string.

    View Slide

  34. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    Do not put HTML markup inside your GetText
    functions. Translators should not have the ability
    to change your markup.
    Not this:
    WordSesh', 'text-domain'); ?>
    !
    Do this:

    View Slide

  35. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    Mind your plurals! Use the _n function for this -
    it will use first string if the $number (third
    parameter to _n) is one, or the second one if it’s
    more than one.
    !
    $string = sprintf( _n('You have %d beer.', 'You
    have %d beers.', $number, 'plugin-domain'),
    $number );

    View Slide

  36. @LisaSabinWilson - webdevstudios.com | December 7, 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') )

    View Slide

  37. @LisaSabinWilson - webdevstudios.com | December 7, 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).

    !

    View Slide

  38. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    RTL (Right to Left) Support
    !
    Some languages read/write right to left
    (RTL): Arabic, Hebrew, Urdu

    !

    View Slide

  39. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    i18n Tips
    RTL (Right to Left) Support
    !
    Create a stylesheet for RTL:

    style-rtl.css

    !

    View Slide

  40. @LisaSabinWilson - webdevstudios.com | December 7, 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');
    }

    !

    View Slide

  41. @LisaSabinWilson - webdevstudios.com | December 7, 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;
    }

    View Slide

  42. @LisaSabinWilson - webdevstudios.com | December 7, 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

    !

    View Slide

  43. @LisaSabinWilson - webdevstudios.com | December 7, 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/

    !

    View Slide

  44. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Language Files
    Once your theme is fully internationalized...
    !
    Create a .pot file and include it in your /languages
    folder

    View Slide

  45. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Language Files
    .pot stands for Portable Object Template.
    !
    Contains a list of all translatable messages in your
    theme.

    View Slide

  46. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Language Files
    .po stands for Portable Object.
    !
    Created when you translate a .pot file to a specific
    language - contains Human Readable text.

    View Slide

  47. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Language Files
    .mo stands for Machine Object.
    !
    A binary file created automatically by translation
    software - - is NOT human readable.

    View Slide

  48. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example default .po file
    From StartBox: http://wpstartbox.com

    View Slide

  49. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example .po file
    msgid = text string available for translation
    msgstr = translated text

    View Slide

  50. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example .po file
    Notice: the msgstr string is blank in the default
    file.

    View Slide

  51. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Example fr_FR.po file
    Notice: the msgstr string is filled in with the
    French translation of the msgid

    View Slide

  52. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    .pot | .po | .mo
    How do you create these files?

    View Slide

  53. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    Translation Tools
    Poedit: http://poedit.com
    GlotPress: http://glotpress.org
    GNU GetText: http://gnu.org/software/gettext

    View Slide

  54. @LisaSabinWilson - webdevstudios.com | December 7, 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/

    View Slide

  55. @LisaSabinWilson - webdevstudios.com | December 7, 2013
    The End.
    Thank you for listening.

    View Slide