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.