6

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
    Which rtl.css do you mean precisely? There isn't such exact file in WP core itself (there is in some of native themes though). – Rarst Jun 11 '14 at 18:24
  • rtl.css file is used when you are designing a theme to work with rtl languages ;) – Melika .A Jun 12 '14 at 18:46
8

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' );
  • 2
    Should rather be a blog post :) +1 ... and maybe a patch for core. – kaiser Jun 13 '14 at 0:46
  • 1
    Another option would be to register stylesheet normally, but print it explicitly (using wp_print_scripts() by handle), hooking after rtl thing. On other hand that might create issue with hook inside firing multiple times, because other code might not account for multiple use of the function... – Rarst Jun 13 '14 at 8:16
  • @kaiser - thanks! I may well write a brief exposé post. I'm not sure if I'm familiar enough with WP i18n/l10n functionality to determine whether a core patch would be beneficial here, though. – bosco Jun 13 '14 at 21:07
  • @Rarst - good thoughts all around. I'll play with an implementation tonight and add it to the listed solutions. – bosco Jun 13 '14 at 21:09

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.