What’s the deal with wp_enqueue_style (and why does WP documentation suck?)

I’m implementing a child theme for the WordPress template twentyfourteen.

I followed the simple directions at WordPress’ Child Themes page.

override-css-in-wordpress-child-themes

I finally got override styles to show

Yet my styles were not showing up. Not only were they not overriding the parent styles, Firebug showed that they were not even getting to the page.

Well, I wasn’t entirely confident about how I implemented my child themes. WordPress’ incomplete instructions said:

If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

… whatever that means. Then they then include this undocumented sample code:

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

Notice that the WordPress team never explained what literal string you should use instead of  ‘parent-style’ — I assumed I should use ‘twentyfourteen-style,’ but I was just guessing. Maybe ‘twentyfourteen’ would have been correct, or maybe the name of the style was some other string that you have to look up somewhere.

I spent far too long looking for the missing documentation when finally I decided to forge ahead with trial and error.

Here are the results for what to use instead of ‘parent-style’:

When I used ‘twentyfourteen-style’

My styles did not show up. Firebug showed me that 6 css files were served to me, including blog/wp-content/themes/twentyfourteen/style.css?ver=4.2.2

When I used ‘anything-else-like-my-child-theme-name-or-jsldfkjsdlfkjsldkjw-or-even-literally-parent-style

My styles did show up. Firebug showed me that 7 css files were served to me, including blog/wp-content/themes/twentyfourteen/style.css?ver=4.2.2 and blog/wp-content/themes/mythemename/style.css?ver=4.2.2

So the short answer is that you should use the literal string “parent-style” in WordPress’ sample code. The only string you can’t use is ‘[yourParentThemeRealName]-style’ because then you will not actually see your override styles.

I did dig a little deeper and discover that the first parameter to the function theme_enqueue_styles is a key of sorts. Whatever name you give as the first parameter is the name of the “key” that WordPress uses to handle overrides. So if you use the same name twice, only the first occurrence will stick.

I used this to my advantage. I enqueued “a-different-unique-string-name” to include a secondary style sheet that I was already using elsewhere. As long as I used a unique name, I would get my child theme’s CSS file, as well as all the others that I stacked up in my queue.

Here’s the contents of functions.php that I ended up with:

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles_viewpoint' );
function theme_enqueue_styles_viewpoint() {
    wp_enqueue_style( 
        'parent-style', 
        get_template_directory_uri() . '/style.css' 
    ); 
    
    wp_enqueue_style( 
        'anthemize', 
        dirname(__FILE__) . '/../../../../resources/styles/anthemize.css'
    );
    
}

 

 

Advertisements
This entry was posted in CSS, Webmastering, WordPress. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s