Creating child theme can save you from a lot of headache in future if you are intended to perform adjustments in your favourite theme’s code. By creating a child theme, you create a separate set of files that you can use to customize the theme without affecting the original theme at all.
So always create child theme in WordPress to make changes which further leads you to easily update your parent theme without erasing your changes.
The old way to create child theme in WordPress
The old way to create child theme is to place a style.css file in your child theme folder and import the parent stylesheet into the child theme as given below:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /* 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 -------------------------------------------------------------- */ |
Use functions.php to create child theme in WordPress
The old way to import the parent stylesheet into the child theme is use of @import but now it should not be used anymore. Instead use wp_enqueue_style() to enqueue the parent stylesheet.
You will need to create a functions.php file in your child theme folder and right at the start, on the first line, you should add an opening php tag. All other code will follow after this opening php tag.
1 2 3 4 5 6 | <?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' ); function enqueue_parent_theme_style() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } |
The reason behind using functions.php and wp_enqueue_style as given in WordPress Documentation are:
The benefit of using wp_enqueue_style() over @import is that enqueued stylesheets are all referenced from the HTML output to the browser, whereas an @import statement is referenced from the main stylesheet, which is an extra step before the browser knows where to look next.
Additionally, @import suffers from performance issues, as all resources declared in each import statement are not loaded in parallel. There is also less control over the order in which browsers honor the @import statement, as some browsers (notably Internet Explorer) will load a given stylesheet in order of completion vs declaration. This can result in undesirable results if the order in which you declare your stylesheets depends on the existence of styles preceding it.
Thus the parent theme stylesheet should not included using @import. Instead always use functions.php to create child theme in WordPress and enqueue parent theme’s stylesheet there using given code above afterward.