Child Themes with wp_enqueue_style()

Using Child Themes in WordPress is a great way to modify an existing theme, however, the CSS @import directive is slower than it has to be, so you should try and avoid it. Here’s why.

If it takes 200ms to load the child theme’s stylesheet, and 200ms to load the parent-theme’s CSS, a modern web browser should take approximately 200ms to load both of them, because modern browsers load assets in parallel.

Unfortunately, this is not true for CSS.@import Let me quote Google:

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Which means that instead of 200ms, with it @import’ll take the web browser approximately 400ms to load both style sheets. Here’s a typical child theme’s CSS:

/*
 Theme Name:   My Child Theme
 Theme URI:    http://example.com/child-theme/
 Description:  Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     parent-theme
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url(../parent-theme/style.css);  

/* My Child Theme CSS */

We can drop the @import statement, and make good use of functions.php and the wp_enqueue_style() function:

<?php // Opening PHP tag - nothing should be before this, not even whitespace
// Faster than @import 
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' ); 
function my_child_theme_scripts() {     
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' ); 
}

And we don’t need to re-declare dependencies because the child theme’s functions.php is loaded before the parent theme’s. Unless, of course, the parent theme uses a different action priority, in which case we should just match it.

That’s +1 to the PageSpeed score 🙂

Going even further, since we are already using function.php can put as many or as few functions as you wish.
Here are some simple yet interesting things you can do with adding few lines to code to your function.php file;

Adds a favicon link to the head element of HTML pages.

// Custom Function to Include favicon
function favicon_link() {
    echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "n";
}
add_action( 'wp_head', 'favicon_link' );

Hope this helps.

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