0

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 Nov 12 '19 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 Nov 13 '19 at 12:30
  • Does this help: wordpress.stackexchange.com/a/229158/35871 – Kalimah Nov 13 '19 at 13:19
  • 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 Nov 13 '19 at 14:29
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' ) );
}
?>
  • 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 Nov 13 '19 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 Nov 13 '19 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 Nov 13 '19 at 14:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.