This document discusses how to make a WordPress theme support right-to-left languages. It recommends creating an rtl.css file to override styles for right-to-left instead of directly editing style.css. It provides examples of how to adjust various CSS properties like text alignment, positioning, box model properties, floats, backgrounds and fonts. It also discusses internationalization support through gettext functions, generating a POT file for translations, and testing RTL functionality.

1. Translate a theme
Yoav Farhi
@yoavf, yoav@farhi.org
http://blog.yoavfarhi.com

2. 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.

3. ?

6. right to left
i18n

7. right to left

8. rtl

9. The ugly way
The right way

10. Ugly
Directly edit the
style.css file

11. Why ugly?

12. Why ugly?
No updates

13. Why ugly?
No updates
Cannot redistribute

14. Why ugly?
No updates
Cannot redistribute
Hard with child themes

15. Right
Create an rtl.css file

16. rtl.css

17. rtl.css

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

19. The basics
body {
direction:rtl;
unicode-bidi:embed;
}

20. The basics
input#url {
direction:ltr;
}

22. Text Alignment
style.css #body {
text-align: left;
}
rtl.css #body {
text-align: right;
}

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

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

27. The Box Model
Diagram CC http://css.flepstudio.org/en/css-box-model/introduction.html

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

29. 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;
}

30. 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;
}

31. 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;
}

33. Floats
style.css #content h2 {
float: right;
clear: left;
}
rtl.css #content h2{
float: left;
clear: right;
}

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

36. 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);
}

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

39. Fonts
use basic sans-serif fonts
no italics

40. 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;
}

42. Basic classes
style.css .alignleft {
float: left;
}
rtl.css
Don’t!

45. right to left

46. right to left
i18n

47. i18n ?

48. i18n ?
internationalization
18

49. The ugly way
The right way

50. Ugly
Translate in the
template files

51. Right
Create po/mo
translation files

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

53. Wrap your strings

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

55. _e( 'text' )
=
echo the translation

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

57. __( 'text' )
=
pass the translation

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

59. the textdomain
_e( 'text', 'mytheme' )
__( 'text', 'mytheme' )
separates the translation from the core
WordPress translation

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

61. Generate the .POT file

62. 1.Start POEdit
http://poedit.net

63. 2.File -> New Catalog...

64. 3. Enter Project name

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

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

67. 5. New item -> '_e'

68. 6. Save POT in theme dir

69. 7. POEdit will find strings

70. 8. Translate

71. 9. Save as lang_code.po

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

74. Almost done

75. Almost done
RTL Tester plugin

76. Almost done
RTL Tester plugin
CSS Janus (RTLize your css)

77. Almost done
RTL Tester plugin
CSS Janus (RTLize your css)
The codex

78. Almost done
RTL Tester plugin
CSS Janus (RTLize your css)
The codex
Multilingual Plugins

79. Questions?
@yoavf, yoav@farhi.org
http://blog.yoavfarhi.com