Easily create a Child Theme

Theres really no trick to easily create a child theme. It is just a matter of creating a folder adding a couple of files to it. Once that is done, it just needs to be uploaded to your server.

(For the example below, we’re going to be using the Twenty Seventeen theme. Where ever you see this theme name replace it with the theme name you are using.)

Step 1. (create a child theme folder)

Create a new folder on your pc desktop .
(in a windows environment right-click to bring up the dialogue box, – Create new – Folder)
and give your child theme a name. For example, ‘twentyseventeen-child’.

It is recommended that the name of your child theme directory is appended with ‘-child’. So whatever your current theme name is, then -child, on the end. Make sure that there are no additional spaces in your folder name. English Grammar plays no part in naming conventions here. In the digital world a space has meaning different to correct English grammar.

Here you see the Themes directory of a typical website. It contains five themes the owner has downloaded.
Obviously only one is active at any one time. They live in the wp-content – Themes folder.
See how “their names have no spaces? One has a dash but that is it’s correct name.
Our Child theme will end up in this folder, below its parent theme.
In this example it will be “twentyseventeen-child”.
We will get to that shortly. Let’s finish the create a Child theme process first……..

Step 2. (create style.css  and functions.php files)

When we create a child theme folder we need a couple of files inside it.
Use a text editor (Notepad) to create two new empty documents inside the previously made folder.
Call them:-style.css functions.php
Because these are not going to be interpreted as text documents with .txt extension.
We need to change them to .css(Cascading Style Sheet) and a .php(Hypertext Preprocessor) documents respectively.
Don’t worry – we can still edit them in the same notepad editor.
Windows will give you a popup to warn you but say “yes”.

Step 3. (edit style.css file)

We now have the basics of a new child theme.
A theme folder containing two files.
We just need to put something in each of the two files to make this a functional theme.

Open up your style.css file using a text editor.

Then, copy and paste the below lines of code.
Be sure to include the /* at the beginning and the last */ at the end.
They do have an active effect within the file.
Loss of either will make the file non-functional.

On the left are the field names. On the right are their respective values.

The Theme Name and Template are the only critical fields here.

The theme name is [your parent theme] plus Child

Template is the [naked name of the parent theme] supplying the data.

The other fields are optional but not required for your child theme to actually work. They are descriptive and appear only in your admin backend where you see the various loaded themes thumbnails.

Now save and close the style.css file

Step 4.  (Edit functions.php file)

In your new child theme, open up your functions.php file using the same text editor.

Next, copy and paste all the below code into that empty file.

The <?php is important, as is the last semi-colon.

Make sure to save and close this functions,php file.

Step 5.  (zip the folder)
Now we need to zip up the folder.

On Windows:  Locate the folder that you want to zip.

• Press and hold (or right-click) the file or folder
• select (or point to) Send to,
• and then select Compressed (zipped) folder.

A new zipped folder with the same name is created in the same location. To rename it, press and hold (or right-click) the folder, select Rename, and then type the new name.(keep the name we chose earlier)

On Mac:  Locate the items to zip in the Mac Finder (file system)

• Right-click on a file, folder, or files you want to zip.
• Select “Compress Items”
• Find the newly created .zip archive in the same directory.
   

Step 6. (Upload)

You can now upload your custom theme zip file. by going to My Site → Appearance → Themes → Add New →Upload Themes, then use the Upload Theme button. Remember your child theme requires the Parent theme to remain installed. Now activate your child theme.

If everything went to plan your site should appear unchanged. This is how it should be. Because as yet we have not added any code snippets in the Child Theme. Everything in the Parent Theme is flowing through our child Theme. At this point you need to do no more until you customize some aspect of your site in future.

Not so hard to create a child theme was it?

Earlier I showed you and image of the theme folder of a typical site. You now see the child theme has been added to the Themes folder directly below its Parent theme. 

If you have read this tutorial because you needed to make a change – then you are set to go.
All you need is the right code snippets for your child theme.

First check your theme authors site and forum. Reach out to them in their help or support page. They wrote the theme so they are your first best bet.

Do a search on Google.
Mention your Theme name and the problem.
You will find articles on other people wanting to make the same change.
You will find some that offer code snippets for use in a child theme.

This is the beauty of WordPress.
It’s such a large community of users and developers, that somewhere, sometime, another person has had the same need as you.
You are not alone.

Making Changes to Your Child Theme

While a basic understanding of CSS/HTML is required, so that you can write your own changes.
Some knowledge of PHP would certainly help.
Alternately for many people, If you are good at copying and pasting code snippets from other sources, then that works too.
There are plenty of people doing it that way rather than writing their own.
So go ahead and create a child theme without fear.

Well that brings us to a close on the topic of Create a child theme.

Join me here in the next post for more relevant topics running your own website.

For our latest posts an topics visit our main Blog here

For an archive or all our topics go here

Don’t forget to Subscribe to receive notifications for new articles and Tutorials as they appear.