Translate a theme

Yoav Farhi
@yoavf, yoav@farhi.org
http://blog.yoavfarhi.com
Monday, September 6, 2010
 Prerequisites
To get the most out of this
presentation you should be familiar
with the basic structure of a
WordPress theme and have a good
grasp of CSS.

Monday, September 6, 2010

 ?
Monday, September 6, 2010
Monday, September 6, 2010
Monday, September 6, 2010
 right to left
i18n
Monday, September 6, 2010
 right to left

Monday, September 6, 2010

 rtl

Monday, September 6, 2010

 The ugly way

The right way

Monday, September 6, 2010

 Ugly

Directly edit the

style.css file

Monday, September 6, 2010

 Why ugly?

Monday, September 6, 2010

 Why ugly?
No updates

Monday, September 6, 2010

 Why ugly?
No updates
Cannot redistribute

Monday, September 6, 2010

 Why ugly?
No updates
Cannot redistribute
Hard with child themes
Monday, September 6, 2010
 Right

Create an rtl.css file

Monday, September 6, 2010

 rtl.css

Monday, September 6, 2010

 rtl.css

Monday, September 6, 2010

 rtl.css
The Basics
Text Alignment
Floats
Positioning
Padding, Margin and Borders
Fonts
Backgrounds

Monday, September 6, 2010

 The basics

body {
direction:rtl;
unicode-bidi:embed;
}

Monday, September 6, 2010

 The basics

input#url {
direction:ltr;
}

Monday, September 6, 2010

Monday, September 6, 2010
 Text Alignment
style.css #body {
text-align: left;
}

rtl.css #body {
text-align: right;
}

Monday, September 6, 2010

Monday, September 6, 2010
 Positioning
style.css #menu {
position: absolute;
right: 2px;
top: 0;
}

rtl.css #menu {

Monday, September 6, 2010

 Positioning
style.css #menu {
position: absolute;
right: 2px;
top: 0;
}

rtl.css #menu {
right: auto;
left: 2px;
}

Monday, September 6, 2010

Monday, September 6, 2010
 The Box Model

Diagram CC http://css.flepstudio.org/en/css-box-model/introduction.html

Monday, September 6, 2010

 The Box Model
style.css #content {
margin: 30px 14em 0 3em;
padding-right: 60px;
border-right: 1px dashed #000;
}

rtl.css #content {

}
Monday, September 6, 2010
 The Box Model
style.css #content {
margin: 30px 14em 0 3em;
padding-right: 60px;
border-right: 1px dashed #000;
}

rtl.css #content {
margin: 30px 3em 0 14em;

}
Monday, September 6, 2010
 The Box Model
style.css #content {
margin: 30px 14em 0 3em;
padding-right: 60px;
border-right: 1px dashed #000;
}

rtl.css #content {
margin: 30px 3em 0 14em;
padding-right: 0;
padding-left: 60px;

}
Monday, September 6, 2010
 The Box Model
style.css #content {
margin: 30px 14em 0 3em;
padding-right: 60px;
border-right: 1px dashed #000;
}

rtl.css #content {
margin: 30px 3em 0 14em;
padding-right: 0;
padding-left: 60px;
border-right: none;
border-left: 1px dashed #000;
}
Monday, September 6, 2010
Monday, September 6, 2010
 Floats
style.css #content h2 {
float: right;
clear: left;
}

rtl.css #content h2{

float: left;
clear: right;
}

Monday, September 6, 2010

Monday, September 6, 2010
 Backgrounds
style.css #header a {
background: url(grey-s.png) 0 0 no-repeat;
}

rtl.css #header {
background-position: 100% 0;

Monday, September 6, 2010

 Backgrounds
style.css #header a {
background: url(grey-s.png) 0 0 no-repeat;
}

rtl.css #header {
background-position: 100% 0;
background-image: url(header-rtl.png);
}

Monday, September 6, 2010

 Backgrounds
style.css #header a{
background: url(header.png) 22px 0 no-repeat;
}

rtl.css #header a{

background-position: ??? 0;
}

Monday, September 6, 2010

Monday, September 6, 2010
 Fonts

use basic sans-serif fonts

no italics

Monday, September 6, 2010

 Fonts
style.css
#header, h3, #menu ul li {
font: italic 230% Times, serif;
}

#header, h3, #menu ul li {

rtl.css
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
}

Monday, September 6, 2010

Monday, September 6, 2010
 Basic classes
style.css .alignleft {
float: left;
}

rtl.css
Don’t!

Monday, September 6, 2010

Monday, September 6, 2010
Monday, September 6, 2010
 right to left

Monday, September 6, 2010

 right to left
i18n
Monday, September 6, 2010
 i18n ?

Monday, September 6, 2010

 i18n ?
internationalization
18
Monday, September 6, 2010
 The ugly way

The right way

Monday, September 6, 2010

 Ugly

Translate in the
template files

Monday, September 6, 2010

 Right
Create po/mo
translation files

Monday, September 6, 2010

 How
Wrap your strings
Generate the .POT file
Distribute (and translate)

Monday, September 6, 2010

 Wrap your strings

Monday, September 6, 2010

 functions
_e( 'text' )
__( 'text' )
esc_attr_e( 'text' )
_x( 'text' , 'comment' )
_n( '1 comment', ' Lots of
comments ', $count )

Monday, September 6, 2010

 _e( 'text' )
=
echo the translation

Monday, September 6, 2010

 _e( 'text' )

<div class="meta">Filed Under [...]

<div class="meta"><?php _e( "Filed Under", 'mytheme' ); ?>[...]

Monday, September 6, 2010

 __( 'text' )
=
pass the translation

Monday, September 6, 2010

 __( 'text' )

<?php the_tags('Tags: '); ?>

<?php the_tags( __('Tags: ', mytheme) ); ?>

Monday, September 6, 2010

 the textdomain

_e( 'text', 'mytheme' )

__( 'text', 'mytheme' )
separates the translation from the core
WordPress translation

Monday, September 6, 2010

 for more info, check out:
wp-includes/l10n.php

Monday, September 6, 2010

 Generate the .POT file

Monday, September 6, 2010

 1.Start POEdit

http://poedit.net

Monday, September 6, 2010

 2.File -> New Catalog...

Monday, September 6, 2010

 3. Enter Project name

Monday, September 6, 2010

 4. Paths -> New item -> '. '

Monday, September 6, 2010

 5. Keywords -> New item -> '__'

Monday, September 6, 2010

 5. New item -> '_e'

Monday, September 6, 2010

 6. Save POT in theme dir

Monday, September 6, 2010

 7. POEdit will find strings

Monday, September 6, 2010

 8. Translate

Monday, September 6, 2010

 9. Save as lang_code.po

Monday, September 6, 2010

 10. load_theme_textdomain

functions.php
load_theme_textdomain( 'mytheme', get_template_directory() );

Monday, September 6, 2010

Monday, September 6, 2010
 Almost done

Monday, September 6, 2010

 Almost done
RTL Tester plugin

Monday, September 6, 2010

 Almost done
RTL Tester plugin

CSS Janus (RTLize your css)

Monday, September 6, 2010

 Almost done
RTL Tester plugin

CSS Janus (RTLize your css)

The codex

Monday, September 6, 2010

 Almost done
RTL Tester plugin

CSS Janus (RTLize your css)

The codex

Multilingual Plugins

Monday, September 6, 2010

 Questions?
@yoavf, yoav@farhi.org
http://blog.yoavfarhi.com
Monday, September 6, 2010