How to create a Child Theme in WordPress

Are you wondering with the word Child Theme ?. If the answer is yes, doesn’t matter, we are going to learn about Child Themes now. If you’re aware with Child Themes that is better for your career advancements. What are Child Themes ?. Child Theme is also a theme which inherits Functionality and Styles of the Parent Theme. Why you need Parent Theme and Child Theme ? If you’re the developer of the theme, updates are just fine. But assume you’re using a theme from other/third party, its updates can be available any time. And once you do update theme your code changes can be updated with the new update. At that point Child Themes are coming into the arena. If you need to customize without any interference with the Theme update, you have to use Child Themes. Assume you are using the theme twentyseventeen from WordPress. Lets say you need to change styles of that theme. Therefore you can use Child Theme of twentyseventeen.

This is the method I am recommending to do.

  1. Get a full copy of twentyseventeen directory and rename it as twentyseventeen-child.
  2. Keep only functions.php, style.css and screenshot.png files. Remove other all.

Basics for the Child Theme almost done. Moving forward first open up your function file and remove all. Add just opening PHP tag and its done for the moment. Then open up your style.css file and remove all the stuff except Theme Header. Change the Theme Name: Twenty Seventeen to the Theme Name: Twenty Seventeen Child and Text Domain: twentyseventeen to the Text Domain: twentyseventeen–child. Here you need to keep in mind one thing and it is playing a major role in WordPress Child Theme. You need to use Template attribute. This attribute refers to the parent theme of the child. Here is a full example of changed header.

/*
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:     twenty-seventeen
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
*/

Now you’re done with the Child Theme and you can activate your new theme by navigating to Appearance > Themes. Click and activate the Child Theme and you can check for the site front end. Is your site functioning correctly ? Answer should be no. Because your site styles are wired at the movement. Lets fix this.

Open up your function.php file and lets add stylesheet path to it.

add_action( ‘wp_enqueue_scripts’, function() {
   wp_register_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
   wp_enqueue_style( ‘parent-style’ );
});

You need to enqueue parent stylesheet to the Child Theme and we are done. Lets check the site and it is functioning as we are expecting. As same as before. To customize the child theme we need to add current Child Theme stylesheet also. Lets move forward and add the Child Theme stylesheet. Then your function should be look like the following.

add_action( 'wp_enqueue_scripts', function() {
   wp_register_style( 'parent-style', get_template_directory_uri() . '/style.css' );
   wp_register_style( 'child-style', get_stylesheet_uri() );
   wp_enqueue_style( 'parent-style' );
   wp_enqueue_style( 'child-style' );
});

Now you have enqueued all the files we need. Now you can customize your theme without bothering any theme update in future. Lets change body background color to red. You just need to add the style to the new Stylesheet. Add following to the stylesheet.

body {
   background: #f00;
}

Go to the site front end and refresh the page. Your web site background has been changed to Red. You can do many stuffs here. Hope you’re enjoying what we have come up with so far. Actually this is Child Theme. Going deeper lets discuss another part.

Assume you need to change the Error page design. Lets create a page called 404.php in Child Theme directory. As other page called headers and footers and add the content as you’re expecting to show. Here is an example. You can use whatever the design you are expecting. Save the file and add your styles to stylesheet. Once you are done with the HTML and CSS, of course you are done with the changing your 404 page.

<?php
/*
* 404 Page Template
*/
get_header();
?>
<div class="container">
<div class="error-wrapper">
<i class="fa">&#xf06a;</i>
<h1>Oops! Something Went Wrong!</h1>
<h4>This page you are looking for does not exist</h4>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">Back to Home</a>
</div>
</div>
<?php
get_footer();
?>

Now you have complete your file editing. Lets move onto the web site and check for ambiguous URL to check our 404. You’ll notice that our latest 404 page design is up and running. Hope you’re done with Child Themes.

You may also like...

Leave a Reply

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