What is a Child theme and how to use it

Why You Should Be Using Child Themes

Creating a child theme when performing adjustments to your theme’s code can save you a lot of future headache. Child themes allow you to make changes without affecting the original theme’s code, which makes it easy to update your parent theme without erasing your changes. 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. Not only does this make updating easier, it also makes sure that you will never ruin your original theme as you are never actually modifying the files. You can always turn off your child theme and fall back on the original.

There are a few reasons why you would want to use a child theme:

• If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
• Using a child theme can speed up development time.
• Using a child theme is a great way to learn about WordPress theme development.

Creating Child Themes

WordPress child theme allows you change the functionality of the theme without having to edit the original/parent theme template files. If you need to modify any template file, we recommend to create a child theme instead of editing the theme template files. Since the child theme is stored separately, you don’t need to redo the changes next time you upgrade the theme. Coding child themes requires some basic computer skills (ie. creating PHP files, uploading files, and modifying code).

How Child Theme Works

Basically once the child theme is activated, WordPress will look for the template files in the child theme folder first. If the file doesn’t exist in the child theme, it will fallback to the parent theme folder. In other words, if there is a “header.php” in the child theme, WordPress will use that “header.php”, else it will use the “header.php” file in the parent theme.

1) Creating a Child Theme:

To start a child theme, create a new theme folder (eg. “folo-child”) under the “wp-content/themes” folder. Create a new CSS file in the child theme folder and name it style.css. Paste the sample code below in the style.css file.

• Theme Name (required) = use the parent theme name + child to make it easy to identify (eg. “Folo Child”)
• Description  (optional)= you may enter any text here
• Author  (optional) = your name
• Template  (required) = name of the parent theme folder (in this case, it is “folo”)
• Then you may add any additional custom CSS as you want

/*
Theme Name: iBid Child
Description: Child theme for iBid theme
Author: ModelTheme
Template: iBid
*/

/* write custom css */

Finally, we need to load the stylesheet of the parent theme. Create a file named functions.php in the child theme folder, edit it, and paste the following:

<?php
/**
* Enqueues child theme stylesheet, loading first the parent theme stylesheet.
*/
function ibid_custom_enqueue_child_theme_styles() {
wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'ibid_custom_enqueue_child_theme_styles' );

2) Overriding Parent Theme Template Files

To override the template files in the parent theme, open the original template file and save a copy to the child theme folder with same file name and folder structure. Basically, the file structure has to match with the parent theme.

FOR EXAMPLE:

• let’s say you want to edit the loop.php file in the parent theme and it is stored in the “includes” folder
• open the loop.php file and save a copy in the “includes” folder of the child theme
• edit and save the loop.php in the child theme

Child Theme functions.php (optional)

If you need add additional PHP functions, add them in the functions.php file in the child theme folder. It will load before the parent theme functions.php file.

<?php

/* custom PHP functions below this line */

3) Activating The Child Theme

Finally, activate the child theme at Appearance > Themes.