WordPress Child Theme and Why you Should Create One

In this post

Step by step directions for creating your first WordPress child theme. Never lose code updates again when you update template files.


Create a WordPress Child Theme in 5 Easy steps

If you’re like me you like to update and tweak your WordPress template with great frequency. By creating a WordPress Child Theme you’ll never lose these updates again.

While it’s great to be able to update your theme to add functionality and additional theming it becomes taxing if you update your template. Updating your template is important to do as new security features, bug fixes and usability updates become available. It makes sense to keep your files current, but then what happens to all those in-line code tweaks you’ve added?

The solution to this is to create a WordPress child theme. A WordPress child theme allows you to continue to update your theme files while not over writing your code updates. Creating a WordPress child theme is pretty easy to do and will save you countless hours of re-coding every time there’s a new update for your theme file.

How to set up a WordPress child theme

To create your first child theme you’ll need to create a folder with the same name of the “Parent” theme you want the child to append. In this example I’ll create a folder called “twentyseventeen-child“. You’ll need to start by creating 2 files styles.css and functions.php.

This is assuming your using a style-sheet called style.css. If yours is called something different you’ll have to rename it appropriately. The following paragraph outlines the new code you’ll need to add to your CSS in order to define and call your new child-theme.

Step 1 create your child theme folder

WordPress child themeLike I stated above create a theme folder with the following naming convention “twentyseventeen-child“. This is the folder where you will upload style.css, functions.php and any other file you wish to alter that lives in your parent theme. This file should be added to the same folder as the parent theme.

WordPress Child Theme CSS Anatomy Explained

It’s brilliantly simple to create your own WordPress child theme and really takes very little time depending on how many files you wish to update. You’ll have to add this first bit of code to get started. I’ll outline what it is your changing and what lines of code you need to update to reflect your own theme. In this example I’ll be using the default WordPress 2017 theme.

An explanation of what you’re defining follows.

Step 2 create your style.css

Add the code above to the beginning of our styles.css. Additional styles can be added to this style-sheet after the code below.

Theme Name: Twenty Seventeen
1. This is the title that will show up in your theme description.

Theme URI: https://wordpress.org/themes/twentyseventeen-child/
Link to your theme’s page.

Description: Twenty Seventeen Child Theme
4. How your description will read.

Author: Your Name
3. This can be your own name or the name of your design/ development team.

Author URI:
3. This can be a link to your homepage or one that links to more information about your theme if you plan to distribute it.

Template: twentyseventeen
This piece is important. This should be the exact name of the file your theme lives in your content folder. It’s what is used to reference your child theme so keep it case sensitive.

Version: 1.0.0
2. Theme version shows up in the description.

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Licensing information optional.

Tags: add optional description tags
5. It’s a good idea to add tags if you plan on distributing your theme otherwise this isn’t necessary to create a child theme.

Text Domain: twentyseventeen-child
Defines the name of the child theme

Step 3 create your functions.php file

The next step is to create your funtions.php file. This file calls your child-theme and loads it along with the rest of your page to call your new updates.

Make sure you add “-style” to the end of line 3 below. It should read as follows:

$parent_style = ‘twentyseventeen-style’;

Step 4 Activate your child theme

Once you’ve created style.css & functions.php and uploaded them to the child theme folder you created earlier you’ll need to activate your new child theme.

Go to Appearance > Themes and you will see your new child theme awaiting activation. Click to activate it and your ready to start utilizing the benefits. To add bigger code changes effecting pieces of your site follow directions in the last step below.

Step 5 Add Updated files to your child theme folder

Considering you want to do more than just style your theme you probably want to add existing functionality to your posts or pages. For example I added updates to my single.php file to add banners and functionality to my post pages.

All you need to do is download the file you don’t want to change when you update your theme. In our example I’ll be pulling footer.php from the twentyseventeen parent folder. Once you’ve added your new code to this file you’ll want to upload it to the child theme folder. To make changes to different parts of your site simply download and alter files from your parent folder and upload them to the child theme folder.

From here on out you can freely update your template files any time there’s a new update while not effecting code changes that live in your child folder. Hope this post helps shed some light.

Happy blogging pixel pushers.

Comments

comments

WordPress Child Theme and Why you Should Create One Click To Tweet
 

 

 

 

 

(I'll never share your email address and I'll never spam you.)