Translating WordPress Themes To Hebrew Ninjutsu

Defense.gov News Photo 960509-O-000PP-004

Shameless Self Promotion

My name is Ido Schacham

I make kick ass WordPress sites for small businesses & intuitive web UIs for startups

www.idosius.com

idosius.com QR code

Topics

Hokusai sketches - hokusai manga vol6
  1. Why Like This?

  2. Action!

  3. Tips

  4. Questions?

wptlv.idosius.com

Why Like This?

Tons of beautiful WordPress themes out there

...in English only

Solution - Theme Translation!

Action!

Seoi Nage - Ninjutsu
  1. Check opening HTML tag

  2. Modify CSS

  3. Mirror images

  4. Create Text Translations

Check opening HTML tag

  1. Find theme header file/s

    header.php, head.php, something-header.php, etc.

  2. Look for the opening html tag/s

    <html ... >

    * ... stands for other attributes that can appear there

  3. Check it includes language_attributes()

    <html <?php language_attributes(); ?>>

    Result with Hebrew WordPress:

    <html dir="rtl" lang="he-IL">

Modify CSS

Change CSS properties/values to RTL

Usually in style.css, check for other *.css files

  1. left ↔ right

  2. margin, padding

  3. background

Modify CSS

left ↔ right

Relevant for: margin, padding, border, float, left, right
Don't change CSS selectors!

Before

.content-left {
  border-right: 1px black solid;
  float: left;
  margin-left: 1em;
  padding-right: 55px;
  position: absolute;
  right: 40px;
}

After

.content-left {
  border-left: 1px black solid;
  float: right;
  margin-right: 1em;
  padding-left: 55px;
  position: absolute;
  left: 40px;
}

Modify CSS

margin, padding

margin: top right bottom left → margin: top left bottom right

Before

#header {
  margin: 10px 20px 10px 55px;
  padding: 1em 3.3em 1em 5em;
}

After

#header {
  margin: 10px 55px 10px 20px;
  padding: 1em 5em 1em 3.3em;  
}

Modify CSS

background

Tricky...

Modify CSS

background

left/right used for screen positioning → switch

Before

.hot {
  background-position: left 10px;
}

#footer {
  background: url(hot.gif) left 0 no-repeat ;
}

After

.hot {
  background-position: right 10px;
}

#footer {
  background: url(hot.gif) right 0 no-repeat ;
}

Modify CSS

background

Pixels used for screen positioning → measure new pixels manually

Before

.hot {
  background-position: 15px 10px;
}

#footer {
  background: url(hot.gif) 2em 0 no-repeat ;
}

After

.hot {
  background-position: 45px 10px;
}

#footer {
  background: url(hot.gif) 22em 0 no-repeat ;
}

Modify CSS

background

Used for CSS sprites → leave as is

Before

.mail-icon {
  background-position: 15px 10px;
}

#footer {
  background: url(sprites.png) 2em 0 no-repeat ;
}

Before

.mail-icon {
  background-position: 15px 10px;
}

#footer {
  background: url(sprites.png) 2em 0 no-repeat ;
}

Modify CSS

Hadouken! R2 Node.js script does most of the above automatically

  1. Node.js source: is.gd/r2nodejs
  2. Online version: is.gd/r2ido
hadouken!

Usage tips

  1. Format CSS after useage, e.g. with procssor.com
  2. Manually change background properties
  3. Test & fix results

Mirror Images

Use your favorite image editor, e.g. Paint.Net

Before

 Call Us
 דברו איתנו

After

 דברו איתנו

Create Text Translations

How does WordPress translate?

Code

<?php 
$s = 'Comments';
echo __($str, 'mytheme') . '!';
_e('Search', 'mytheme'); 
?>

Result

תגובות!
חפש

Create Text Translations

Theme preparations

  1. Use __() or _e() for all theme strings
  2. Create Hebrew MO file
  3. Load locale in functions.php:
    load_theme_textdomain( 'mytheme', TEMPLATEPATH.'/languages' );
    $locale = get_locale();
    $locale_file = TEMPLATEPATH . "/languages/$locale.php";
    if ( is_readable($locale_file) )
      require_once($locale_file);

Create Text Translations

Use __() or _e() for all theme strings

Before

<h2>Not Found</h2>
 
<?php comment_form_title( 'Leave a Reply' ); ?>

After

<h2><?php _e('Not Found', 'mytheme'); ?></h2>

<?php comment_form_title( __('Leave a Reply', 'mytheme') ); ?>

Create Text Translations

Good developer - *.po files exist

  1. Download & install Poedit

  2. Create he_IL.po via copy & rename

  3. Open he_IL.po with Poedit

  4. Translate each text to Hebrew

  5. Save to create he_IL.mo

Create Text Translations

Bad developer - no *.po files :(

  1. Run Poedit

  2. File > New catalog

    1. Fill Project Info

    2. Add path to theme, e.g. C:\workspace\mytheme

    3. Add _e to keywords

  3. Translate each text to Hebrew

  4. Save to create he_IL.mo

Finito!

Tips

  1. Make a copy of the theme

  2. Check browsers, IE sucks

  3. Debug CSS with Firebug or Chrome Inspector

  4. Child theming

  5. rtl.css

  6. Consult a pro

Questions

  1. How do I send translated names to JavaScript?

    Use wp_localize_script.

  2. Why shouldn't I change the strings directly in the PHP files?

    If terms appear in several files, you'll need to update it just once in a PO file. Plus it'll be easier to add multilingual capabilities to the site

  3. Is there a way to handle plurals via a function?

    Yes, use _n

Comments

  1. The Codestyling Localization plugin does what you said.

    Cool, check it out.

  2. jQuery plugins, e.g., for sliders, may malfunction in RTL

    Add direction: ltr; to the relevant CSS section to fix the issue.

  3. Firebug also exists for Chrome

    Ido's note - still looks like it's Firebug Lite.

  4. IE has its own debugger

    True. It shows up when hitting F12, but it's rather lacking. Try using Firebug Lite.

Thanks!

Ninjutsu (Naruto) (246375091)

www.idosius.com

/

#