internationalization: preparing your wordpress theme for the rest of the world

@LisaSabinWilson - webdevstudios.com | September 19, 2013

Preparing Your Theme For The WorldInternationalization

Monday, September 23, 13


Lisa Sabin-Wilson

WordPress since 2003

Making a living on WP since 2005

Author: WordPress For Dummies

@LisaSabinWilson



Remember, no matter where you go ... there you are.

~ Confucius



WordPress is InternationalMake sure your themes are too!



Imagine an internet like this.If you speak Chinese - it’s great! Not so great if you don’t.



Internationalization (I18n)The practice of making your theme translation ready.



Localization (l10n)The practice of translating an internationalized theme into a different language.



Internationalization (I18n)YOU ARE NOT ACTUALLY TRANSLATING IT.(Unless you really want to.)

You are developing your theme to make it possible for someone else to translate it.



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.



Text Domain*MOST* theme authors use the name of their theme as the text domain to make it easy to identify which language files belong to what theme.



Text Domain<?php _e(‘Plugin Name’, ‘startbox’); ?>

Use a unique name here so you don’t conflict with other language libraries in your WordPress installation.



Theme FunctionsDefine the textdomain in your Theme Functions file. This tells WordPress where your theme stores the language files and what the textdomain for your theme is.



Theme Functions1st Parameter: texdomainThis is the textdomain for the theme: lswtheme



Theme Functions2nd Parameter: location of language files

get_template_directory() . ‘/languages’

wp-content/themes/lswtheme/lanugages/



Two Basic GetText functions

_e (underscore + small case e)

&__ (two underscores)



_eUse this to wrap HTML text

strings within a GetText function call.



Example of _e in use:<h2>Plugin Name</h2>

becomes

<?php _e(‘Plugin Name’, ‘text-domain’); ?>



__Use this to wrap PHP text

strings within a GetText function call.



Unlike _e ...__ is used when you need to add a string of text to an EXISTING function call



Example of __ in use:<?php the_content( ‘Read More’ ); ?>

becomes:

<?php the_content( __(‘Read More’, ‘text-domain’) ); ?>



Use of _e or __ identifies which strings of text are available for translation.



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-wronghttp://wp.smashingmagazine.com/2011/12/29/internationalizing-localizing-wordpress-themehttp://codex.wordpress.org/I18n_for_WordPress_Developers


http://ottopress.com/2012/internationalization-youre-probably-doing-it-wrong/









Without these functions, the GetText localization utility will ignore the text and those text strings will not be translatable on the fly.



Is Translatable even a word?



YES!



You want your themes to beeminently translatable.



i18n TipsDo not put HTML markup inside your GetText functions. Translators should not have the ability to change your markup.Not this:<?php _e(‘<h2>Title</h2>’, ‘text-domain’); ?>

Do this:<h2><?php _e(‘Title’,‘text-domain’); ?></h2>



i18n TipsAcknowledge 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') )



i18n TipsGoogle Fonts and other font packsNot all font packs are made equal. Some do not support cyrillic languages (Russian, Japanese, etc) or languages with western european characters (Polish, etc).



i18n TipsRTL (Right to Left) Support

Some languages read/write right to left (RTL): Arabic, Hebrew, Urdu



i18n TipsRTL (Right to Left) Support

Create a stylesheet for RTL: style-rtl.css



i18n TipsRTL (Right to Left) Supportis_rtl();Checks if current locale is RTL.if ( is_rtl() ) {

wp_enqueue_style('rtl', get_stylesheet_directory_uri().'/css/rtl.css’);

}



i18n TipsRTL (Right to Left) Support - CSS

Start by adding this to your body selector in your style-rtl.css:

body {

direction: rtl; unicode-bidi: embed;

}



i18n TipsRTL (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


http://codex.wordpress.org/Right-to-Left_Language_Support





i18n TipsRTL (Right to Left) Support - TestingRTL TesterThis 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/


http://wordpress.org/plugins/rtl-tester/

http://wordpress.org/plugins/rtl-tester/


Language FilesOnce your theme is fully internationalized...

Create a .pot file and include it in your /languages folder



Language Files.pot stands for Portable Object Template.

Contains a list of all translatable messages in your theme.



Language Files.po stands for Portable Object.

Created when you translate a .pot file to a specific language - contains Human Readable text.



Language Files.mo stands for Machine Object.

A binary file created automatically by translation software - - is NOT human readable.



Example default .po fileFrom StartBox: http://wpstartbox.com


http://wpstartbox.com

http://wpstartbox.com


Example .po filemsgid = text string available for translationmsgstr = translated text



Example .po fileNotice: the msgstr string is blank in the default file.



Example fr_FR.po fileNotice: the msgstr string is filled in with the French translation of the msgid



.pot | .po | .moHow do you create these files?



Translation ToolsPoedit: http://poedit.com

GlotPress: http://glotpress.org

GNU GetText: http://gnu.org/software/gettext


http://poedit.com

http://poedit.com

http://glotpress.org

http://glotpress.org

http://gnu.org/software/gettext

http://gnu.org/software/gettext


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/


http://wpml.org/

http://wpml.org/

http://wordpress.org/plugins/wp-native-dashboard/

http://wordpress.org/plugins/wp-native-dashboard/

http://wordpress.org/plugins/codestyling-localization/

http://wordpress.org/plugins/codestyling-localization/


The End.

Thank you for listening.


internationalization: preparing your wordpress theme for the rest of the world

Technology

internationalized theme

theme authors

theme functions dene

theme translation ready

html text strings

string of text

text domain denes

translationready text