A child theme is a very important part of a self-hosted WordPress blog or website. Child themes allow you to make changes to theme files and override files in your parent theme (core theme).
Why is this important? Let’s say you spend a couple of hours customizing your blog by modifying the main theme files. Then, the developer of your theme puts out an update. Without a child theme, your website`s theme files will most likely be overwritten and all your work will be lost.
What is a WordPress child theme?
A child theme is a theme that imports all settings and theme files from you parent theme but also allows you to specify your own settings in the that will override the parent theme.
Do I have to have a child theme?
Although some say that it is only necessary to create a child theme if you plan to make a lot of changes, I recommend to always use a child theme simply because bloggers are constantly changing the look and feel of their site to provide a better experience for their readers. It is better to have a child theme done before making any changes than to spend several months making changes and have to do it all over again.
What do I need to create a child theme?
Before you get started creating your child theme, you need to make sure you have the necessary tools.
To create a child theme you will need the following:
- A self-hosted WordPress website
- Administrator access to your site’s WordPress dashboard
- A file compressing software such as WinRar, PeaZip, or 7-zip
- A standard text editor such as Notepad, Notepad++ or Sublime Text
Creating the Child Theme
Now that you have what you need, we can get started. A standard child theme will consist of a directory with two main files, your style.css and functions.php files.
To get started, we will need to create the directory. In this tutorial, we will be using Windows 10. If you have any other version of Windows or have an Apple computer and do not understand where to go, please leave your questions in the comments below.
Step 1: Create your Child Theme Directory
Right-click on an empty space on your desktop and in the popup context menu, select New > Folder.
You should now have a new folder on your desktop with the words “New Folder” highlighted in blue. Click on the highlighted words to change the name of the folder.
You will want to rename this folder using the same name as your parent theme and add -child at the end.
For example. If you are using the Twenty-Sixteen theme, you will name this folder twenty-sixteen-child.
Step 2: Add your style.css file to your directory
Now that you have the new file created, double-click it to open the file. You can now add the required files to your directory.
To add your style.css file, right-click anywhere in the empty window and select New > File from the drop-down context menu.
You should have had a new file open in your computer’s default text editor. For this example, we will be working with Notepadd++.
Starting at the very top of the file, copy and paste the following code into it:
/* Theme Name: Theme URL: Description: Author: Author URL: Template: Version: 1.0.0 License: GNU General Public License v2 or later License URL: http://www.gnu.org/licenses/gpl-2.0.html Tags: */
Now that we have our template, we need to customize it to ensure it imports main theme files correctly.
You will need to fill in each line with the information about your child theme. Let’s go line by line.
Theme Name:
Here you should put the name of your child theme. You can name this whatever you like, however, it is recommended to name it after your parent theme and add Child at the end. For example, if you are using the Twenty Sixteen parent theme, you will want to name this Twenty Sixteen Child.
Theme URL:
The theme URL is the link where the parent theme can be found. This is important to let WordPress know where to find the parent theme and check for updates. You can find this URL in your parent theme’s style.css file by going to your WordPress dashboard and going to Appearance > Editor and clicking on the style.css file in the right column.
Once you click on your parent theme’s style.css file, find the line that says ‘Theme URL’ and copy and paste that to your child theme’s style.css.
Description:
The description is a short description of your child theme. You can put anything you like here. This is only really important if you will be sharing the child them with other WordPress users.
Author:
The author is the name of the person who wrote the theme. Since you are the one that will be customizing your child theme, you can put your name here or you can put the name of the parent theme’s author. The parent theme’s author can also be found in your parent theme’s style.css file using the same method as above.
Author URL:
The Author URL is a link to the author’s website. You can either leave this blank, put your blog URL, or the Author URL found in your parent theme’s style.css file.
Template:
This is the most important line. This line tells WordPress what directory name it should look for to find the files for your parent theme. It is very important to make sure that the name you type here is the exact name of the parent theme directory. If you do not know the exact name of your parent theme directory, you can find it by logging in to your web host using FTP or CPanel and going to public_html > wp-content > themes.
The Version, License, and License URL fields can all be left as they are.
For the Tags field, you can use comma-separated keywords that describe your child theme. This is only used if you are uploading your child theme to WordPress.org to share with other users.
Saving your style.css File
Now that we have all the information we need to be customized, you can save your file. To do this, you will need to click on File located at the top left corner of your text editor. In the drop-down menu click Save As.
A window will appear giving you the option to name your file. On the bottom of that window, you will see a text box that says Save As: in that text box, type in style.css. It is very important that you include the .css.
You have now completed your style.css file.
Step 3: Adding functions.php file to the child theme folder
The functions.php file is responsible for telling your blog how to process code. In a child theme, you will need to add a code snippet to tell WordPress to pull all of your parent theme’s styles and functions into your child theme.
To create your functions.php file, let’s go back to your child theme folder by double-clicking on it. Once your folder is open in a new window, right-click on an empty space inside the folder window and select New > File from the drop-down context menu like we did for the style.css file.
Once again you will have a new blank text document open up in your default text editor.
Copy and paste the following code starting at the first line of your new document.
<?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' );
}
?>
Once you have copied and pasted the code to your file, you are ready to save the file.
To save the file you will follow the same steps as we did for the style.css file. Click File > Save As and in the save window be sure to name your file functions.php it is important that you include the .php at the end of the file name.
You should now have a style.css and functions.php file located in your child theme folder. Now we will need to compress your child theme directory to prepare it for upload.
Step 4: Getting your child theme ready for upload
From your desktop, find your child theme folder and right-click on it. In the drop-down context menu, click on Send To then click Compressed (zipped) folder.
A small window will appear showing you the progress of your file compression. When it is done, the window will disappear and you will see a new folder on your desktop. You are now ready to upload your child theme.
Step 5: Uploading and activating your child theme
Now that you have your child theme ready, let’s upload it to your blog and activate it.
To upload your child theme, open your web browser and navigate to your WordPress dashboard. From the dashboard click on Appearance > Themes > Add New.
At the top of your dashboard next to where it says, Add Theme click the button that says Upload Theme.
You should now see a button that says Choose File. Click that button and it will give you a new window.
In the new window, navigate to your desktop and find the compressed zip file we just created in the previous step. Select that file and click Open at the bottom right of the window. The window will disappear and you should be back on the dashboard where you clicked ‘Choose File’ earlier.
To the right of the ‘Choose File’ button, you will now see a button that says Install Now.
Your child theme will be uploaded and you will get a prompt screen to activate or live preview the website. Select Activate.
Your child theme should now be active. Be sure to go to your blog URL in a new window to make sure it is working correctly.
You will need to go through your theme options or customization settings again to adjust your settings. You can do this by going to Appearance > Customize from your dashboard unless your theme has a “Theme Options” section.
If you have any further questions or need help with this process, please leave your comments below.