Support » Fixing WordPress » How to load RTL parent then child stylesheets and not LTR (multilingual))

  • Resolved atheerhuwa

    (@atheerhuwa)


    Hi all,
    How to load RTL parent then child stylesheets and not LTR styesheets in a multilingual RTL/LTR site?

    I made a child theme with style.css, style-rtl.css and functions.php files for a multilingual site.

    Now I want to load the RTL parent and then child stylesheets for Arabic and to load LTR parent and then child styesheets for european languages.

    Currently the issue is that the child LTR stylesheet is still loading for RTL pages and with the same specificity of the selector, the LTR child is even overriding RTL child.

    Here is what I am using in the functions.php of the child theme made for the parent storefront theme:

    add_action( ‘wp_enqueue_scripts’, ‘storefront_enqueue_styles’);

    function storefront_enqueue_styles() {

    $parent_style = ‘parent-style’;

    if (is_rtl()){
    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style-rtl.css’ );

    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style-rtl.css’, array( $parent_style ), wp_get_theme()->get(‘Version’) );
    }
    else {
    wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );

    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style.css’, array( $parent_style ), wp_get_theme()->get(‘Version’) );
    }
    }

    Thanks in advance

    • This topic was modified 2 months, 3 weeks ago by atheerhuwa.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Did you change the line $parent_style = ‘parent-style’; to its actual name?
    $parent_style = ‘storefront-style’;

    The only thing wrong with your code is that there is no version number for the parent style, so when the parent is updated, the style is stuck in the cache.

    Also, there is another way to indicate the RTL version, using
    wp_style_add_data( 'parent-style', 'rtl', 'replace' );
    I can’t find any documentation for it, but that is how the default themes do it.

    Hi Joy,
    Thanks for your reply.
    1. I changed $parent-style to ‘storefront-style’ and it did not work. So I looked into functions.php of the parent theme and it seems they called it just ‘storefront’:
    $theme = wp_get_theme( ‘storefront’ );

    So I tried ‘storefront’ but it also did not work.

    2. Regarding the version, what should I change?

    3. Finally if I want to use wp_style_add_data( ‘parent-style’, ‘rtl’, ‘replace’ );
    which lines should be deleted from the code of this post?

    • This reply was modified 2 months, 3 weeks ago by atheerhuwa.

    1. The theme name is not the same as the handle name. The line of code you quoted is getting the theme object, by theme name. You should look at what the parent uses for the handle name for enqueuing the stylesheet and use the same thing.

    2. When you get the theme object, you can then get the version (which is for the child) or the parent version.
    $version = $theme->get( 'Version' ); // child version from stylesheet
    $version = $theme->parent()->get( 'Version' ); // parent version from stylesheet

    3. See https://codex.wordpress.org/Right-to-Left_Language_Support

    Thanks Joy, but nothing from the above worked for me.

    Here is what I found out:
    1. The Storefront theme automatically enqueues parent and child themes so no need to enqueue them, so the functions.php remains blank and one can use rtl.css in the child theme and it will automatically override the child style.css.

    2. If one wants to add style-rtl.css in the child theme instead of rtl.css, the only way I found out to do that is by adding a priority like 999 to the action like the following:

    add_action( ‘wp_enqueue_scripts’, ‘storefront_enqueue_styles’, 999);

    function storefront_enqueue_styles() {

    $parent_style = ‘storefront-style’;

    if (is_rtl()){
    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style-rtl.css’, array( $parent_style), wp_get_theme()->get(‘Version’) );
    }
    }

    • This reply was modified 2 months, 1 week ago by atheerhuwa.
    • This reply was modified 2 months, 1 week ago by atheerhuwa.

    One thing I still like to do is not to load child style.css at all in case of RTL to avoid the need to “zero” the LTR style margin values in the RTL stylesheet. I dequeued the child style but is still loading:

    Here is the code:

    add_action( ‘wp_enqueue_scripts’, ‘storefront_enqueue_styles’, 999);

    function storefront_enqueue_styles() {

    $parent_style = ‘storefront-style’;

    if (is_rtl()){
    wp_dequeue_style( ‘child-style’);
    wp_enqueue_style( ‘child-style’, get_stylesheet_directory_uri() . ‘/style-rtl.css’, array( $parent_style), wp_get_theme()->get(‘Version’) );
    }
    }

    Assuming that the Storefront theme actually uses ‘child-style’ for the handle, you have choices of how to change it.
    1. Since the child theme runs first, you can use the normal priority of 10 and the same handle that Storefront uses, and load your preferred stylesheet. When the parent theme enqueues that handle, it will be ignored because it wasn’t first.
    2. The child theme can use the wp_style_add_data( 'child-style', 'rtl', 'replace' ); trick, but the stylesheet needs to be enqueued first, so this would need to have a higher number for priority than the parent, like 11.
    3. Use dequeue and then enqueue, making sure the correct handle name is used.

    By the way, your child theme shouldn’t use the parent theme’s prefix for the function name, since it’s confusing and also could collide with an existing function (resulting in a fatal error).

    The handle for storefront child is storefront-child-style, not child-style.
    Now it works perfectly.

Viewing 7 replies - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.