In the previous post, I discussed briefly about developing a child theme for WordPress, when you should use and not use a child theme, and the benefits of using a child theme. In this post I’ll guide you through the steps to setup a child theme in your WordPress installation.
For this series, I’m going to be setting up a brand new WordPress installation, fresh from the oven. Depending on your hosting provider, they may or may not have an automated WordPress installer. If you prefer to do this on your local machine, take a look at the stacks provided by AMPPS.
After the initial setup and installation, a fresh install of WordPress should give you the WordPress default themes As of 2019, the default theme is twentynineteen
. However due to this theme being very specific for the Gutenberg feature which many people hate, I’ll base the child theme using the twentyseventeen
theme instead. In case you were wondering, the theme twentyeighteen
does not exist.
Setting Up Child Theme
Now to get start with creating a child theme, you could either use the excellent plugin Child Theme Configurator, or do it manually. For the purpose of the series, I’ll be doing it manually.
Open up your WordPress installation, and navigate to the /wp-content/themes folder, and create a folder to store your new child theme. In this case, since we are basing it off twentyseventeen
, the folder would be twentyseventeen-child
.
It is considered best practice to add
-child
as the folder name for the child theme. However you can name the folder anything you wish, and this can be particularly useful for a client specific theme, or a business name.
In theory, a child theme only needs 2 (two) things:
- a folder to store your theme files (as above), and
- a CSS file for styling and provide some sort of info on the theme,
style.css
.
However in practice, a third file called functions.php
is often included. This file can be used to override the functionality that the parent theme provides, as well as modifying some of the WordPress default capabilities.
Your initial child theme folder then should contain the following files:
public_html └ wp-content └ themes └ twentyseventeen └ twentyseventeen-child └ style.css └ functions.php
In the stylesheet file style.css
, you will need to provide some more information, particularly, which theme is this child theme based on. The following is the minimum amount of information needed in the style.css
file for a child theme to function properly.
Pretty simple and straightforward, isn’t it? Of course you could put more extensive information such as the author, website URL, and so on.
You can now use and enable this theme from Appearance » Themes menu. You may need to resave your menu from Appearance » Menu so that it can appear on the child theme.
You can add a screenshot of what your current theme or child theme looks like. WordPress recommends a PNG image with 1200px by 900px in size. The file should be named as
screenshot.png
and placed in your theme folder.
Enqueuing Stylesheets
When you enabled the child theme, you will notice that the website styling is now all messed up. This is because even though it is a child theme, at the moment there is nothing in our theme that includes the parent styles to be rendered on the child theme. WordPress calls this action enqueuing, and it can be applied to both parent stylesheets, as well as parent scripts.
For enqueuing the parent theme stylesheet, the traditional way is to use the
@import
directive on the child themestyle.css
. However this method is no longer preferred, and it is much safer to do it usingfunctions.php
instead.
The code snippets above enqueues both the parent and the child theme stylesheets. In theory you could simply just enqueue the parent style, however it is very unlikely that you would not have any styling override in the child theme.
The end arguments passed on line #7 indicates that the child theme requires the parent theme as a dependency.
The function called on line #9 utilises the WordPress hooks, which is a way for developers to essentially inject their code into certain actions or filter. In this instance, the enqueue method that we defined is being called when WordPress tries to enqueue the scripts using the wp_enqueue_scripts
action hook. Despite its name, it is the proper way of enqueuing the stylesheet and scripts.
The
functions.php
file only contains opening php tag. There is no need to put closing php tag, as this would throw errors.
It is important to note the difference between get_template_directory_uri()
and get_stylesheet_directory_uri()
as they function differently when a child theme is involved.
When there are no child themes activated, they both refer to the same folder where the style.css
is located. However when the current active theme is a child theme, then get_template_directory_uri()
refers to the parent theme folder, whereas get_stylesheet_directory_uri()
refers to the child theme folder.
With this, you should now have a working child theme, although there would be no difference from the front-end side, as we have yet to modify the CSS files. In the next post I’ll discuss about setting up the CSS environment so you can have easier time when styling up the theme.