How to create a WordPress Child theme

There are a lot of really great WordPress themes available, but sometimes you might run into a situation where you’ll want to change something about your theme.

Whether you’re using a free theme from WordPress.org or a premium theme that you’ve purchased from a site like Themeforest, there may come a time when you want to adjust something that isn’t possible within your theme’s customization options. Your only recourse, in this situation, is to edit the theme’s core files.

The problem, of course, is that if you edit your theme directly your customizations will be lost if you update your theme in the future.

Maintaining an up-to-date theme is important for security purposes, but if you’ve edited your theme’s core files you’ll lose the changes that you’ve made. Manually reinserting your custom code each time you update your theme is a huge chore, and nobody wants to do that.

This is where WordPress child themes come in.

In this article, I’ll explain you about what is a WordPress child theme, when to use it, how to create them and some more details.

What is a WordPress child theme

A child theme is a separate theme that works on top of a “parent theme,” which is whatever theme you are using on your site. Any customizations that you make in the child theme will be reflected in the parent theme, even after you update the parent theme.

WordPress will look at your child theme first, implement any styles or functions from that theme, and fall back on the parent theme to take care of the core code and any stylistic elements that are not addressed in the child theme.

Child themes can be extremely simple, with a few lines of CSS to add a custom color scheme to your site, or they can be fairly complex, adding whole new levels of functionality atop the framework of an existing theme. Essentially, child themes give you the freedom to only modify the things you need to change and leave the rest of the parent theme in place.

When to use a child theme

There is no “golden rule” in terms of when to use a child theme. Generally speaking, however, if you are going to be adding any custom code to your theme it is a good idea to use a child theme.

In some cases, you can add custom CSS directly into your theme’s core files from within your theme’s WordPress Dashboard, which might suffice for smaller modifications. If you plan to make major changes to your theme’s core PHP files, using a WordPress child theme is highly recommended.

How to create a WordPress child theme

Particularly for people with limited PHP experience, child themes can sound intimidating. Don’t be afraid!

• Creating a WordPress child theme is extremely easy!
• You can make one for any WordPress theme.
• Experimenting with a child theme is great way to learn without damaging your theme’s core code.

To create a child theme, you will need to access the main WordPress directory within your website via FTP. If your web host provides cPanel, you can also access your root directly from there using File Manager.

• Once you are in your site’s directory, navigate to wp-content/themes/
• Create a new folder there
• Name the folder. Ideally, choose something like “YourTheme-Child”

Create a style.css file

• Within the folder that you’ve just created, you’ll need to create a new file called “style.css”
• Copy and paste the following information into your style.css file, and change the appropriate information to reflect your website.
• The “Template” field will tell what WordPress theme is the parent theme, so be sure to enter that correctly.
• The @import url will be the file path to your parent theme’s style.css file. This will import all of the CSS styles from that theme into this stylesheet, and you will add any customizations after this, which will be given priority over the parent theme’s styles.

 Theme Name:     My Child Theme
 Theme URI:      https://www.yourwebsite.com/
 Description:    My Child Theme
 Author:         Your Name
 Author URI:     https://www.yourwebsite.com
 Template:       ParentTheme 
 Version:        1.0.0
*/

• Save the style.css file

Note: the parameters in your style.css file are case sensitive. Be sure to pay attention to spelling and capitalization when entering the name of your parent theme.

Create a functions.php file

• In order to get your child theme working, you’ll want to create one more file in the child theme directory.
• Name this file “functions.php”
• Enter the following code into the functions.php file

<?php

add_action( 'wp_enqueue_scripts', 'my_enqueue_assets' );
function my_enqueue_assets() 
{
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

• This function will load the CSS styles from the parent theme.
• Save functions.php
• You should now have 2 files in your child theme folder: style.css and functions.php
• At this point, you can connect to your site via FTP and upload the child theme folder into your WordPress themes directory at wp-content/themes/

• Once you’ve uploaded the files to your site, you should see the child theme appearing in your WordPress Dashboard under Appearance -> Themes
• If you activate your child theme at this point, your site should look exactly the same. Because there are no custom styles in the child theme’s style.css file, your site is simply referring to the parent theme’s stylesheet.

Customizing your WordPress child theme

Customizing CSS

You will want to add any CSS customizations into the style.css file of the child theme, below the comment you added when you created the file. For example, to change the background color of the site to black, we would add the following code:

Customizing PHP

Beyond making changes to your theme’s CSS, you can also modify the structural elements and functionality of your theme by editing PHP template files. Child themes work on a file-to-file basis.

Basically, when WordPress looks through your files, it will check the child theme first to see if a file exists. If it does, it will use that file; if not, it will load the file from your parent theme. The one exception to this is functions.php. Both the parent theme and child theme version of functions.php is loaded.

To edit php template files, you will need to copy and paste the file you want to edit from the parent theme into the child theme. For example, let’s say that you want to edit your site’s header:

• You will want to copy the header.php file from your parent theme and paste it into your child theme

• Now, you can edit the header.php file in your child theme by opening it in the text editor of your choice.
• If you are not working a local development environment, you will need to re-upload the file to your site each time you modify it and save your changes.

When modifying PHP files, it is important to pay attention to directory structure within your theme. You must replicate the file structure of the parent theme exactly in your child theme. Files like header.php are often found in the main theme folder, but many themes store additional files in subdirectories.

For example, let’s say you want to modify your site’s widgets.php file, which is found in the parent theme within a folder called “includes.”

• In the parent theme, the widgets.php file is located in a folder called “includes.”
• You will want to copy the widgets.php file from the parent theme and paste it into the child theme, replicating the file path exactly as it exists in the parent theme.

• Now you can safely edit the widgets.php file from the child theme. Because the naming and file structure is identical, WordPress will know to use this file rather than the parent theme’s widgets.php file.
• Any time you want to modify a php file, you will want to follow this same process of copying and pasting the file from the parent theme into the child theme, creating the necessary directories (such as “/includes/”) to replicate the file path.

In addition to serving a practical purpose, working with child themes can be a great way to improve your WordPress skills and experiment with styles and functions. WordPress child themes can also save you a lot of trouble in terms of maintaining an updated site without worrying about losing customizations.

Getting into the habit of creating a WordPress child theme any time you plan to alter your theme’s core code is in keeping with best coding practices, and is highly recommended.

If you like the sound of using a child theme, but all of this sounds way too complicated, you can always use the free One-Click Child Theme plugin to create a child theme for your site and skip the grunt-work. This plugin works with any WordPress theme, but you will still need access to FTP to edit your theme’s files.