WordPress: theme stylesheet handle name

In this blog post, I clarified how to reliably define the order of stylesheet incorporations in WordPress with the deps argument to the wp_register_style function. In my application scenario, I needed to make sure that a certain custom CSS resource becomes loaded after my theme’s CSS (so that this certain CSS code can override rules defined in the theme’s CSS). For doing so, one needs to define the custom CSS code as depending on the theme’s CSS code. For this, on the other hand, one needs to know the internal stylesheet handle name of the theme’s stylesheet. This name is usually defined when registering a custom stylesheet, using the handle argument:

“Name of the stylesheet (which should be unique as it is used to identify the script in the whole system)”

The theme’s stylesheet, however, is loaded automatically, we don’t register it ourselves. Likewise, we don’t provide its name ourselves. So, what is its name? I could not find any hint in the WP docs, also searching the web gave no direct help. I have a solution for finding it out, therefore this blog post.

I figured I need to do some debugging and print all the stylesheet handle names known to WordPress, under the assumption that the theme’s default stylesheet is among them and has an unambiguous name. So, I noticed a function called wp_print_styles in the WP source, you can have a look at it here (as of WP version 3.8.1). For calling this function in the context of WP, I used one of the many PHP code execution plugins in order to call

var_dump(wp_print_styles());

in the context of a private page. Displaying this private page (or post, whatever you wish) in preview mode prints the stylesheet handle name array as built up by the WordPress ecosystem during page rendering. In my case, it looked like this before defining the stylesheet dependency:

array(10) {
[0]=>
string(9) “...”
[1]=>
string(9) “...”
[2]=>
string(9) “...”
[3]=>
string(15) “...”
[4]=>
string(20) “magnific_popup_style”
[5]=>
string(18) “twentytwelve-style”
[6]=>
string(18) “twentytwelve-fonts”
[7]=>
string(15) “twentytwelve-ie”
[8]=>
string(27) “...”
[9]=>
string(8) “...”
}

I changed those unimportant to this issue to "...". Since my theme is a child theme of the twentytwelve theme, from here it is quite clear that “twentytwelve-style” is the stylesheet handle name that I was looking for. Another important information from this variable dump is that the “magnific_popup_style” comes before the “twentytwelve-style” one. After defining the stylesheet dependency as explained in this blog post, the order changes:

array(10) {
[0]=>
string(9) “...”
[1]=>
string(9) “...”
[2]=>
string(9) “...”
[3]=>
string(15) “...”
[4]=>
string(18) “twentytwelve-style”
[5]=>
string(20) “magnific_popup_style”
[6]=>
string(18) “twentytwelve-fonts”
[7]=>
string(15) “twentytwelve-ie”
[8]=>
string(27) “...”
[9]=>
string(8) “...”
}

As it turns out, this array reflects the order of stylesheet inclusion in the final HTML output. After this tiny bit of debugging work, one can be quite sure about how the system works and how to reliably configure and use it.

Leave a Reply

Your email address will not be published. Required fields are marked *

Human? Please fill this out: * Time limit is exhausted. Please reload CAPTCHA.

  1. drr1000 Avatar
    drr1000

    Thanks for this! Didn’t even need a plug in, I just dropped var_dump(wp_print_styles()) in functions.php.

    1. Jan-Philip Gehrcke Avatar

      Right, that’s simpler, but affects all pages :-).

  2. […] This makes sure that the MP resources are actually incorporated in the HTML code of your website. See YOUR-THEME-STYLE-NAME there above? You need to replace it with the internal stylesheet handle name of your theme. It is important to have this, it makes sure that WordPress loads the MP CSS after your theme’s CSS. This, in turn, is essential so that MP’s CSS can override certain styles. For me, YOUR-THEME-STYLE-NAME would be twentytwelve-style. If you are not sure what this name is for you, you can find it out. Have a look at my blog post WordPress: theme stylesheet handle name. […]

  3. […] ← WordPress: theme stylesheet handle name var disqus_url='http://gehrcke.de/2014/02/wordpress-stylesheet-inclusion-order/';var disqus_identifier='2999 http://gehrcke.de/?p=2999';var disqus_container_id='disqus_thread';var disqus_domain='disqus.com';var disqus_shortname='gehrckede';var disqus_title="WordPress: stylesheet inclusion order";var disqus_config=function(){var config=this;config.language='';config.callbacks.preData.push(function(){document.getElementById(disqus_container_id).innerHTML='';});config.callbacks.onReady.push(function(){var script=document.createElement('script');script.async=true;script.src='?cf_action=sync_comments&post_id=2999';var firstScript=document.getElementsByTagName("script")[0];firstScript.parentNode.insertBefore(script,firstScript);});}; var DsqLocal={'trackbacks':[],'trackback_url':"http://gehrcke.de/2014/02/wordpress-stylesheet-inclusion-order/trackback/"}; (function(){var dsq=document.createElement('script');dsq.type='text/javascript';dsq.async=true;dsq.src='//'+disqus_shortname+'.'+'disqus.com'+'/embed.js?pname=wordpress&pver=2.74';(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(dsq);})(); […]