How To Add Rtl Support To Your Custom WordPress Theme?
Introduction
Nowadays there are 75% users present on the internet speaks other languages than English. But the main thing is that too many other languages RTL can ruin the complete layout of the English language supporting the theme. If you don’t know How To Add Rtl Support To Your Custom WordPress Theme? then don’t worry with the help of this article you can learn how to add RTL and how to work with them, so read the complete article very carefully.
Too many themes are present in the market that flows very well for the RTL languages like Arabic, Spanish, French and many more.
With the help of some changes and style tweaks, you have the opportunity to add RTL languages to the custom WordPress theme.
If you don’t know how to add RTL languages then don’t worry with the help of this article you can learn how to add RTL and how to work with them, so read the complete article very carefully.
How to add the RTL to your custom theme?
When you are designing the theme the first thing you make sure that create a complete backup of your website.
In the case of any accidents your data will not be lost. When you are done with the backup then start adding the RTL into your custom WordPress theme.
Step 1: Creation of the RTL CSS for your custom theme:
The first step in the adding process is to create the CSS that shows the RTL languages correctly to your website.
For this you have 2 methods the first is you can simply feed the stylesheet into the CSS RTL generator.
Basically this generator will check the CSS and also create a complete copy of your website.
There are two best websites present in the market that we recommend.
RTLCSS: this tool is very simple to use and also comes with the complete instruction of use. It also provides the beta testing.
CSSJanus: it is a very clean and simple tool. You just have to write your LTR CSS in the right handle, after this click on the submit button and collect the RTL CSS.
Read More: 5 Best Travel WordPress Themes
This is the very simplest method to do this but when you create the new CSS then you have to save the resulting styles as the named style-rtl.css.
But if we talk about the second method then it is difficult because it includes the override stylesheet.
In this method you have to check the each and every line of the CSS and after this you have to manually moved all the horizontal positioning elements into the separate file named as rtl.css
The result of this thing is you will get smaller files but also takes more work to keep these files especially at the time of updating and makes changes to your theme.
If you want to use the second method then you have to add the code at the top of the rtl.css file.
body{
direction: rtl;
unicode-bidi: embed;
}
However, for the remaining all selectors you should make sure that you switch each right or left positioning to the opposite.
But the exact selectors that you can switch are based on your needs.
In the end if any button is pushed to the off screen with the help of negative text-indents then you should switch it to the positive instead.
After this when you have made all changes then you have to save the new file named as rtl.css but you have to do this in the same directory as style.css.
Step 2: Make sure you WordPress theme sees the RTL styles:
The important thing is that if you are using the CSS generator tool then you have to enqueue the new stylesheet named as style-rtl CSS, this thing is required so the WordPress can load the theme properly.
You just have to add the snippet to your theme file named as functions.php.
function enqueue_theme_files() {
wp_enqueue_style( ‘themeslug-style’, get_stylesheet_uri() );
wp_style_add_data( ‘themeslug-style’, ‘rtl’, ‘replace’ );
}
add_action( ‘wp_enqueue_scripts’, ‘enqueue_theme_files’ );
Basically this code will inform the WordPress to load the accurate stylesheet at the time when your website is set to an RTL language.
If you are already using the enqueue to load in the stylesheet then you just have to add wp_style_add_data() into the enqueued style function.
If you are going to use the dedicated override sheet then you don’t need to load it in the special function.
The reason is WordPress will load it in the rtl.css file and it will overwrite the directional cues with the help of a secondary file.
Now when you select the method then it’s time to test, it is working properly in the WordPress or not.
In the next step we discuss the testing of RTL styles in the WordPress.
Step 3: Test Your RTL Styles in WordPress
There are different options present to test the RTL languages installation.
The first method is you just have to simply switch the WordPress to the RTL language.
For this you just have to go to the settings>generale page in the dashboard of your WordPress. After this choose the first script language that you see in the language drop-down box.
After saving all the processes that you have done, you will notice that all the things are now right to left.
However, you have to use the developer tool to enable the RTL styles and also select the English as a primary language.
In the market there are two plugins available for this work, first one is RTL tester plugin. When you install and activate this tool then it flips the switch on your whole website to tell the load any and also all RTL-specific styles.
The second is WP-RTL and this tool helps you to switch between the other languages within the single post.
However, these two plugins work properly but the main thing is that they haven’t been updated.
But they are able to give the simple and esoteric functionality and all these functions are very understandable.
However, both these two plugins provide the opportunity to test what various layouts look like with the LTR or the RTL content.
In the end we recommend you unit test data to confirm that you are covering each and every permutation of text formatting and style at the time when you are adding the RTL styles.