Why and How to Create and Use WordPress Child Theme

In this tutorial we are going to see how to create WordPress child theme, how to use it and the reasons behind using child theme.

What is WordPress Child Theme

WordPress child theme is a WordPress theme that inherits and overwrites functionality of its parent theme. The WordPress child theme can’t be activated without activating its parent theme because it depends on the functionality of its parent theme to work.

Why to Use WordPress Child Theme

If you make any changes in your theme then you have to make these changes again after your theme updation as changes made in the theme files get overwritten and lost on theme updation so you have to keep track of all changes made in the theme files and make these all changes again after theme updation.

But making these changes in the theme again and again after every theme updation is tedious and time consuming task. Also after theme updation the code in the theme files may get changed which will result in changing number of lines of code so you may get confused on which line you should make the change.

When editing code in the theme file you may accidentally edit existing theme code which will cause an error on your site and your site may go down.

To overcome these issues the super simple solution is that you should create and use WordPress child theme as described below when you want to make any changes in your theme.

When not to Use WordPress Child Theme

There are situations as described below where you can skip using child theme to make changes in the functionality of the theme.

If you want to make just some CSS changes in your theme then instead of creating child theme you can use various other options as described on the following page to use that custom CSS on your site.

How to Use Custom CSS in WordPress Site

If you are using the theme on various sub sites of your multisite and want to make minor change in the theme using WordPress hooks used in the theme then instead of creating and using child theme on each of these subsites you can just develop a small WordPress plugin as described on the following pages

https://codex.wordpress.org/Writing_a_Plugin
https://premium.wpmudev.org/blog/wordpress-plugin-development-guide/

and then use it on your multisite either by network activating it or using it as mu-plugin as described on the below page.

https://codex.wordpress.org/Must_Use_Plugins

How to Create WordPress Child Theme

As mentioned above every child theme is dependent on its parent theme to work so before creating child theme we should decide for which theme we are going to create a child theme. To demonstrate you how to create child theme, i am going to create child theme of default WordPress Twenty Sixteen theme.

To create WordPress child theme just create a directory for child theme and name it whatever you want to name it and then create a file named style.css in that created child theme directory.

In the created style.css file add the following lines of CSS code.

/*
Theme Name: Twenty Sixteen Child Theme
Template: twentysixteen
*/

In the above code i have added “Twenty Sixteen Child Theme” as a name of child theme, you can add there whatever name you want to name for your child theme. The “twentysixteen” is a name of parent theme directory which in my case is Twenty Sixteen theme directory, you have to add in place of “twentysixteen” in the above code to the parent theme directory name for which you are creating a child theme.

The above added “Theme Name” and “Template” are mandatory items in the style.css file of child theme but you can also add other optional items in it as following which are self descriptive.

/*
Theme Name:   Twenty Sixteen Child Theme
Template:     twentysixteen
Theme URI:    http://freewptp.com/tutorials/why-and-how-to-create-and-use-wordpress-child-theme
Description:  Twenty Sixteen Child Theme Desciption
Author:       Movin
Author URI:   http://freewptp.com
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-sixteen-child
*/

Some of the above added items display in the theme pop up on clicking on the theme thumbnail in the Themes screen as displayed in the following screenshot and other items are instructions for WordPress and for informative purpose.

WordPress Child Theme Preview
WordPress Child Theme Preview

The child theme only requires the above created style.css file and the above mentioned two mandatory items in it and all other things are optional but the child theme only loads the created style.css file automatically and not the style.css file of parent theme so if your child theme depends on stylesheet added in the style.css file of your parent theme then you have to load the parent theme style.css file explicitly.

To load parent theme style.css file just create functions.php file in your created child theme directory and add the following code in it.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Now your child theme is ready and you can use it on your site as described below.

How to Use WordPress Child Theme

To use created child theme on your site first make sure that you have installed the parent theme of created child theme on your WordPress site.

Then create a zip file of created child theme directory as described in this page http://www.wikihow.com/Make-a-Zip-File and install this zip file on your WordPress site as described here http://www.wpbeginner.com/beginners-guide/how-to-install-a-wordpress-theme/.

If you have cPanel or FTP access of your site then you can also install the child theme directly by uploading the child theme directory in to your WordPress install /wp-content/themes/ directory as described here https://codex.wordpress.org/Using_Themes#Adding_New_Themes_by_using_cPanel

After installing child theme on your WordPress site to use it just activate it on your site from the Themes screen as shown in the following screenshot.

Activate WordPress Child Theme
Activate WordPress Child Theme

How to Customize WordPress Theme Using Child Theme

We have just created a simple child theme and used it on our site. Now we are going to customize the parent theme using created child theme.

If you want to customize parent theme using CSS code then just add that CSS code in the created style.css file.

Suppose i want to right align the copyright text displayed in the footer of Twenty Sixteen theme which is by default left aligned then i will use the custom CSS code in the style.css file as following.

/*
Theme Name:   Twenty Sixteen Child Theme
Template:     twentysixteen
Theme URI:    http://freewptp.com/tutorials/why-and-how-to-create-and-use-wordpress-child-theme
Description:  Twenty Sixteen Child Theme Desciption
Author:       Movin
Author URI:   http://freewptp.com
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-sixteen-child
*/

#colophon {
    display: block;
}
.site-info {
    float: right;
}

If you want to customize functionality of parent theme function or class which is wrapped in the condition function_exists or class_exists then you can do so by just copying the declaration of that function or class from parent theme and adding it in the above created functions.php file of your child theme. Now you can customize this function or class however you want to.

Suppose i want to customize the function twentysixteen_excerpt declared in Twenty Sixteen parent theme then i will just copy it and add it in the above created functions.php file as displayed below.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

function twentysixteen_excerpt( $class = 'entry-summary' ) {
        $class = esc_attr( $class );

        if ( has_excerpt() || is_search() ) : ?>
                <div class="<?php echo $class; ?>">
                        <?php the_excerpt(); ?>
                </div><!-- .<?php echo $class; ?> -->
        <?php endif;
}

If the parent theme is using WordPress hooks then you can use it in the functions.php file of your child theme to customize the parent theme hook function functionality.

In the following functions.php file code i used the filter hook body_class added in the Twenty Sixteen parent theme to add my custom class ‘page-not-found’ to body tag on 404 page not found pages.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

function twentysixteen_excerpt( $class = 'entry-summary' ) {
        $class = esc_attr( $class );

        if ( has_excerpt() || is_search() ) : ?>
                <div class="<?php echo $class; ?>">
                        <?php the_excerpt(); ?>
                </div><!-- .<?php echo $class; ?> -->
        <?php endif;
}

function custom_twentysixteen_body_classes( $classes ) {

	if ( is_404() ) {
		$classes[] = 'page-not-found';
	}

	return $classes;
}
add_filter( 'body_class', 'custom_twentysixteen_body_classes' );

If you want to customize any template file of parent theme like page.php, header.php, footer.php etc. then just copy it from the parent theme directory and paste it in the created child theme directory, now you can edit this copied template file however you want to.

You will find more information about WordPress template files on the below page.

https://developer.wordpress.org/themes/basics/template-hierarchy/

Download WordPress Child Themes of Some Popular WordPress Themes

Download WordPress Twenty Sixteen Child Theme

Download WordPress Twenty Fifteen Child Theme

Download WordPress Twenty Fourteen Child Theme

Download WordPress Twenty Thirteen Child Theme

I hope you find this free tutorial helpful but if you have any questions regarding child theme or any other WordPress question then feel free to ask it in our free WordPress support forum where i would like to answer you.

Leave a Reply

Your email address will not be published. Required fields are marked *