WordPress theme internationalization (i18n)

Translate a theme

Yoav Farhi

@yoavf, [email protected]://blog.yoavfarhi.com

Monday, September 6, 2010

mailto:[email protected]


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



right to lefti18n


right to left


rtl


The ugly way

The right way


Ugly

Directly edit the style.css file


Why ugly?


Why ugly?

No updates


Why ugly?

No updatesCannot redistribute


Why ugly?

No updatesCannot redistribute

Hard with child themes


Right

Create an rtl.css file


rtl.css


rtl.css


rtl.cssThe Basics

Text Alignment

Floats

Positioning

Padding, Margin and Borders

Fonts

Backgrounds


The basics

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


The basics

input#url { direction:ltr; }



Text Alignment

#body { text-align: left;}

#body { text-align: right;}

rtl.css

style.css



Positioning

#menu { position: absolute; right: 2px; top: 0;}

#menu {

}

rtl.css

style.css


Positioning

#menu { position: absolute; right: 2px; top: 0;}

#menu {

}

rtl.css

style.css

right: auto; left: 2px;



The Box Model

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


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

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

The Box Model

#content { margin: 30px 14em 0 3em; padding-right: 60px; border-right: 1px dashed #000;}

#content {

}

rtl.css

style.css


The Box Model


#content {

}

rtl.css

style.css

margin: 30px 3em 0 14em;


The Box Model


#content {

}

rtl.css

style.css

padding-right: 0; padding-left: 60px;



The Box Model


#content {

}

rtl.css

style.css

padding-right: 0; padding-left: 60px; border-right: none; border-left: 1px dashed #000;




Floats

#content h2 { float: right; clear: left;}

#content h2{ float: left; clear: right; }

rtl.css

style.css



Backgrounds

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

#header { background-position: 100% 0;

}

rtl.css

style.css


Backgrounds

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

#header { background-position: 100% 0;

}

rtl.css

style.css

background-image: url(header-rtl.png);


Backgrounds

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

#header a{

background-position: ??? 0;}

rtl.css

style.css



Fonts

use basic sans-serif fontsno italics


Fonts

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

#header, h3, #menu ul li { font-family: Arial, Helvetica, sans-serif; font-style: normal;}

rtl.css

style.css



Basic classes

rtl.css

style.css .alignleft { float: left;}

Don’t!




right to left


right to lefti18n


i18n ?


internationalization

18

i18n ?


The ugly way

The right way


Ugly

Translate in the template files


Right

Create po/mo translation files


How

Wrap your strings Generate the .POT file

Distribute (and translate)


Wrap your strings


_e( 'text' )__( 'text' )

esc_attr_e( 'text' )_x( 'text' , 'comment' )

_n( '1 comment', ' Lots of comments ', $count )

functions


_e( 'text' ) =

echo the translation


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

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

_e( 'text' )


__( 'text' ) =

pass the translation


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

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

__( 'text' )


_e( 'text', 'mytheme' )__( 'text', 'mytheme' )

separates the translation from the core WordPress translation

the textdomain


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


Generate the .POT file


http://poedit.net

1.Start POEdit


http://poedit.net

http://poedit.net

http://sourceforge.net/projects/poedit/

http://sourceforge.net/projects/poedit/

2.File -> New Catalog...


3. Enter Project name


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


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


5. New item -> '_e'


6. Save POT in theme dir


7. POEdit will find strings


8. Translate


9. Save as lang_code.po


10. load_theme_textdomain

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



Almost done


Almost doneRTL Tester plugin



CSS Janus (RTLize your css)




The codex




The codex

Multilingual Plugins


Questions?

@yoavf, [email protected]://blog.yoavfarhi.com




Documents

WordPress theme internationalization (i18n)