How to create a WordPress child theme

A child theme is a WordPress theme that can be used to make changes to your website’s layout without having to edit the (parent) theme. This way, when the parent theme receives an update, your changes will not be overwritten.

This article will explain all the steps required to create a WordPress child theme.

What is a child theme?

A WordPress theme is a combination of (PHP, CSS and more) files that define the layout and – to some extent – functionalities of your WordPress website. WordPress themes can be found in the themes directory on WordPress.org (free) or on sites such as Themeforest and Elegant Themes (premium).

A theme becomes a parent theme when there is a child theme installed. Some themes come with a pre-generated (empty) child theme that allows you to do customization. Others will require you to create your own child theme.

A child theme is a theme like any other WordPress theme. It can be found and activated in the WordPress “Appearance > Themes” menu. A child theme can only be activated when the required parent theme is installed. On this website for instance, I use the Twenty Nineteen default WordPress theme and a child theme for customization.

When should you use a child theme?

You should use a child theme when you are looking to make any modifications to your WordPress theme in terms of CSS, HTML or PHP.

If you have no clue what those things are, you’ll probably not need a child theme and will be better off making any changes you need via the WordPress Customizer (found under the Appearance > Customize).

It is important to pick the right parent theme. If you only need to change some minor HTML and CSS, it doesn’t really matter which parent theme you choose. However, if you want to build your own layout on top of a parent theme, you should look into a good “framework” theme. For example, the Genesis Framework is a WordPress theme specifically created for the purpose of building on top of it using a child theme.

How to create a WordPress child theme

To create a child theme, you will first need to determine your parent theme. In this article, I will use the example of Twenty Nineteen, the default WordPress theme released for 2019. The same logic can be used for almost any other theme.

1: Determine your parent theme

Go to the Appearance > Themes menu to find the active theme

Step 1 of creating a child theme is to determine what is your parent theme. You can do so by going into the Appearance > Themes menu in WordPress to see which theme is active.

In the picture on the right you can see an example of a WordPress site with the Twenty Nineteen theme active. Click on the picture to see a larger preview.

2: Create a folder for your child theme

In the example, we have the Twenty Nineteen theme active. That means that in the wp-content folder, there is a folder for this theme called “twentynineteen”.

Twenty Nineteen folder

The wp-content/themes folder is where all the installed themes of your WordPress site are located. You can reach this folder via FTP.

Inside this folder is where we will create our child theme. You can do this directly via FTP or you can create the folder on your desktop first and upload it later. Your child theme’s folder can be called anything. In this example, I will call my child theme folder “wouterpostma“.

3: Create the style.css file

Open a text editor like bbEdit (Mac) or Notepad++ (Windows). Create a new file called style.css and add the following code:

/*
	Theme Name:   Your Child Theme Name
	Theme URI:    https://yourdomain.com/
	Description:  Your Description
	Author:       Your Name
	Author URI:   https://yourdomain.com/
	Template:     twentynineteen
	Version:      1.0.0
	Text Domain:  wouterpostma
*/

This code is used by WordPress to know the name of the theme and the information about the author, which will be shown in the Appearance > Themes menu. It doesn’t really matter what you call your theme. However, it is important that you enter the correct “Template”. In this case, the template is called “twentynineteen“. The template should always be the name of the folder of the parent theme. In case you’re using a different parent theme, you’ll need to use that folder’s name.

Save the style.css file in your child theme folder.

4: Create the functions.php file

Now, inside the child theme folder, create another file called functions.php. In this file, we will need to paste the following code:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

This (PHP) code is a function that loads the stylesheet of the parent theme into your website. Without this, your website would appear without any styling.

5: Add a screenshot.png file (optional)

Optionally, you can add a screenshot.png picture to your child theme. This would become visible in the wp-admin under Appearance > Themes. Below is a screenshot of what it looks like when you do not upload a screenshot picture.

Theme without picture
When you do not upload a screenshot.png, the child theme will appear like this.

If you do want to upload a picture for your theme, the recommended dimensions are 1200 x 900 pixels. Just place the file (called screenshot.png or screenshot.jpg) in the child theme folder and it will automatically appear.

6: Install your child theme

In case you have created all the child theme files directly via FTP, you can skip this step. But if you have prepared the files on your PC, you will need to upload your child theme.

The quickest way to do this would be to compress your child theme folder into a ZIP file. On a Mac, you can do this by right clicking the folder and clicking “Compress”

How to create a ZIP file on Mac

Now that you have your child theme in a ZIP file, go to Appearance > Themes in your WordPress admin. Click “Add New” and then “Upload Theme”. Select the ZIP file and click “Install Now”. WordPress should now show a message saying that the theme has been installed and that the parent theme is also installed.

You can now click “Activate” to activate your child theme.

How to make changes to your website

Following the steps above, you have created and installed a WordPress child theme. So what’s next? After installing a child theme, you can start customizing your WordPress site to your needs. How to make changes highly depends on what change you want to make.

Note: I highly recommend to always create a backup of your WordPress site before making any changes to your (child) theme.

I’ll now show you some examples of customizations that the child theme will allow you to do.

Changing the font

One of the changes that you can do from your child theme, is to change the font on your WordPress site. I often don’t like the default font that comes with a parent theme, and prefer to use a Google Font (like Open Sans) instead.

To use a Google Font, you could use the @import function in your child theme’s style.css file. This is very easy to do, but it is not the most optimal way to do it in terms of site performance, because using the import method can block parallel downloads (meaning that your browser will finish downloading the font, waiting to download other content).

I prefer to load custom fonts the proper way, which is to enqueue the Google Font from the functions.php file. You may remember that in step 4, we have already enqueued the CSS stylesheet of the parent theme. The function below can be added to the functions file to enqueue the Google Font (in this case Open Sans).

function wouterpostma_add_google_fonts() {
 
wp_enqueue_style( 'wp-google-fonts', 'https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300', false ); 
}
 
add_action( 'wp_enqueue_scripts', 'wouterpostma_add_google_fonts' );

Having the code above in the functions.php will result in this piece of HTML being loaded on your WordPress site’s <head> section:

<link rel='stylesheet' id='google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C700italic%2C400%2C700%2C300&#038;ver=5.6' media='all' />

Now you can change the font from your style.css file. For instance you could use the following piece of CSS to change the font on your site to Open Sans:

body {
	font-family: 'Open Sans', sans-serif;
}

Note: This CSS will only work when combined with the enqueue function above.

Changing theme layout files

A child theme also lets you make changes to entire parts of the parent theme. For example, you may want to fully modify your website’s footer area.

For every theme file of the parent theme, your site will check if there is a file in your child theme with the same name. If there is, it will use that one instead of the parent (default) version. Copying the footer.php file from the parent theme folder to the child theme folder will allow you to make change to the footer template file in your child theme.

Page templates

You can create your own custom page templates within your child theme

You can also create page templates in the child theme that are not existing in the parent theme. A page template is used to create pages with different types of layouts. For instance, some WordPress themes have a page template called “Full Width Page“, which is usually a page without a sidebar.

To create your own page template(s), create a folder called page-templates in your child theme and create a file called (for example) my-page-template.php.

Start the file with the following code:

<?php
/*
Template Name: My Custom Page Template
Template Post Type: post, page
*/

By default, a page template is available for pages. However, the second line in the snippet above indicates that the page template should also be available for posts.

This code alone will not do much, other than creating a template that doesn’t do anything. However, there is a lot you could do with custom page templates in WordPress. For instance, check out this article from Smashing Magazine.

Child theme or site-specific plugin?

There is a lot more that a child theme will allow you to do. Especially with the functions.php file you can add a lot of functionalities to your WordPress site. A lot of tutorials related to WordPress will give you PHP code snippets that can be added to your functions file.

It is important to understand which modifications you should be making in your child theme and which custom code is better off in a site-specific plugin.

For example, I’m a big fan of shortcodes for affiliate links. I could create a shortcode that, every time I type [Book], automatically returns an affiliate link to download my eBook in an external webshop. This way I will only need to maintain the link in one place, and not on all pages and posts in my WordPress site.

If I would register all these shortcodes in my child theme’s functions.php file, that would work just fine until the day I decide to switch to another WordPress theme. To maintain all the shortcodes that I created, I would need to copy the PHP code from my current functions file to the new child theme’s functions file. This would not be necessary with a site specific plugin, as I would just keep the plugin active, regardless of which theme I’m using.

Summary

Creating a child theme is easy to do and will allow you to make changes and adjustments to your site’s appearance. Making changes to a child theme is much safer than making changes to the parent theme. If something goes wrong, you can always fall back on your parent theme. Child themes are a great way to get (more) familiar with WordPress development in general.

If you want to keep your themes and site up-to-date without losing your own customizations, a child theme is the only way to go. However, some custom code is better off in a site-specific plugin. Especially functions that you want to keep, even when switching to another WordPress theme, should be kept in a site-specific plugin rather than a child theme.

Leave a comment

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