How to Add RTL CSS via Child Theme?

Need to add custom CSS for RTL site? Usually, many of us add .rtl CSS class while writing a custom CSS for 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 Astra child theme
• Create a new file and name it as rtl.css and add all custom CSS in this file
• Edit functions.php file in 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. 

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