How to make the RTL.css the dominant css code?

Question

I have a multilingual website, English (default) and Arabic, and also a parent theme and a child one.

Now, I want to load the CSS on this order:

In English: Parent Style.css then Child Style.css
In Arabic: Parent Style.css then Child Style.css then Parent RTL.css then Child RTL.css

Because I want always the Child css to be dominant on the parent css, and also the RTL to be dominant in RTL mode.

I have added this code:

<?php
add_action( 'wp_enqueue_scripts', 'theme__child_enqueue_styles' );
function theme__child_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'theme-child-style', get_stylesheet_uri() );
}

function load_parent_rtl_css() {
wp_enqueue_style( 'parent_rtl', trailingslashit( get_template_directory_uri() ) . 'rtl.css' );
wp_enqueue_style( 'child-rtl', get_stylesheet_uri() );
}
if ( is_rtl() ):
add_action( 'wp_enqueue_scripts', 'load_parent_rtl_css', 10 );
endif;

?>

But unfortunately, some parent style.css codes are overriding the parent rtl.css.

What is the right way to do this?

Have your inspected the style sheet in developer tools to see which one is loading first? — Kalimah
– Kalimah, Commented Nov 12, 2019 at 11:59
I didn't, but I concluded this, because when I have the Parent Theme activated, the RTL works perfectly, but when I activated the Child theme, the RTL.css is not loaded correctly, it is not the dominant code anymore, so I thought it should be related to this case. — user2051541
– user2051541, Commented Nov 13, 2019 at 12:30
Yes, this is the link I followed to create the code above. Maybe it didn't work correctly with because my theme has both languages Arabic and English. In the link it is only Arabic or RTL — user2051541
– user2051541, Commented Nov 13, 2019 at 14:29

WebElaine · Accepted Answer · 2019-11-13 14:22:53Z

0

To load your stylesheets in a particular order, add dependencies.

For example, to ensure the parent stylesheet is loaded before the child stylesheet, you would say

<?php
add_action( 'wp_enqueue_scripts', 'theme__child_enqueue_styles' );
function theme__child_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), array( 'theme-style' ) );
}
?>

The array after the stylesheet URL is an array of dependencies. You use the dependencies' handles (in this case, your parent stylesheet handle is theme-style) and that tells WP to make sure all the dependencies are loaded before stylesheets that need to come last.

For additional dependencies just keep stacking:

<?php
add_action( 'wp_enqueue_scripts', 'theme__child_enqueue_styles' );
function theme__child_enqueue_styles() {
wp_enqueue_style( 'theme-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'theme-child-style', get_stylesheet_uri(), array( 'theme-style' ) );
wp_enqueue_style( 'parent-rtl-style', get_stylesheet_uri(), array( 'theme-style', 'theme-child-style' ) );
wp_enqueue_style( 'child-rtl-style', get_stylesheet_uri(), array( 'theme-style', 'theme-child-style', 'parent-rtl-style' ) );
}
?>

edited Nov 13, 2019 at 14:22

answered Nov 12, 2019 at 16:51

WebElaine

9,8791 gold badge18 silver badges28 bronze badges

Hello, thanks for the response. But this works for this case: English: Parent Style.css then Child Style.css But what about this case: Arabic: Parent Style.css then Child Style.css then Parent RTL.css then Child RTL.css How can I make sure this order is right when in RTL mode? Many thanks

user2051541
– user2051541

2019-11-13 12:28:12 +00:00
Commented Nov 13, 2019 at 12:28
Stack the dependencies. So, Parent has no deps. Child has Parent as dep. Parent RTL has Parent and Child deps. Child RTL has Parent, Child, and Parent RTL deps. (Edited the answer above to show this example.)

WebElaine
– WebElaine

2019-11-13 14:21:40 +00:00
Commented Nov 13, 2019 at 14:21
Okay, I got it now. Can you please edit it with adding an if condition for RTL when in RTL to run only? i don't want RTL to run on English also. If possible of course. Many thanks

user2051541
– user2051541

2019-11-13 14:26:14 +00:00
Commented Nov 13, 2019 at 14:26

Add a comment |

Stack Exchange Network

How to make the RTL.css the dominant css code?

1 Answer 1

Your Answer

Linked

Hot Network Questions

How to make the RTL.css the dominant css code?

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Hot Network Questions