Creating a Child Theme

When performing changes to your theme, like changing up the template; adding functionality; or adding CSS, it is often advised to use a child theme. But how do you make a child theme? What even is a child theme? Why do you need this? All questions that people new to this level of ClassicPress will come up against. This tutorial will do its best to answer these questions in the easiest way possible.

What is a child theme?

Simply said, a child theme is a theme that is dependent on another theme. The theme that the child theme is dependent on is called the parent theme. The child theme will pull its code from the parent theme to fill in any gaps. This will make it appear as if you’re using the parent theme.

So why use a child theme?

In the child theme you can overwrite templates, functions and CSS from the parent theme without actually changing the parent theme. This means that when you update the parent theme, these changes will remain in effect. So, you can safely make all the template, styling and functionality changes to a theme that you want, without having updates overwrite your efforts.

How do I make a child theme?

By now you should be convinced that if you are going to make changes to a theme, you should get a child theme. So let’s make one step by step.

What do I need?

• Access to your ClassicPress files, either through FTP or a file manager.
• A parent theme of your choosing. For this tutorial we will use Twenty Seventeen
• A code/text editor.

The Tutorial

Step 1: Open your ClassicPress installation in FTP or a file manager and Navigate to wp-content > themes.

Step 2: Create a new folder and access it. The name does not really matter, but for future reference, it is easiest to name this folder <themename>-child. So in this case it will be twentyseventeen-child.

Step 3: Create a file named style.css in the new folder and open it in an editor.

Step 4: Next we are going to create some theme details. Like below:

• Theme Name => Your chosen theme name
• Theme URL => Your URL
• Description => A short description of the child theme
• Author => Your name
• Author URL => Your domain
• Template => The folder name of your parent theme, in this case twentyseventeen, but this is different for each theme.
• Text-domain => The folder name of your child theme, in this case twentyseventeen-child.

Note: Only Theme Name and Template are required, the rest is optional.

Now add these details to the style.css you created like below and save the file.

/*
Theme Name: Twenty Seventeen Child
Theme URL: https://www.classicpress.net/
Description: Example of a Child theme for Twenty Seventeen
Author: klein
Author URL: https://forums.classicpress.net/u/klein
Template: twentyseventeen
Text Domain: twentyseventeen-child
*/
/* You can add custom CSS below */
 

Step 5: Create a file named functions.php in the child theme folder and open it in an editor.

Step 6: Add the following code to the functions.php file and save it.

<?php
//Enqueue parent theme css
add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_theme_css’ );
function enqueue_parent_theme_css() {
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
//Add custom functions below
?>

Step 7: Go to your ClassicPress admin area and go to themes. When here, ‘Activate‘ the child theme.

Step 8: Your child theme is ready for use!

How do I start making changes?

Now that your child theme is ready for use, you obviously want to start making changes. As mentioned before, there are three main uses for your child theme: change styling, add functionality and edit templates. Doing these three things is easy!

Changing styles

To overwrite your theme’s CSS, simply go to the style.css file you made during the creation of this child theme. Add the CSS changes you want to this file below the details and save them!

Note: The child theme styles are rendered after the parent, so anything you add here will overwrite the specifications made in the parent’s style.css file.

Adding functionality

Often when you are trying to add functionality through snippets, you will be instructed to add them to your theme’s functions.php. It works the same way with a child theme. You can add these snippets or write your own in the functions.php file you made during the creation of this child theme. Just add them below the enqueue_parent_theme_css function.

Editing templates

To edit a template file you must first find the file in your parent theme. For example single.php, sidebar.php, footer.php, etc. When you have found the file you want to edit, make a copy and upload this copy to your child theme. Be careful to keep the URL structure intact! For example, if you found a file in the folder template-parts, make sure it’s also placed in a folder named template-parts in your child theme.

Some plugins also gives you the option to edit their templates in your child theme! An example of this is WooCommerce. To do this, you go to your plugin folder and look in the templates folder. Copy the file you want to edit. When in your child theme, make a folder with the same name as the plugin’s folder (This folder takes the place of templates in your URL structure) and add the copy of the file you wish to edit to this folder. Also make sure the URL structure stays intact from here, just like a theme file.

Note: Because the plugin folder in your child theme takes the place of templates, you do not need to add a templates folder in these plugin folders.

About Patrick Klein

Front-end web developer and Google certified SEO and SEA professional from the Netherlands working for a company that has been around for over 50 years with a specialty in PR and advertisement. In recent years we have also been working on getting beautiful websites up and running that are affordable for smaller companies.

View all posts by Patrick Klein | Website