Fundamentally, the WordPress Theme system is a way to “skin” your weblog. Yet, it is more than just a “skin.” Skinning your site implies that only the design is changed. WordPress Themes can provide much more control over the look and presentation of the material on your website. A WordPress Theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. These files are called template files.

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.

Why use a Child Theme?

Here are the few reasons why you should use 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.

How to Create a Child Theme ?

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:

  • The child theme directory
  • css
  • php

 

What is functions.php file?

The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site. You can use it to call functions, both PHP and built-in WordPress, and to define your own functions. You can produce the same results by adding code to a WordPress Plugin or through the WordPress Theme functions file.

A Child Theme can have its own functions.php. This child functions file can be used to augment or replace the parent theme’s functions.

Step 1

 

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you’re creating a theme for public use) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme ‘twentyfifteen-child’, indicating that the parent theme is the Twenty Fifteen theme.

Step 2

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

Write down following comment snippet in style.css file of your child theme.

/*

 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

*/

The Template line 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 adjust accordingly.

Step 3

The final step is to enqueue the parent and child theme stylesheets. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php. You will therefore need to 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. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.

If your child theme style.css contains actual CSS code (as it normally does), you will need to enqueue it as well. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.

Write down below code snippet in your child theme’s functions.php file.

 

<?php function my_theme_enqueue_styles() { 
    $parent_style = 'parent-style'; 
    // This is 'twentyfifteen-style' for the Twenty Fifteen theme. 
    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' ); ?>

Referencing / Including Files in Your Child Theme

When you need to include files that reside within your child theme’s directory structure, you will use get_stylesheet_directory(). Because the parent template’s style.css is replaced by your child theme’s style.css, and your style.css resides in the root of your child theme’s subdirectory, get_stylesheet_directory() points to your child theme’s directory (not the parent theme’s directory).

Here’s an example, using require_once, that shows how you can use get_stylesheet_directory when referencing a file stored within your child theme’s directory structure.

 

require_once( get_stylesheet_directory() . '/my_included_file.php' );

Overriding Template files in Child Theme

If you want to change more than just the stylesheet, your child theme can override any file in the parent theme: simply include a file of the same name in the child theme directory, and it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

You can also include files in the child theme that are not included in the parent theme. For instance, you might want to create a more specific template than is found in your parent theme, such as a template for a specific page or category archive. See the Template Hierarchy for more information about how WordPress decides what template to use.

Advantages of Child Theme

 

  • If we create a child theme we will not need to create a new theme from scratch. Which help to increase the speed of development.
  • You can avoid damaging your site by using child theme for enhancements.
  • You can upgrade parent theme without loosing customizations.

 

As we have seen, building a WordPress child theme is not very complicated. All it takes is a folder and two files.

Yet, despite its simplicity, a child theme is quite powerful. It allows us to completely and safely customize a website without editing any core files.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

logo