Enqueue Stylesheets After Theme’s “rtl.css”

by

I am currently developing a theme with internationalization support, and would like to load stylesheets after my theme’s rtl.css (an alternative style.css loaded for languages with a right-to-left reading order).

I am familiar with enqueueing my stylesheets and controlling their load order with dependencies using the wp_register_style() and wp_enqueue_style() functions, however rtl.css is loaded automatically by WordPress whenever the locale’s language direction is rtl, and there doesn’t seem to be a way to specify the stylesheet as a dependency.

I know I can conditionally enqueue stylesheets using the is_rtl() function, however
these stylesheets’ <link> elements are still printed out before WordPress automatically prints rtl.css‘s. I could also simply manually insert <link>s to the stylesheets that I wish to depend on rtl.css right after the call to wp_head() in my theme’s header.php file, but I believe it’s bad practice to do so, and I would like my theme to be commercial quality.

How can I load stylesheets after WordPress loads rtl.css?

1
1

Stylesheet Printing Order

WordPress does not load themes’ alternative rtl.css files using wp_register_style() or wp_enqueue_style(). As such, the stylesheet does not get added to WordPress’s style queue, and cannot be specified as a dependency when registering or enqueueing additional stylesheets.

Instead, this stylesheet’s <link> element is added via the locale_stylesheet() function, which is attached to the wp_head action. wp_print_styles is hooked to the wp_head action with a priority of 8 while locale_stylesheet() has the default priority of 10, which means that all of the styles you enqueue using wp_enqueue_style() will always be printed out before rtl.css.

Note

locale_stylesheet() calls the get_locale_stylesheet()
function
in order to determine which locale-relevant theme stylesheet to load. First it looks for {locale}.css (i.e. en_US.css) – if the file doesn’t exist it next looks for {text-direction}.css (i.e. rtl.css or ltr.css). Keep in mind that if you supply a {locale}.css stylesheet for the current locale, WordPress will not automatically load your rtl.css

Solutions

There are a few ways that you can modify this behavior, but it should be noted that it exists for a reason – by loading rtl.css after all enqueue’d stylesheets, WordPress provides the theme the opportunity to overwrite any CSS rules provided by plugins and the like that otherwise only support left-to-right languages. All of the solutions I provide below mostly remove this possibility and may create conflicts if any plugins depend on WordPress’s default behavior (I can’t imagine that many do).

Manually Enqueue Your Stylesheet

If you prevent WordPress from automatically loading your rtl.css file, you can treat it as you would any other stylesheet, giving you control over when the script loads. There are two ways to accomplish this that come to mind:

  • Hook into an action that fires before wp_head and remove locale_stylesheet()‘s hook:

    function remove_locale_stylesheet() {
    remove_action( 'wp_head', 'locale_stylesheet' );
}
add_action( 'init', 'remove_locale_stylesheet' );

  • Rename your rtl.css file to something else (not ltr.css or {locale}.css).

After doing one of the above, enqueue your RTL stylesheet as you normally would – conditionally on is_rtl() if you also wish to support LTR languages.

Reverse wp_head‘s Stylesheet Printing Order

By hooking into an action before wp_head and giving locale_stylesheet()‘s hook a lower priority than wp_print_styles, you can force rtl.css to always load before wp_enqueue_style()‘d stylesheets, effectively making it as though every enqueue’d stylesheet has a dependency on rtl.css:

function load_locale_style_first() {
    remove_action( 'wp_head', 'locale_stylesheet' );
    add_action( 'wp_head', 'locale_stylesheet', 7 );
}
add_action( 'init', 'load_locale_style_first' );

Leave a Comment