Ben Pines Changing a WordPress theme from LTR to RTL could be a real hassle, right?
You try to modify a premium theme that you bought to be compatible with an RTL language, just to find out the whole design gets messed up.
A lot of the themes that claim to be RTL compatible, even premium ones, can produce many errors and design bugs. In the wordpress.org support forum alone you can find many examples of users needing support for RTL issues.
In this article I’d like to let you know about the most common problems that occur with RTL themes, but first let’s find out more about changing themes to RTL.
The Difference Between an RTL Theme and Regular Themes
RTL stand for Right To Left. Some languages, the most popular of which are Arabic and Hebrew, are written in the right to left direction, and websites that want to pursue markets using these languages need to create a version of their website that is completely built as RTL. This means making changes to the theme on all levels: the CSS, the coding, images and other design elements.
In a previous post we’ve discussed creating a multilingual website without touching code. Creating an RTL version, however, poses a more complicated challenge, because the change in direction also causes changes in the design and layout of the theme.
Common Problems With RTL In WordPress
It is very hard, and sometimes impossible, to fix RTL issues in WordPress themes that are not pre-built to work as RTL. The reason for this is difficulty lies in the fact that if the theme’s infrastructure was not built with RTL in mind, then almost all of the basic elements of the theme needs to undergo changes. In fact, it might be easier to create a whole new RTL theme altogether than make the necessary alteration in the current theme.
Here are a few common problems you can check after creating your RTL site.
1. Page Direction
The most basic step when translating a theme to RTL is to change the page direction to RTL.
This change only partially works, because of elements on the page which are absolutely positioned. Changing the direction property not only does not solve RTL issues, but can cause new bugs in the design.
2. Menu Padding And Margin
The WordPress menu is one of the most important design elements in a theme, and when you change the direction of the page it can influence the header links as well as the drop down links of the menu.
Manually changing the padding and margin settings in the CSS does not always help solve the menu of the RTL bugs, and these changes should be done on a child theme, otherwise any theme update can make the menu CSS return the default settings for LTR.
3. Float And Clear Issues
The float property has many uses, one of which is to wrap text around images. The clear property completes the float, and is used to control the behavior of floating elements.
One of the practices of translating themes to RTL is to change the left float property to be right and vice versa. This change shouldn’t be done automatically, because some RTL theme elements still need to keep the float value to be left.
4. Grid Layout Item Direction
Grid layouts are very common in theme design. The grid layout helps the designer spread the different graphic elements in the right order and place.
Changing a theme to RTL can make some of the pages lists appear in the wrong order. This means for example, that the page that lists the blog posts, could list those post backwards, from left to right.
5. Image / Text Alignment
Even if you have fixed the floating issues, some issues may still occur concerning the image text alignment. This mean the text may wrap around the image in a wrong way.
6. Logo Issues
Placing the logo in the header image is a must in almost any website, and is especially important for business websites. Because the logo is usually custom made to be compatible to the original LTR website, changing to RTL can cause the whole site to look incongruent.
7. Sidebar Direction
Changing a theme’s direction can often involve changing the position of the sidebar, from the left side to the right. Any widget you have in the sidebar should also be changed to suit rtl.
8. CSS Shapes
CSS shapes are widely used today in the design of images, text and other page elements. Changing a theme to be RTL can cause various problems with CSS shapes. For example, if a menu in the theme contains a CSS triangle pointing to the link direction, when you change to RTL you need to completely alter that shape to be RTL.
9. Scroll Bar Appears
Sometime changing a theme to RTL causes the page to have a horizontal scroll bar.
10. Mobile Issues
When you change a theme to RTL you may interfere with its compatibility with mobile devices.
The Solution
The issues I listed above are just some of the problems I have run into when changing themes to RTL, but there are numerous others.
In order to solve them, you might be searching for complex solutions for each issue – but no, there is a much simpler solution!
We have created themes that have seamless integration of RTL, so you can set up several multi lingual websites, including RTL, without any issues whatsoever.
All themes were pre-built to work perfectly with RTL, and have been tried and tested on over 10K different RTL websites. Go to our themes section and take a look at the different demos of the themes.