Once you installed any Paid or Free Theme in your site and then you want to create child theme of that, just follow below simple steps to create a child theme in WordPress.

Why We Need to Create a Child Theme?

If you modify a theme directly and after some time the theme has and update and you update it, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved. This allows us to easily update parent theme without worrying about losing your changes.

How to Create a Child Theme


A child theme consists of at least two files (style.css and functions.php), which you will need to create :

  1. style.css
  2. functions.php

Here we are going to create child theme of  “Twenty Fifteen” theme. Here we have created child theme folder with name “twentyfifteen-child”, we have added text “child” just after using parent theme name. It is not necessary, you can choose your desired name also. We are using parent theme name just to identify the parent theme name from the theme directory directly.

1. style.css

The next step is to create your child theme’s stylesheet (style.css). The stylesheet must begin with the following (the stylesheet header):

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       Code Canal
 Author URI:   http://www.codecanal.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:         dark, two-columns, right-sidebar, responsive-layout
 Text Domain:  twenty-fifteen-child
*/

A couple things to note:

  • You will need to replace the example text with the details relevant to your theme.
  • The Template line (7th) corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so write your parent theme name there.
  • The parent folder name is case-sensitive. If we provide WordPress with Template: TwentyFifteen, then it will not work.

2. function.php

The final step is to enqueue the parent and child theme stylesheets. Create a functions.php in your child theme directory. The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets.

<?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' );

}
?>

Note : The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If  we child theme has more than one .css file (eg. ie.css, sub.css, main.css) then we have to make sure to maintain all of the Parent Theme dependencies.

Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance > Themes. We should see our child theme listed and ready for activation.

Note: We may need to re-set our menu (Appearance > Menus, or Appearance > Customize > Menus) and theme options (including background and header images) after activating the child theme.

There are currently no comments.