[Resolved] rtl.css is being overwritten by styles.css

[Roy]

Hi there
It seems that the main stylesheet style.css is loaded before rtl.css, so all the RTL styles are being overridden.
I’m using a child theme, so I can hack a solution, but I think you should make sure that rtl.css is loaded after the main stylesheet.
Thanks!

[Tom]

Hi Roy,

If you’re using a child theme, WordPress won’t even load the rtl.css file: https://core.trac.wordpress.org/ticket/15863

This means you’ll need to enqueue your own file, which you can then set the priority for/set dependencies so it shows up below the style.css file.

Let me know if you need more info 🙂

[Roy]

Well, you learn something everyday.

Here’s my solution for loading parent theme’s RTL file after the main stylesheet, and then including my own additions:

function royeyal_enqueue_styles() {
	if ( is_rtl() ) {
		wp_enqueue_style('parent-theme-rtl', get_template_directory_uri() .'/rtl.css');
		wp_enqueue_style('local-theme-rtl', get_stylesheet_directory_uri() .'/css/rtl.min.css');
	}
}
add_action('wp_enqueue_scripts', 'royeyal_enqueue_styles', 100);

Thanks Tom!

[Tom]

Perfect, glad I could help! 🙂

[Author]

Posts