Creating Child Theme in WordPress is a theme that inherits the functionality and styling of another theme, called the parent theme. If you need to modify any template file, we recommend to create a child theme instead of editing the theme template files. Since the child theme is stored separately, you don’t need to redo the changes next time you upgrade the theme.
Thus creating a child themes is the best recommended way of modifying an existing theme.

Creating Child Theme

Why to use a Creating Child Theme in WordPress?

  • 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.

1) Creating Child Theme

To start a child theme, create a new theme folder (eg. “themelines-child”) under the “wp-content/themes” folder.A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:

Create a new CSS file in the child theme folder and name it style.css. Paste the sample code below in the style.css file.

  • Theme Name (required) = use the parent theme name + child to make it easy to identify (eg. “Themelines Child”)
  • Description (optional)= you may enter any text here
  • Author (optional) = your name
  • Template (required) = name of the parent theme folder (in this case, it is “themelines”)
/*
 Theme Name:   ThemeLines Child
 Theme URI:    https://www.themelines.com
 Description:  ThemeLines Child Theme
 Author:       ThemeLines
 Author URI:   https://www.themelines.com
 Template:     themelines
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  themelines-child
*/

To load the stylesheet of the parent theme you can use “@import url(“../themelines/style.css”);” or create a file named functions.php in the child theme folder, edit it, and paste the following

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

2) Overriding Template Files in the Parent Theme

To override the parent theme template files, open the original template file in the parent theme and save a copy to the child theme folder with same file name and folder structure. Basically, the file structure has to match with the parent theme.

For example:

  • let’s say you want to edit the loop.php file in the parent theme and it is stored in the “includes” folder
  • open the loop.php file and save a copy in the “includes” folder of the child theme
  • edit and save the loop.php in the child theme

For another example:

  • let’s say you want to edit the page.php
  • open the page.php file and save a copy in the child theme
  • edit and save the page.php in the child theme

Some of the template files that you can override, here are some example:

  • header.php
  • footer.php
  • index.php
  • single.php
  • page.php
  • template-home.php
  • sidebar.php
  • includes/loop.php
  • includes/slider.php

3) Activating The Child Theme

Finally, activate the child theme at Appearance >> Themes.

Leave a Reply

Or

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


CAPTCHA Image
Reload Image

Find us on Facebook

Subscribe to our Newsletter