How to create a wordpress child theme

So you have just installed a new theme,everything is looking great except you want to modify it in a way or another. You have two options here.

Option one is to modify the theme files directly which will prevent you from updating the theme or else you will lose your modifications and if you don’t update your wordpress theme you are risking with getting your website hacked.

Option two is to create a child theme and put all of your modifications in it, this way you will always be able to update the parent theme without losing your modifications.

What is a wordpress child theme and how does it work?

You may consider the child theme as an additional layer on top of the actual – parent – theme, containing all our modifications.

When WordPress is looking for a file, it will first check if it’s available in the child theme directory, if it is, wordpress will run it, if the file isn’t there, WordPress will fall back to the same file in the parent theme directory.

Example: When wordpress is trying to load the header.php file, it will check the child theme directory for this file if it’s not there it will run it from the parent theme directory.

Why would you use a child theme?

For two reasons actually. The first is to be able to modify the template without risking the security of your website or preventing yourself from getting new features in a future theme update.

and the second is to separate your code base from the parent theme’s. If you are not the author of the parent theme, it’s more likely that you have different coding approach and tools, a child theme will prevent any conflict and help maintaining the website in the future.

How to create a child theme?

Easy. you just need to do 3 little steps:

  1. Create a directory in the themes folder
  2. Create a style.css file
  3. Create a functions.php file

after completing theses three steps, you can activate your child theme and your website will look the same except you will be using your child theme.

1. Create a directory in the themes folder: navigate to “wordpress root/wp-content/themes/” and create a new folder. You may name this folder whatever you like but for simplicity’s sake I like to name it “parent-child” where “parent” is the parent theme name.

2. Create a stylesheet file in the folder you just created: fire up sublime text or any other text editor you might be using and create a new CSS file, this file must be named “style.css”. Copy and paste the following code into it.

The most important piece in this snippet is the “Template” configuration, this is what defines the parent theme and the value should be the parent theme name. Now if you view the website you will see the content with no styles. That is because wordpress is loading the empty child stylesheet instead of the parent’s. In the next step we will load the parent’s stylesheet.

3. Create a file and name it “functions.php” then copy and paste the following into it. This will enqueue – load – the parent’s theme stylesheet.

One last thing

As you already know by now, wordpress will only fall back to the parent theme file if it couldn’t be found in the child theme. However, there is an exception to this rule. WordPress will load both functions.php files.

Have anything to add? let me know in the comments.

Leave a Reply