Non-Destructive Customisation of WordPress Themes using a Child Theme
Similar to how Photoshop allows you to edit images using adjustment layers without altering the original image, you can use the same concept when customizing WordPress themes. Non-destructive customization has the advantage of being able to revert changes and keep the original files completely intact and untouched. The quickest and easiest way to begin non-destructive editing is by creating a child theme.
What is a Child Theme?
A child theme is a theme that inherits properties and functions from another theme called the parent theme. You can then edit, modify and add new features or functions because the files in the child theme overwrite the parent theme.
What You’ll Need
Before we start editing all the files, you’ll need to get a few things ready. First, you’ll need FTP access to your WordPress website or something like MAMP to host your own WordPress site. Without a live WordPress website, you won’t be able to see the changes you are making. Next, you’ll need your text editor of choice. And finally a parent theme such as the default Twenty Twelve theme that comes with WordPress.
1. Creating a Child Theme
All that is needed to create a child theme is one folder and one file. Head to the “/wp-content/themes/” folder within your FTP client. You’ll notice a few folders named after all the themes you installed. Create a new folder and give it a descriptive name such as “twentytwelve-child” or “parenttheme-child”.
Go into the folder and create a CSS file and name it style.css, and then add the the following information into the CSS file filling out the fields however you see fit.
Theme Name: Twenty Twelve Child
Theme URI: http://example.com/
Description: Child theme for the Twenty Twelve theme
Author: Your name here
Author URI: http://example.com/about/
Template: Folder name of the parent theme
Once you’ve completed this step you should have a working child theme.
2. Importing Parent Theme CSS
Now that you have the necessary folder and files created, we are going to import the parent theme’s CSS. Add this line of code to your CSS file:
This will tell your child theme to inherit all the CSS properties and settings stored in the parent theme’s CSS.
3. Activate Your Child Theme
To activate your new child theme, simply head to your WordPress dashboard and find the Appearance > Themes page. If you followed the previous steps properly you should see your child theme in the list of selectable themes.
Simply hit Activate and your WordPress website will now be using your child theme. If you take a look at your live WordPress website you won’t see any changes because we haven’t made any changes to the parent theme yet.
4. Customizing the Child Theme
This is where the fun starts, now that everything is setup we can begin changing and altering the parent theme to our liking. As we explained before, the child theme files overwrite the files stored in the parent theme folder. Therefore we can create variations of the parent theme without editing the core files. You need to remember to have a working version of your parent theme uploaded in your themes folder at all times and make sure your @import points to the right location.
Start changing some CSS properties and then view your website to see the changes.
5. Using functions.php
If you intend to add or edit some of the WordPress functions within your parent theme you should create a functions.php file inside your new child theme folder. Add new functions inside the new file and they will be loaded alongside the functions from the parent theme.
The functions.php in your child theme doesn’t overwrite the one from your parent theme, instead they will be both loaded. If you make changes directly to the core functions.php you may have to rewrite those changes after every update. Using a functions.php file within your child theme solves this issue.
6. Editing PHP Files
Making changes to the PHP files from your parent theme is the same concept as editing the CSS. Any files within your child theme will overwrite the parent theme counterparts. For example if you wanted to edit the header.php you’ll need to create a new header.php in the child theme folder and write the changes you want inside this file. WordPress will then use this new header.php instead of the parent theme version.
You can also add new PHP files inside your child theme that don’t exist in the parent theme. This will allow to create more specific pages and templates that can be used by WordPress.
7. Reverting Changes
Whenever you need to revert the changes you’ve made, all you need to do is activate the parent theme and now you’ll be back to where you started. This is the beauty of using child themes, you can create several variations and switch between them easily while still retaining the original theme.
Child themes are a fantastic non-destructive method to customizing your WordPress theme. Not only do they allow you to experiment and make changes without affecting your parent theme, it is also good practice to use child themes instead of directly editing your theme files.
Brian L, a WordPress enthusiast, is also an advocate of customizing WordPress themes using the unique ThemeMask method.