Customizing your chosen WordPress theme is fun! What’s not fun is customizing the code files only to have them overwritten when your theme gets an update from the creator. Even if you’re not sure you’ll edit the theme files, it’s always a good practice to start with a child theme, just in case.
What’s a child theme?
A WordPress child theme inherits its functionality from another WordPress theme, the parent theme. This allows you to add/alter code to your theme, without touching the code of the original theme. Making it easier to fix problems and allowing you to update your parent theme without losing changes. YAY!
So how do I create a child theme?
Below we’ll breakdown the steps you’ll take to create a very basic child theme.
1. Load the parent theme into your WordPress install.
If you’re reading this, you probably already know how to install a WordPress theme. If not, you can find instructions here. Once it’s installed, you don’t need to activate it since this won’t be the main theme.
2. Create your child theme files.
The first thing we’ll do is create a folder to hold your files on your desktop, I usually use the client name or some version of it. For example, the folder name for my child theme is caffeinatedweb. Once the folder is created you’ll create two files to go inside it (I use Sublime Text to create and edit files, but you can use whatever works best for you). These are the only two files essential to your child theme, but you can always add more to overwrite existing pages and/or add template pages.
The first file we’ll create will be your style.css. You can copy the code below into that file, make sure to edit the code for each child theme you create (directions below).
/* Theme Name: Twenty Twenty Child Theme Theme URI: https://example.com description: A theme created for [Client Name]. Author: Jane Doe Author URI: https://example.com Template: twentytwenty */
What the heck is that?
- Theme name. This will show up as the name for your theme in the WordPress back end. I usually set it to the client company name.
- Theme URI. Since this is for your client, and not something going into the WP Theme Store, I set this as the URL for the site the theme is for.
- Description. This description will show up when you click on “Theme Details.” Something along the lines of “A theme created for [client name]” is fine.
- Author. This is the author’s name — that’s YOU! Add your company name here.
- Author URI. This should be the URL to your site.
- Template. This is the MOST IMPORTANT part of this code. The name of the parent theme, meaning its folder name, goes here. It is case-sensitive, and if you don’t put in the right name, it’s not going to work.
The next file we’ll create will be functions.php. This file will pull in the style and functionality from the parent theme and it’s where you’ll add new functions as well.
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
// Do not delete anything above this line. Add custom functions below.The last file we’ll add to our folder is optional. You can create an image that will show on the theme screen. It should be 1200 x 900 and be named screenshot.png.
Once all of your files are added and edited, zip your folder up.
3. Load the child theme.
You’ll load the child theme exactly like you did the parent theme, but this time you’ll activate it. If you did it correctly, you won’t receive any errors and the site should look identical to the original theme.
4. Make your edits.
Now you’re ready to make your edits without compromising the original theme!
Have questions about creating a child theme? Leave a comment below!