Firstly, lets remember why we want a child theme.
Often we find that a theme design could just do with a few tweaks to make it our own. We can often do that with a change to the style sheet. However, if we make changes to out theme and then the theme developer brings out an update to the theme – we will lose our changes and have to add them again. The solution is to use a child theme. This works by taking control as the main theme, but with a rule that all ‘instructions’ should be taken from the parent theme, unless we have a ‘replacement’ file within the child theme.
The most simple child theme can contain 3 files. The first in style.css which is the repository of our style changes, functions.php which allows us to make code changes to the theme. You should also have snapshot.png which is an image of a screenshot of the theme. I always leave that till my theme is complete.
Firstly, make sure the theme you wish to ‘enhance’ is on your system, in this case the twenty sixteen theme. Within the themes directory you need the directory of your child theme. This should be one word without spaces and hopefully unique!
Into this directory you need to create style.css and functions.php. Into styles.css we need the header code that WordPress uses to identify your theme.
Style.css
/* Theme Name: WPBusinessClub2016 Theme URI: http://wpbus.loc.mywestbury.co.uk Description: twentysixteen Child Theme Author: Me Author URI: http://wpbus.loc.mywestbury.co.uk Template: twentysixteen Version: 1.0.0 *//* Add Custom CSS after this line */The Theme name should relate to the name used in your directory. The template name must be the theme name of the parent theme you are working with. In my case twentysixteen.
functions.php
There is only one piece of code we need to start and that is to bring in the style-sheet, style.css, that we just made.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'twentysixteen-style', get_template_directory_uri() . '/style.css',1 );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', 2 );
}
You will need to replace the ‘twentysixteen’ with your parent style name and then check the source to make sure it was referred to. If you do not specify the name correctly, you may find the style sheet loaded a second time, which could overwrite your new style changes. So use view source to check a completed site page.
