How to create a WordPress Child Theme

How To Create WordPress Child Theme - CodeFlist

Are you ready to create a child theme in WordPress?

Parent Theme Installation

You need to decide which theme you prefer. Depending on your preferences, you should choose the theme that you want to select as a parent theme.

How To Create a WordPress Child Theme Directory

Create a new file in the public_html/wp-content/themes folder of the WordPress installation to hold the theme. Avoid doing this in a live site. You can test this in a development site before implementing on staging site. Usually, there is a good practice of keeping the new folder name starting with a parent theme name followed by a suffix.

This process involves the creation of two files: stylesheet and functions file.

Create a StyleSheet

Create a new file
style.css
inside the folder and add the following code:
/*

Theme Name: CodeFlist Child Theme

Theme URI: https://yourwebsite.com/codeflist-child/

Description: Child theme from parent CodeFlist theme

Author: Amar Raj Mahato

Author URI: https://demo.codeflist.com/

Template: CodeFlist

Version: 1.0.0

Tags: black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated

Text Domain: codeflist-child

*/

This code tells WordPress about the theme. As the text is commented out, it does not run anything on your site. Every theme has this file so as to be familiar with WordPress.

The lines having Theme Name and Template cannot be skipped in this code. The template should contain the directory name of the parent theme. It is usually case sensitive as well. All other fields should be written as required. Make sure you do this correctly with your favorite editor.

Make the Functions File

The addition of functions file is a necessary step to enqueue the stylesheet from the parent theme. If you miss this step, then your child theme would have no styling at all. Also, add file
functions.php
in the new folder. Add the following code to it:
<?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' );
}
?>

The mechanism to create a Child Theme in WordPress

They work on a file-level. When a function calls the file, it checks whether or not it is present. In case, the file is absent in the child theme, it will load from the parent theme. However, it has an exception in the form of the theme’s function file. If the
functions.php
file is called, it is loaded from both the locations. Your site will malfunction if the parent theme’s function does not work. If the entire content of the parent theme’s function file is copied to the child then that would be a solution. This is not a good approach to extend the theme. If the footer file is to be changed then the footer file from the parent has to be copied to the child. Then process the files and save the changes. This is applicable in all sections that you want to change.

Suggestions for Child Theme Makers

You need to know the difference between
get_stylesheet_directory()
and
get_template_directory()
if you make your own themes. You must be clear that the
get_template_ function
will always point parent theme directory and
get_stylesheet_ points
the child theme’s directory. The choice is yours, whether you want to use the parent or the child.

Files in Child Theme

There are at least two files, a stylesheet, and a functions file. The stylesheet tells WordPress about the type of theme. It also gives an idea about the parent theme. All the details are included in the stylesheet with the help of commented out text format.

There is a wrong practice of calling one stylesheet from another stylesheet. In fact, you should be enqueuing the functions file. There should be a function in the functions file that enqueues the stylesheet. 

The parent theme contains an
index.php
file but it is not needed in the child theme.

How to Activate Child Theme

WordPress uses a file from the parent theme unless you override by adding files to the child theme. Go to
Appearance>Themes
, you will find the theme among the installed themes in your site. You need to activate to enjoy its features. If you haven’t added any customizations then it looks the same.  

How to Create and Customize WordPress Child Theme

Now, when you have a working theme, you can add customizations according to your desired requirements. If you want to edit style sheets then you can define rules in the
style.css
in the child theme folder. Not only you can edit template files but also you can update the parent theme without losing any customizations. However, writing functions can be more complex than adding template files. If you want to add any new function then you need to go to the
functions.php
file. Once you write the function, add the relevant action or filter to add the extra functionality.

Basically, there are three methods if you plan to override the parent theme function.

  • When you have a pluggable parent theme, you can write another function in the child theme with the same name. The function in the parent theme will be skipped due to this.
  • When you have an unpluggable parent theme, unhooking can be done to prevent running a function from the parent theme.
  • There are cases when you can add a new function to attach to the same hook but with a different name. This is done without overriding or removing a function.

Fix Child and Parent Theme Errors

After the creation of a child theme, there may be some problems due to some function, styles or other files. There are a series of steps to make sure that everything is correct.

  1. Check whether or not the child theme has been activated. You have to be sure about the status of a parent theme.
  2. Clear the browser cache and cache created by the plugins.
  3. Check whether or not you have named the files correctly with correct syntax when you create a child theme in WordPress.
  4. Check if you have saved the changes or not.
  5. If the pluggable function is not working, check if there is a name mismatch or the function in the parent theme is pluggable or not.
  6. Check the priority values and hooks present in the function in case of overriding issues.
  7. Check the priority value, name and hook if the issue is generating from the removed function.
  8. Find where and where there is an error in the code by checking the wp-config.php file in debug mode.
  9. The output code for different elements must be verified.

Things To Remember for WordPress Child Theme

  1. There should be a stylesheet and a functions file in a child theme. 
  2. Do not edit third party themes directly without creating a child theme. This will safeguard the customizations made.
  3. Activate the theme and do not delete the parent theme.
  4. When there are two files with the same name, WordPress will use the file in the child.
  5. To override a pluggable function in the parent theme, you have to create the function in the child theme with the same name.
  6. With the use of remove_action() or remove_filter() function, you can unhook a function from the parent theme.
  7. When you create a function with the same hook, you can augment a parent theme function.         

Wrapping Up

You should keep these things in mind to create a child theme in WordPress, you can gain maximum advantage. Hopefully, this article clears your doubts about the child and parent theme.    

Additional Readings