No results found. Try again with different words?

Search must be at least 3 characters.

How To Add RTL CSS via Child Theme?

RTL stands for “Right-to-Left.” It’s a way of writing text where you start from the right side and move towards the left.

Need to add custom CSS for the RTL site? RTL CSS is helpful because it allows websites to adapt their layout and design for languages that read from right to left, like Arabic or Hebrew.

Usually, many of us add .rtl CSS class while writing a custom CSS for the RTL site. These CSS loads even if we view the LTR site. Well, this is not a recommended way. In this article, you can explore how custom CSS can be added to the RTL site.

  • It is recommended to add custom code via a child theme. So make sure you have the Astra child theme installed and activated.
  • Login with FTP and edit the Astra child theme
  • Create a new file and name it rtl.css and add all custom CSS in this file
  • Edit the functions.php file in the child theme and add the following code snippet
/**
 * Load the parent rtl.css file
 */
function astra_child_enqueue_rtl_styles() {
    if ( is_rtl() ) {
        // Load RTL CSS.
        wp_enqueue_style( 'astra-rtl', get_stylesheet_directory_uri() . '/rtl.css', array('astra-theme-css'), ASTRA_THEME_VERSION );
    }
}
add_action( 'wp_enqueue_scripts', 'astra_child_enqueue_rtl_styles' );

Check out the doc that explains how to add custom PHP code using the child theme’s functions.php file. 

The above code snippet will load RTL CSS only when the site is viewed in RTL mode. CSS will not load in LTR mode.

If you face any issues while integrating this code, please reach out to us. We’re always here to help!

Was this article helpful?
Did not find a solution? We are here to help you succeed.

Related Docs

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.

REWIND

YEAR IN REVIEW

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form