WordPress child theme is an elegant way to customise WordPress theme without loosing original theme’s core code. Child theme inherits functionality and style of parent theme. It allows us to modify or add functionality of the parent theme.
Why should I use child theme?
Theme developers and distributors frequently releases new versions of the theme to add more functionality over previous version, or to provide bug fixes and security updates. The main advantage of using child theme is to keep your customisation safe, while you update a parent theme. This will allow you to update your theme to available latest version, without loosing your changes. By creating a child theme you are actually creating a separate set of files, that you will use to customise your theme without affecting your original theme. Practically you are going to create only those files which you wants to customise. You can always turn off your child theme to fallback to original theme.
Getting Started
In this example I will create child theme for default WordPress “Twenty Fourteen” theme. To create a child theme we will need minimum two things. A directory which contains files for child theme and another is style.css file within this directory.
There is no restriction to name theme directory, except one; you can not use white space as a part of directory name. You can name it whatever you like to call it. If you want to dedicate this child theme to one of your best friend, or your pet name; you can. The common practice among developer is to use parent theme name with “-child” appended to it. In our example child theme directory name would be “twentyfourteen-child”.
In the child theme directory create a file called style.css. Specific set of comment line added to the starting of this file detects your theme. Child theme must start with following lines of comments. The only required lines are the “Theme Name” and “Template”.
wp-content/themes/twentyfourteen-child/style.css
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Theme URI: http://saur.in/
Description: This is a child theme of Twenty Fourteen
Author: Saurin Dashadia
Author URI: http://saur.in/
Version: 1.0.0
*/
@import url("../twentyfourteen/style.css");
/* ----------Theme customization starts here----------------- */Theme name is to give your child theme a name. While Template is directory name of your parent theme. Here it is ‘twentyfourteen’. This will be use to identify your parent theme.
The @import section will import parent theme’s css. Make sure your path to the parent theme. Everything here is case-sensitive. make sure your Template parameter and import path reflects the same name as your parent theme has.
Activating child theme.
Now if you have set up everything correctly, your child theme should be listed on themes page(Appearance->Themes). Activate your child theme by clicking on Activate button on child theme.
Now by activating your child theme, you site will use your child theme as am active theme, theme needs many predefined formats as well as many files to run. Like to display your post, your child theme should contain single.php file. Our newly created child theme don’t have such file yet. Still when you will visit your page or post it will going to display the same way as it was before with parent(original) theme, before you activated child theme. This is because child theme will retrieve any missing files from its parent theme. So actually you don’t have to worry about any functionality or styling. You will actually need only those files to be there in child theme, you want to customise.
Modify theme look.
As I said, we only imported parent theme’s style to child theme. So for now there is no change to your site’s look. Lets modify child theme’s style.css to change your site’s look. You can add any changes to your child theme’s style.css file below @import line. All your custom css will load after parent theme css loaded. This way your style will overwrite original style. Let say if we want to make all header tags to be in red colour we should add our style like this;
wp-content/themes/twentyfourteen-child/style.css
/*
Theme Name: Twenty Fourteen Child
Template: twentyfourteen
Theme URI: http://saur.in/
Description: This is a child theme of Twenty Fourteen
Author: Saurin Dashadia
Author URI: http://saur.in/
Version: 1.0.0
*/
@import url("../twentyfourteen/style.css");
/* --------------Theme customization starts here--------------- */
h1, h2, h3, h3, h4, h5, h6 { color: red; }Modify theme functionality.
functions.php is the file where theme’s main functionality is stored. Unlike style.css, we do not need to load parent theme’s functions.php file explicitly. It will load automatically with child theme. If we need to customise functionality we need to create functions.php file within our child theme folder. Child theme’s functions.php file will load just before parent themes functions.php file. We can write our code to this file between PHP tag.
wp-content/themes/twentyfourteen-child/functions.php
<?php
//Your custom code goes here
?>Note: Child theme style.css file should load after parent theme style. While child theme functions.php will load before parent theme’s functions file. Child theme and parent theme’s functions.php file will load in same scope, so make sure you do not create duplicate function names.
Modify other template files.
Just like style.css and functions.php files we can override all related template files. only thing is we need to maintain same template structure it is with parent theme. For an example if we want to customize template file from “twentyfourteen/inc/widgets.php”, we should have to maintain same file structure at child theme like “twentyfourteen-child/inc/widgets.php”. The same way we can also override plugin’s template files. Usually you can find plugin template override information at their official documentation.
If you find this post helpful do share or comment here.