blog posts

How to fix the rtl.css error of not loading WordPress

WordPress rtl.css error, not loading, happens to us when we need to use the right-to-left language on our site or the so-called RTL feature, so we use HTML and CSS to be able to use right-to-left languages ​​such as Farsi. And to align the Arabic text of the site content, it is necessary to do this using the RTL.CSS file. This word, which is an abbreviation of right to left, will allow us to arrange all sections from right to left by defining our website template classes inside this file for sites that use the right Chinese languages, unlike in the Chinese language. In English, this arrangement will be ltr or left to right.

The task of selecting and loading, whether it is right to left or left to right in the WordPress template you are using, will be automatically determined by the version of WordPress you are using, that is, if you have used Persian WordPress and installed it, if the template If you are right-aligned and have the rtl.css file, your site will be right-aligned, and in the same way, if your WordPress version is English, whether the rtl.css file is present in your template or not, it is possible to use the right-aligned version. You will not have the fold and your template will be arranged as a left fold. In this tutorial, from Hostfa’s knowledge base, I intend to solve this problem because it happens to many sites that intend to use Latin WordPress in the WordPress dashboard, but the user section of the site remains in the right column.

Tutorial on how to fix the rtl.css error of not loading WordPress in English

To solve this problem, it is enough to use the function file (functions.php) and with a simple hack that I have prepared for you below, you can make the rtl.css file still loaded and the user environment even if your WordPress version is in English. The site should be displayed in a right-aligned form for members.

For this purpose, first log host and then click on the File Manager option to go to the file management environment of your host to reach the path where the functions.php file is located.

Fixing the error of not loading WordPress rtl.css in English

After the hosting file management environment is opened for you, go to /public_html/wp-content/themes/ , you will see that there are several other folders in this folder, each of these folders is related to the template that is on your site. You have installed and activated it, now at this stage you should go to the folder that is active on the site and users are currently able to view the site based on this format and look for a file called functions.php . After you find the desired file:

  • If you are using CPanel host, right click on the file and select Edit option to edit the file.
  • If you are using Host Direct Admin, click on the Edit option that is in front of the file name to be redirected to the file editing page.

file editing page is functions.php opened, add the following codes to the end of the page, make sure that these codes must be before <? be placed

function iptrtl_add_stylesheet() {
$template_dir_uri = get_template_directory_uri();
$template_dir = get_template_directory();
//$stylesheet_dir = get_stylesheet_directory();
if ( file_exists("$template_dir/rtl.css") ) {
wp_register_style( 'parent-theme-rtl', "$template_dir_uri/rtl.css" );
wp_enqueue_style( 'parent-theme-rtl' );
}
}
add_action('wp_print_styles', 'iptrtl_add_stylesheet'); 

As you can see in this piece of code, using the WordPress function file, we added a command that if the RTL.css file is used for the current template that is active on the site and the Latin version of WordPress is used in the WordPress counter, in any case, the rtl.css file for Users have been loaded. The site has been made available to users with the correct version of Chinese and Farsi. Finally, by saving this code in the function file, this command is registered, and from now on, whether you use the Farsi or English version of WordPress, if the rtl.css file is present in your template, it will be loaded, and the site will be displayed right-aligned. Will be.