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!
