Enqueue Stylesheets After Theme’s “rtl.css”

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' );