How to Add RTL CSS via Child Theme? (Astra)
|
/ Documentation /General/ How To Add RTL CSS via Child Theme?

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 doc helpful?
What went wrong?

We don't respond to the article feedback, we use it to improve our support content.

Need help? Contact Support
On this page

Download is Just A Click Away!

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

This field is required.

REWIND

YEAR IN REVIEW

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