When developing a child theme, we frequently follow this example from the WordPress Codex:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/
 
 
@import url("../twentyfourteen/style.css");
 
 
/* =Theme customization starts here
-------------------------------------------------------------- */

While that certainly works, using @import slows down page load as it prevents stylesheets from being downloaded currently. Instead of using @import, site load time can be sped up by calling wp_enqueue_style. On this site, which is a child theme of Designy, I use the following code:

1
2
3
4
5
6

function koolkat_load_css() {
	wp_dequeue_style( 'meanthemes' );
	wp_enqueue_style( 'meanthemes', get_template_directory_uri() .'/style.css' , array(), '1.1.9', 'screen' );
	wp_enqueue_style( 'koolkat',  get_stylesheet_directory_uri() .'/style.css', array(), '1.0.2', 'screen' );
}
add_action( 'wp_enqueue_scripts', 'koolkat_load_css' );

I the above code, we dequeue the parent stylesheet and then enqueue so it uses the correct path to the template directory (the parent directory). If we did not change how the parent stylesheet was enqueued, it would just point the child stylesheet and we would not have loaded all the need styles. Once we get all of the parent styles to load, we enqueue our new stylesheet, completing the process. Of course, page load time can be further improved by combining and minifying stylesheets.