WordPress Child Themes

Prerequisities
  • Basic WordPress Knowledge (Maning Content, plugins etc)
  • Basic HTML & CSS and PHP
  • WordPress Installation
  • Sublime Text Editer or Notepad  plus plus

What is a Parent Theme?

A parent theme is a complete theme which includes all of the required WordPress template files and assets for the theme to work. All themes – excluding child themes – are considered parent themes.

What is a Child Theme?

A child theme inherits the look and feel of the parent theme and all of its functions, but can be used to make modifications to any part of the theme. In this way, customizations are kept separate from the parent theme’s files. Using a child theme lets you upgrade the parent theme without affecting the customisations you’ve made to your site.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

  • If you modify a theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
  • Using a child theme can speed up development time.
  • Using a child theme is a great way to learn about WordPress theme development.
Creating Child Theme

We will be making a child theme for Default twenty seventeen WordPress theme, by following the same process you can create a child theme for any WordPress theme.

The first step in creating a child theme is to create the child theme directory/folder, which will be placed in wp-content/themes. It is recommended that the name of your child theme directory is appended with ‘-child’. For Twenty Seventeen Theme, child theme folder will be twentyseventeen-child

The second step is to create child theme stylesheet i.e style.css. The stylesheet must begin with the following header and you need to change example text with your theme data.

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/twenty-seventeen-child/
 Description:  Twenty Seventeen Child Theme
 Author:       John Doe
 Author URI:   http://codedwithpride.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
*/

Third step is to create functions.php file and enqueue parent theme stylesheet. The following snippet will work for main style.css file from your parent theme, if your parent theme has multiple stylesheets like main.css or layout.css alongside primary style.css, then you need to enqueue each style sheets to get all parent theme dependencies.

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