Child theme why and how to create

Child Theme- How & Why to create?

All themes are not perfect. You want some change in your WordPress theme. Sometimes you find new functions or features in other’s WordPress site. You want to add in your theme. Or sometimes you want to the layout of your site. Want you can do for customizing the WordPress theme. You can use plugins. But sometimes WordPress plugins can’t resolve your issue. Like you want to a little part of the code in header or footer. Or you want to remove copyright text of theme provider. Creating child the is the answer.

What is A Child Theme

A child theme is also a theme which extends the another (parent) theme. A child theme may be a theme that inherits the functionality and styling of another theme, known as the parent theme. Child themes are the suggested method of modifying an existing theme.

There are a couple of reasons why you should use a child theme:

  • If you modify an issue directly and it’s updated, then your modifications are also lost. By employing a child theme you’ll make sure that your modifications are preserved.
  • Using a child theme will speed up development time.
  • Using a child theme may be a good way to find out regarding WordPress theme development.

How to Make a Child Theme:

A child theme consists of

  • The child theme directory
  • style.css
  • functions.php

The initial phase in making a child theme is to make the child theme directory, which will be put in wp-content/themes. It is better to name child theme as theme_name-child. Please make sure that there is no space in child theme directory name.

After creating the child theme directory in wp-content/themes, you have to create style.css file. The style.css should start with the stylesheet header. This header, which is in the comment, contains information about the theme. For more about stylesheet header please follow my post.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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-fifteen-child
*/

It’s just a sample. So you have to make some changes.

  • Change child theme name as you want.
  • In template use directory name of the parent theme. Template tell WordPress system about the parent theme.
  • Change other things as you want.

Ways to import parent theme stylesheet

WordPress system has two ways to import parent theme’s stylesheet. These methods to import parent theme’s stylesheet are:

  • using @import in style.css file
  • Enqueuing the parent theme stylesheet in functions.php file.

As @import method is not successful, so enqueuing the parent theme stylesheet is preferred. To import parent theme’s stylesheet create functions.php file in child theme directory and add a bit of code.

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

}
?>

If your child theme’s style.css file also contains CSS you have to enqueue this also.

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css');
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

With this, you can enqueue parent and child theme’s stylesheet. Some points to note are:

  • get_template_directory_uri() retrieve the parent theme’s directory address.
  • get_stylesheet_directory_uri()   retrieve the active theme’s directory address. As this time child theme is activated. So it has child theme’s directory path.

Best plugin to create child theme

Yes, you can create the child theme with plugins. There are so many plugins available for creating a child theme. But i recommended you to use One Click Child Theme. This plugin is free as well as easy to use. You just have to click and fill theme and theme author name.

Modifying template with a Child Theme

Now let see how can you modify the code of particular template of the theme. It just simple, copy the file that you want to modify. And paste it in the same location of child theme as it in the parent theme. Like page template file is at wp-content/themes/your-theme/templates then paste the file in wp-content/themes/your-theme-child/templates. Now you can modify the file as you want. By doing so, file from child theme is rendered in place of parent’s file.

Extending functionality of theme

If you want to extend the functionality of your theme, you can add related code in functions.php file. Like if you want to add a metabox to existing post types. You can easily add related code to functions.php and retrieves its value in the related template file.

Conclusion

Modifying your theme with a child theme is always recommended. As you will not lose your changes on theme update. It’s simple to create a child theme. Even you can create a child theme with the plugin.

Hope you like this post. Your feedback is an applause for me.

Subscribe to this blog to get latest post direct into your inbox.

Share the Article

About author
Darshan Saroya

Darshan Saroya

A passionate WordPress Theme Developer. I love to create clean and modern themes, using the power of WordPress. Here I provide the tutorials related to WordPress Development, Core PHP and HTML.

1 Comment

Add Custom Size Feature Image- WordPress Tutorial - Darshan Saroya

Add Custom Size Feature Image- WordPress Tutorial – Darshan Saroya

October 29, 2017 at 4:56 pm Reply

[…] WordPress.org proposed some method to create the child theme. You can read them at Create a Child Theme. […]