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 Lisa Sabin-Wilson WordPress

    since 2003 Making a living on WP since 2005 Author: WordPress For Dummies @LisaSabinWilson
  2. @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.
  3. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Localization (l10n) The

    practice of translating an internationalized theme into a different language.
  4. @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.
  5. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Text Domain <?php

    _e(‘Plugin Name’, ‘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.
  6. @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.
  7. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Text Domain <?php

    _e('Plugin Name', 'startbox'); ?> Use a unique identifier here so you don’t conflict with other language libraries in your WordPress installation. Use dashes, not underscores.
  8. @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.
  9. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Theme Functions 1st

    Parameter: text domain This is the text domain for the theme: lswtheme
  10. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Theme Functions 2nd

    Parameter: location of language files ! get_template_directory() . '/languages' wp-content/themes/lswtheme/lanugages/
  11. @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.
  12. @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
  13. @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.
  14. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Two Basic GetText

    functions _e (underscore + small case e) & __ (two underscores)
  15. @LisaSabinWilson - webdevstudios.com | December 7, 2013 _e Use this

    to wrap HTML text strings within a GetText function call.
  16. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Example of _e

    in use: <h2>Plugin Name</h2> ! becomes ! <?php _e('Plugin Name', 'text-domain'); ?>
  17. @LisaSabinWilson - webdevstudios.com | December 7, 2013 __ Use this

    to wrap PHP text strings within a GetText function call.
  18. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Unlike _e ...

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

    in use: ! <?php the_content( 'Read More' ); ?> ! becomes: ! <?php the_content( __('Read More', 'text-domain') ); ?>
  20. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Use of _e

    or __ identifies which strings of text are available for translation.
  21. @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
  22. @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.
  23. @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 );
  24. @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.
  25. @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: <?php _e('<h2>WordSesh</h2>', 'text-domain'); ?> ! Do this: <h2><?php _e('WordSesh','text-domain'); ?></h2>
  26. @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 );
  27. @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') )
  28. @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). !
  29. @LisaSabinWilson - webdevstudios.com | December 7, 2013 i18n Tips RTL

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

    (Right to Left) Support ! Create a stylesheet for RTL: style-rtl.css !
  31. @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'); } !
  32. @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; }
  33. @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 !
  34. @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/ !
  35. @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
  36. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Language Files .pot

    stands for Portable Object Template. ! Contains a list of all translatable messages in your theme.
  37. @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.
  38. @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.
  39. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Example .po file

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

    Notice: the msgstr string is blank in the default file.
  41. @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
  42. @LisaSabinWilson - webdevstudios.com | December 7, 2013 Translation Tools Poedit:

    http://poedit.com GlotPress: http://glotpress.org GNU GetText: http://gnu.org/software/gettext
  43. @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/