RTL in WordPress: Everything you need to know

RTL in WordPress: Everything you need to know

WordPress has been the most famous content management system for a while now. Even after that, it has some shortcomings. One of them is support to RTL (Right-to-Left) languages. RTL in WordPress has always been a problem as plugins don’t completely cover the problems associated with RTL scripts.

If you are unaware of what RTL is then, RTL is referred to languages in which the script flows from the right side to the left side of the page. WordPress has a few problems as the default WordPress editor does not support RTL languages.

Arabic, Hebrew and Persian scripts are some of the most widespread RTL writing systems in these modern times. To solve the problems related to RTL languages you need to overwrite attributes in a separate stylesheet and name it rtl.css.

Here are two pages, one is LTR and one in RTL.

Admin-Dashboard-hebrew Admin-Dashboard-English

Changing LTR to RTL in WordPress

Below are few instructions of how you can convert current LTR configuration into RTL configuration without making any major changes.

  • Changing Page Direction

One of the most prominent problem is page direction and this can we solved just by adding couple of lines of code in rtl.css.

[info]direction: rtl; 
unicode-bidi: embed;[/info]
  • Text-direction, Float and clear issues

After page direction, text direction and float property are some important parameters to look after. Float property allows you to wrap text around images and the clear property completes the float by controlling the behavior of floating elements.

The default values for text-direction, float and clear are as follows

[info]text-align: left; 
 float: right; 
 clear: left;[/info]

You need to change it to

[info]text-align: right; 
 float: left; 
 clear: right;[/info]
  • Orientation of Images

Most of the images are created to suit LTR languages. For this you can use relevant RTL images or you can horizontally flip images to suit RTL languages.

To mirror the images need to change the following attributes margin

  1. padding
  2. borders
  3. background-position
  4. right/left positioning
[info].commentslink{ 
background:url("./img/background.gif") no-repeat 0 2px; 
padding-left:12px; 
     margin: 4px 8px 0px 20px; 
     left: 12px; 
}[/info]

To

[info].commentslink{ 
background:url("./img/background.gif") no-repeat 100% 2px; 
padding-left:0; 
     padding-right:12px; 
     margin: 4px 20px 0px 8px; 
     left:auto; 
     right:12px; 
}[/info]
  • Button Text

Some buttons have hidden text using text-indent, to show buttons properly in RTL you need to change its value from negative to positive.

[info].img-btn{ 
text-indent:-99999px; 
}[/info]

To

[info].img-btn{ 
text-indent:99999px; 
}[/info]
  • Editing posts

The default WordPress editor does not support RTL languages. If you are willing to write a post then you need to do the following:

  • Reinstall or change the default WordPress version you have installed to be in that language you want. This will fix any issue in allowing you write in RTl as default.

You can also you this plugin : http://wordpress.org/plugins/wp-rtl/  which will add two button to the TinyMCE editor to enable changing text direction.

This was about how you can solve the problems that might occur while converting LTR to RTL. Below you will get information about how you can install RTL in WordPress.

How to install RTL in WordPress?

WordPress community has translated WordPress into many languages and themes, support and translation files are available for those languages. For this you have to manually install the language files into your WordPress site.

Steps to follow:

  • Download the .mo file for your language. Suppose you want to install Hebrew language, the file name would be he_IL.
  • Next, you have to create a new folder in your /wp-content directory called /languages on your site server.
  • Now you need to upload the he_IL.mo file to the languages folder

If you are using WordPress 4.0 and above, to change the language all you have to do is change the language in the admin settings screen. Settings>General>Site Language.

But, if you are using WordPress 3.9.2 and below, then you need to make some changes in wp-config file.

  1. Open your wp-config.php file in a text editor and search for:
[info]define ('WPLANG', '');[/info]
  • Edit this line according to the .mo file you’ve just downloaded, e.g. for language Hebrew, you need to do this
[info]define ('WPLANG', 'he_IL');[/info]
  • Once you’ve added your language code, save the file.
  • Now, you need to upload the modified wp-config.php file into the WordPress root directory.
  • Finally, go to your WordPress site and the new language should be installed.

WordPress has been a great platform for anyone to start their own site and it continues to be with support to over 150 different languages.

1 Comment on “RTL in WordPress: Everything you need to know

Leave a Reply to Ben Pines Cancel reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.