A few days ago, we added Hebrew translation for WPML.org. The challenge was less about adding the translations more with making WPML.org theme display it correctly in right-to-left. Daniel (our support manager) wrote this post to explain what he did to add RTL support to our theme.
These were the main challenges we faced:
- Swap the navigation, footer and other theme elements from left to right
- Adjust some fixed-position elements in the home page for proper RTL display
- Swap all floating images in posts and pages from left to right and right to left
- Display blog posts in the correct direction – we display both Hebrew or English for untranslated posts
To handle all of them, we added an rtl.css file, which loads after the theme’s CSS. This file overrides attributes for RTL display and makes the required changes for Hebrew display.
The CSS
You have 2 options for showing the correct style and layout for your RTL language:
- Load your standard CSS and ALSO load a new CSS with only the specific changes for RTL
- Load a new RTL CSS INSTEAD OF your standard CSS
For this site we went with option 1 and we created a rtl.css file, but you should know that if you prefer option 2, there is a really cool tool from Google called CSSJanus. This tool is a nifty python script that will read your CSS and change (almost all) the necessary values to convert your theme from LTR to RTL.
But as we did our CSS changes manually, here are the usual changes that you’ll most certainly need:
- Add
direction:rtl;andtext-align:right;to the body tag (or your content wrapper) - Change all
float:left;tofloat:right;and the other way around. - Change all
margin-lefttomargin-rightand the other way around. - Look for objects with
position:absolute;and move accordingly. - Look for objects with exact
background-position, and move accordingly.
You get the point, but CSSJanus unit test case will give you more cases that you need to check for.
The HTML
Be sure that you have the html tag correctly coded:
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
The PHP
If you proceed as we did using an extra CSS file, you can use WPML’s constant ICL_LANGUAGE_CODE to conditionally include that new CSS. In our case, the RTL language is Hebrew, so our conditional inserted just above the </head> tag in header.php look like this:
<?php if (ICL_LANGUAGE_CODE == "he"): ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/rtl.css" type="text/css" media="screen" />
<?php endif; ?>
That alone should do it, but we have another trick for you today. In our hebrew blog we have mixed languages. Some posts are in hebrew, some in english. So we needed a way to style each post in the loop give its language. Here is where the new wpml_get_language_information API function in WPML comes handy. This is how the start of our loop in our blog index looks like now:
<?php
while (have_posts()) : the_post();
$lang_info = wpml_get_language_information(get_the_ID());
$direction = $lang_info["text_direction"] == 1 ? "rtl" : "ltr";
?>
<div id="post-<?php the_ID(); ?>">
So now, each post is wrapped in a DIV with the correct class, which we can style correctly.
Subscribe via RSS
Follow
Good work & great news : )
What if the case is the other way round? My site is in hebrew and I need to create an english version. Also, where do I tell WordPress to use a different CSS for specific pages?
We added this to our theme’s PHP code. There’s a come sample that we included in this post above.