How to Arrange RTL Functionality in WordPress

RTL Functionality in WordPress

RTL functionality is “musthave” feature in all current cms. There are few languages with right-to-left reading but there a lot of people which use these languages.

If you use some of the default WordPress themes rtl functionality is already arranged in them. You don’t have to create specific files and write any code. The file is rtl.css in the theme’s folder.

How to check how your theme looks in rtl without language with rtl reading installing.

1) you can use specific plugin developed for such purposes – RTL Tester – https://wordpress.org/plugins/rtl-tester/. All manuals can be found there.

2) more faster way is to set some of rtl languages in admin panel. Go in admin left menu: Settings -> General -> Site Language.

Screenshot 1

Advice: remember positioning of menu items in admin left panel. Because after rtl set you will see all reflected as in a mirror. That is looked unusual for people which don’t use languages with right-to-left functionality.

RTL in a custom theme arrangement For example, there can be such two ways to add rtl css styles in your theme. For sure, there can be more ways to do this. We don’t pretend that current article is the only rule. Please, keep in mind that current advices about how to work with rtl are based on own experience only.

1) Separate files for ltr and rtl. you add the main css for ltr mode which is replaced by rtl file correspondingly in rtl mode.

To do this you have to transform your css style by changing in it css properties word left to right and vice versa. For example, margin-left: to margin-right:, text-align: left to text-align: right etc.

But don’t be afraid – you don’t have to make such changes manually by list a tons of css styles. To such automatic purposes, for example, such online resource can be used – https://cssjanus.github.io/.

And again there two (and, maybe, more) ways to make replacement of some css with it rtl analogue.

1-1) replace one file by other using WordPress hooks: wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri() ); wp_style_add_data( ‘themeslug-style’, ‘rtl’, ‘replace’ ); To use such hooks you have firstly create both files and upload them in the same path by naming them as, for example, yourtheme-css.css yourtheme-css-rtl.css 1-2) add condition using WordPress default function is_rtl (): if ( is_rtl () ) { wp_enqueue_style(‘yourtheme-css-rtl’, get_template_directory_uri(). ‘/css/yourtheme-css-rtl.css’, array(), false, ‘all’ ); } else { wp_enqueue_style(‘yourtheme-css’, get_template_directory_uri(). ‘/css/yourthemecss.css’, array(), false, ‘all’ ); } The disadvantage of such method is when you have to make changed in theme’s view, for example, change some color of some block you have to open both files – main and rtl – and place changes in them. This is so because you have separate files for both versions. And if you change some color – it has to be seen in both versions.

2) Adding specific rtl file.

This file will be used only after rtl mode activating. Almost all css styles will be located in the main – yourtheme-css.css file.

And styles only for rtl will be placed in – yourtheme-css-rtl.css file.

The disadvantage of this way is manual css arrangement because rtl file hasn’t contain the same code as main file but only specific for rtl code. To do this quickly you can also use online rtl creating service to have full rtl file. And later leave in rtl file only changed code. All doubled css has to be removed.

The advantage of such method is you don’t have to place changes in both files if you need to add some general css, for example, as color, width etc. You make changes in the main file only and rtl version will also has such changes because it used both files.

So, to choose which method is more optimal you should analyse sizes of your css files, how often your theme will be changed, site optimisation after development finishing etc.

Source WordPress Website Themes