Today the team at MFD have decided to go all geeky, well geekier anyway, and throw in a technical blog post about WordPress website child themes.

WARNING – SOME TECHNICAL KNOWLEDGE REQUIRED (and your nerd dial turned up to full)

In the past with WordPress the traditional method of loading parent styles into child themes has always been to use the CSS @import function, typically added to the child theme style sheet:

@import url(“../nameofthemefolder/style.css”);

However, the above method can cause additional delays during the loading of a web page as the files are fetched from an external source which can dratically slow a website speed performance (have we lost you yet? Go lie down for a while if we have, clear your mind).

A much better way of doing this nowadays, instead of using @import, is to add PHP code to the functions.php file of your child theme (still here?). Although every WordPress theme should have a functions.php file, if you don’t have one, simply create a new file and name it functions.php and add the following code:

<?php
/**
* Load the style sheet from the parent theme.
*
*/
function theme_name_parent_styles() {

// Enqueue the parent stylesheet
wp_enqueue_style( ‘theme-name-parent-style’, get_template_directory_uri() . ‘/style.css’, array(), ‘0.1’, ‘all’ );

// Enqueue the parent rtl stylesheet
if ( is_rtl() ) {
wp_enqueue_style( ‘theme-name-parent-style-rtl’, get_template_directory_uri() . ‘/rtl.css’, array(), ‘0.1’, ‘all’ );
}

}
add_action( ‘wp_enqueue_scripts’, ‘theme_name_parent_styles’ );

?>

Using this method will pull in the parent theme style without the delay caused by @import ensuring that your website loads even quicker, which we all know is good news for both visitor experience and search engine rankings.