While theme development can seem overwhelming, child themes are straightforward to set up and it’s a much quicker alternative to developing a theme from scratch.
In this post, I’ll share more details on WordPress child themes as well as how to efficiently create and customize one.
What’s a WordPress Child Theme?
Before defining what a WordPress child theme is, it’s important to first understand what’s a WordPress theme and where WordPress is drawing information from to display a website’s design.
According to the WordPress Codex, “A theme is a collection of files that work together to produce a graphical interface with an underlying unifying design for a weblog. A theme modifies the way the data is displayed without altering the underlying software.”
If your WordPress site has a single active theme with all the required templates and assets, there’s no distinction between the parent or child theme.
However, if you decide you really like a theme you found, but you want to make a few changes to it without creating a theme from scratch, you can create a WordPress child theme to serve this purpose.
A child theme inherits the original theme’s structure and only includes the customizations you make to it. Instead of replacing a theme entirely, the child theme modifies or adds to the files of the existing theme.
That way, when your site and is loaded for a visitor, the original theme design loads, but with the changes you made to it.
Children in real life – and not the online world – are reliant on at least one parental figure to live. Similarly, a child theme is reliant on the original theme to function.
That’s why when you use a child theme, the original theme is called the parent theme.
Unlike a human infant, a child theme isn’t a complete theme in and of itself. That means the parent theme needs to be installed before you’re able to activate its corresponding child theme.
The Perfect Child Theme and When to Use It
Any theme can be a parent theme, though, some are better suited for it.
Choose a theme you like that could use a few small structural customizations to fit your needs, but that doesn’t come with the options to make the customizations you want straight out of the box.
For example, the Perfect Magazine theme was used as a parent theme to create the Newsliner child theme to not only change some colors in the design, but to also remove an advertising banner while adding a blog post carousel at the top of the page.
These kinds of customizations aren’t possible in Perfect Magazine’s options, but they’re not large enough in scale to warrant creating a brand new theme from scratch.
Why Create a Child Theme?
WordPress Child themes are important for saving and preserving all the work you have put into a site. If you modify a theme directly, then update it with a new software release, all your modifications and customizations will be lost.
That’s why many website owners opt to not update their parent theme at all. But, it’s a severe security concern since 54% of hacked WordPress sites had out-of-date software, which hackers and malware often run scans to find.
Also, updates often contain vulnerability fixes so ignoring an update means leaving your site wide-open to attack.
Alternatively, you can create a child theme to avoid these pitfalls.
As previously mentioned, using a WordPress child theme can also speed up development.
With the file systems and essential elements of a site already set up, you don’t have to begin from scratch. You’re able to build on a pre-existing theme and take advantage of the functionality while customizing its design.
Getting Started with a WordPress Child Theme
There are a few key elements you need to create a child theme:
- A theme directory folder
- A style.css file
- A functions.php file
While the only required file in a child theme is style.css, the functions.php file is needed to enqueue the parent theme stylesheet correctly.
So, it’s highly recommended you create a functions.php file in your child theme to avoid errors.
Creating a WordPress Child Theme
When creating your WordPress child theme, there are four steps, which are outlined in detail below: creating a directory folder, making a stylesheet, enqueueing the new and parent stylesheets, and activating the theme.
Creating a Directory Folder
All themes are located in the /wp-content/themes/ folder of your WordPress installation.
Navigate to that directory and create a new folder that will serve as the child theme folder.
Typically, the theme is retitled using the parent theme’s name, but adding -child at the end.
For example, the two file paths will be /wp-content/themes/yourtheme/ and /wp-content/themes/yourtheme-child/.
There also shouldn’t be spaces in the child theme’s name.
While these aren’t hard and fast rules for naming your folder, especially if you’re not distributing the theme for public use, it’s a common WordPress development practise as it helps with organization.
Creating a Stylesheet
WordPress child themes are often used for fairly extensive design edits so a separate style.css is necessary.
The file will contain all the CSS rules and declarations that affect the look of your theme.
Create a style.css file in the root of your new child theme folder. Then, input this header at the top of the page:
/* Theme Name: Twenty Seventeen Child Theme URI: http://example.com/twenty-seventeen-child/ Description: Twenty Seventeen Child Theme Author: Jane Doe Author URI: http://example.com Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-seventeen-child */
The header is a vital part of the file, as it tells WordPress basic details about the theme. It also signals that it’s a child theme with a particular parent as indicated by the Template portion.
The only requirements for the header are the Theme Name and the Template. But, it’s best practise to fill out the rest.
Be sure to also change all the required details so they’re accurate. For example, the Author and Author URI as well as references to Twenty Seventeen if the parent theme you’re using is a different one.
The Tags section relates to the WordPress Theme Directory. If you want to upload your theme there, make sure to choose tags that pertain to your theme.
Enqueueing the Parent and Child Theme Stylesheets
Next, it’s important to make sure each theme’s stylesheet loads correctly in a process called enqueuing.
To enqueue means adding an item or a list of items to a queue for data processing. In this case, the queue is the files that your website needs to load when a browser requests them.
If you were to skip enqueuing, your site would only pull from your child theme stylesheet and wouldn’t use any of the styles the parent theme provides.
It may also be important to note that it’s possible to enqueue the parent style.css using the @import method. But, this is no longer recommended due to performance issues.
To enqueue the stylesheets, you need to create a functions.php file if you haven’t already.
This can be done by creating a new file and naming it functions.php. Then. place this code at the very top:
<?php
Be sure not to include any spaces before the line above or it will result in an error.
In the functions.php file, add the code below to make sure your site is properly loading both the parent style.css as well as the child theme’s style.css in the correct order:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyseventeen-style' for the Twenty Seventeen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
Make sure you change the parent-style being stored in the $parent-style variable to include the name of your theme.
As recommended by the WordPress Codex, this code will make sure the parent style.css is loaded as a dependency, meaning it’s required for the child theme’s style.css to load.
Activating the Child Theme
Once you have saved all your files, go to Appearance > Themes to find your child theme, then click the Activate button.
You won’t need to also activate your parent theme. Although, it should still be installed and stay in the /wp-content/themes/ folder.
The header text in your child theme’s style.css will connect the two together and clarify the relationship for your WordPress installation.
Once you have activated your child theme, you may need to resave your menu in Appearance > Menus as well as some other content in Theme Options of the Customizer if you experience issues with your design.
Quick Customization Tips
Before you start tearing into the development process, below are a couple tips on customizing your WordPress child theme.
Theme Image
On the Appearance > Themes page, you have to include your own image for the theme.
If you want to insert something instead to replace the checkered box, you can upload a 880 x 660 PNG image file named screenshot.png.
Put the image in the root of your child theme folder. That way, the WordPress installation will know to use it as the image for your theme.
Overriding Parent Theme Files
If you want to insert new files into your WordPress child theme to override old components, copy the parent file over to the child theme, which you can then customize.
When loading the site, WordPress will check to see if the child theme has any files that correspond to the parent theme. If any are found, they will override the original parent theme’s file.
It Doesn’t Take A Village
WordPress child theme creation doesn’t have to be as complicated as it may sound. Follow the steps above, and rest assured, your edits will stay intact. It will also help your site be a little more secure.
What kind of child theme do you want to make? Were you able to successfully create it? Did you run into troubles in the process? Feel free to share your experience in the comments below.