How to Create Child Theme in WordPress

Child theme is a famous but a confusing term among many WordPress users. You must have heard it, tried it and even used it. Building Child theme is not as complicated as it sounds. In this article we will be showing you what is child theme and how to create child theme in WordPress.

What is a WordPress Child Theme?

WordPress child theme is that theme which inherits all the functionality, features and the code from its parent theme. Child theme is depended in the parent theme or a theme framework. Child theme is not an individual theme but addition or modification of any existing parent theme. You can edit and make changes to the child theme without even affecting the parent theme. You can experiment with appearance and functionality of your website without any fear of crashing.

There is one more major advantage of child theme that is to preserve your customization in any theme during theme update process. Even if you update your parent theme, your customization will be protected safely in the child theme. For developers and designers child theme can speed up their development process.

Advantages of using child theme
  • To preserve your modification and customization safely in the child theme when parent theme is updated.
  • Using child theme can speed up the development time and process.
  • To learn about WordPress theme development.
  • It’s easy to remove the changes you have made and get back to original theme by just disabling the child theme.
WHEN TO USE A CHILD THEME

There are instance when child theme may not be needed for minor changes. Sometimes plugins and other options can do the job for you. But if you plan to make larger changes then child theme is a necessity to preserve changes.

How to Create Child Theme in WordPress

The steps shown in this article can be performed directly in your host server or by using FTP. But things will be less complicated and safer if you set up and experiment with your child theme on local server. You can off course upload the child theme folder later into the server like any other theme.

Creating a Child Theme from an Unmodified Parent Theme

Child theme needs minimum of three things:

  • The child theme directory
  • css
  • php

First create the child theme directory and place it inside wp-content/themes. The best practice is to keep the child theme’s folder name same as the parent folder name and append it with –child. Also make sure there are no spaces in your child theme directory name. In our case we will be using the twenty-seventeen theme as parent theme so our child theme will be called twenty-seventeen-child.


How to Create Child Theme in WordPress

Creating child theme stylesheet

The next step is to create the child theme’s stylesheet (style.css). Simply create a new text file and call it style.css. Then place the following code in your stylesheet.

/*
Theme Name: Twenty Seventeen Child
Theme URI: http://example.com/twenty-seventeen-child/
Description: Twenty Seventeen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyseventeen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-seventeen-child
*/

You may have to change a couple things here in order to adjust to your theme. You may be working with different theme so adjust the above detail in accordance to your theme.

Using function.php file to enqueue the parent and child theme stylesheets

The function.php file is used for adding functionality and features to the website. We can also use functions.php file to import or enqueue the styles from the parent theme to the child theme. Enqueuing is the standard way of adding styles and scripts to WordPress. If you want to know more about enqueuing, we recommend you check our article on “How to Add Scripts and Styles in WordPress?”.

Let’s assume your parent theme has style.css as the main stylesheet file. In order to import it to child theme add the following code in the functions.php file.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {
    wp_enqueue_style( ' twentyseventeen-style', get_template_directory_uri() . '/style.css' );
}
?>

If you want to import more stylesheet from the parent theme then you can use more wp_enqueue_style() function inside the my_theme_enqueue_styles() function. If you don’t want to add any CSS code in the child theme stylesheet then the above enqueueing should work for you. But if you are planning to add the custom CSS codes to the child stylesheet. Then you have to enqueue these codes as well.

All you have to do is set ‘parent-style’ as a dependency which will ensure that the child theme style will be load only after parent theme style. Here is the full and better code that you can use to import styles in the recommended way.

<?php
function my_theme_enqueue_styles() {
    $parent_style = ' twentyseventeen-style ';/* You can replace 'twentyseventeen-style' with your theme style if you are using any other theme.*/
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ), wp_get_theme()->get('Version') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Activate Child Theme

Now your child theme should be ready. Log in to your site’s admin panel and simply go to Appearance > Themes. If you see your child theme in the list, then congratulation you have successfully created the child theme. Simply click activate to make it your active theme.

Also Read:   How to Create Child Theme from Modified Existing Theme

How to Create Child Theme in WordPress

Now if you check your website your child theme should make your website look exactly like your parent theme. That’s it now you have successfully created your child theme for your primary theme. Now you are free to start doing modifications in the child theme according your requirement.

Some useful modifications for the child theme.

Add Theme image for the child theme

Find a suitable image to be used as the theme image. Make sure the image is in PNG format with the standard size of 880 × 660 pixels. Name the image as screenshot.png and place it inside the child theme folder. Make sure the image is kept in the top level directory and not in the sub directory. Now if you go to Appearance > themes then you will see child theme has a cover picture of the image which you have recently uploaded.

How to Create Child Theme in WordPress

Adding custom styles to the child theme

Now you can safely add the custom styles in your child theme’s style.css file. You are free to make any kinds of change like the color, fonts, padding, margin and so on.

Right now Twenty Seventeen theme looks like this.

For demonstration let’s change the background and text-color. Let’s add this simple example code in style.css of child theme


.site-content-contain{
    background-color: #bbb;
    color:#f90;
}

When we reload the website we can see the changes showing that CSS codes in child theme stylesheet file is being implemented.

Changing the template files

You can also use the child theme to override any file in the parent theme.  All you have to do is add a file in the child theme folder with the same name of the file in the parent theme folder which you want to change. The file in the child theme will override the file in parent theme. For example, if you want to make any changes in the header file, then you can simply add header.php file with the necessary changes in the child theme.  The header.php file in the child theme directory will be used instead of that inside the parent theme. You can also add the new files that may not be present in the parent theme.

Using Functions.php File

The functions.php file in the child theme folder will be loaded in addition to the parent theme folder’s function file. Unlike stylesheet it does not override its parents function file but appends it. It is a wise move to add functionality in the child theme instead of adding functionalities in your parent theme. This will save your functions from being disappeared in the future updates.

Conclusion

The aim of this article was to clarify you the concepts of child theme and show you how to create Child Theme in WordPress. No matter how much complicated it sounds but child theme is pretty simple and straightforward to use once you know the concept. Child theme protects your main theme from crash, saves your changes during updates and gives you the safest way to experiment with your theme. We hope the article was helpful. You can read our next article on “How to Create Child Theme from Modified Existing Theme”.

The following two tabs change content below.
Kantiman Bajracharya

Kantiman Bajracharya

Kantiman Bajracharya is a freelance web developer. He is a computer geek who has a Bachelor’s degree in Computer Engineering. He has earned lots of satisfied customers while working for numerous successful projects. He is also a WordPress theme creator and web article writer. On free time he likes reading philosophy books, traveling and playing chess.

Share This Post