Getting Started with WordPress Child Themes

Share this:

There are hundreds of elegant, feature-rich themes available for WordPress sites but they all have that one design element we could do without.

One of the few possible solutions is to hire a web designer to create a theme for your site from scratch. But that’s going to be heavy on your wallet. What if you really like the theme and the functionality it offers but you just want to remove that pesky button or change the font to something that’s more elegant?

In this article, we’ll cover the basics of WordPress child themes to help you get started with them.

What Are Child Themes

Child themes are individual themes that reflect the design and functionality inherited from their respective parent themes. By using child themes, users can easily modify a theme’s files without having to recreate the wheel.

There’s no limit to how much you can modify a theme using child themes. Whether you want to move the search bar from the left sidebar to the right or completely change the look and feel of your theme, child themes make it effortless and risk-free.

When you create a child theme, it takes precedence over the underlying parent theme which basically means that any custom code you add to the child theme will automatically reflect on your site’s theme.

Advantages of Using Child Themes

Before child themes became common practice, the webmaster would have to manually modify the theme’s files every time and every time the theme updated, the custom changes and modifications would be lost. It was difficult keeping track of all the changes that were made to a theme and re-adding them to the theme’s files after it was done updating.

And not only would you have to keep track of the code that you had added but you’d also have to keep track of where you added it. If you’ve ever caught a glimpse of a theme’s core files you know that they are generally made up of thousands of lines of code (not to mention all those different programming languages!).

Child themes ensure that when your parent theme’s files update, you won’t lose any of the modifications you’ve made in the child theme. This saves you from having to keep track of every line of code you add and keep a record of where you added it. Another key advantage here is that now, instead of having to go through thousands of lines of code to catch a bug, you’d only have to look at the child theme’s code – which is typically a fraction of the original amount.

Getting Started With WordPress Child Themes

By now we’ve covered the essentials of WordPress child themes and looked at the distinct advantages they offer. In this section, I’ll walk you through a quick tutorial using our very own Flat White theme to help you get started with child themes in WordPress.

Creating a Child Theme

  • First off, you’ll want to login into the cPanel navigate to your WordPress site’s theme directory.
  • Create a new directory within the theme directory and give it a name. Generally, it’s a good idea to give it the parent theme’s name and add –child as a suffix, eg. …/flat-white-child/
  • Open up the new, child theme directory and create a new file. Name the file style.css and copy the following code into it. The @import url directive is the important one as it calls up the parent themes style sheet…

/*
Theme Name: Flat White Child
Theme URI: https://www.yourwebsite.com/flat-white-child
Author: Your Name
Author URI: http://www.invictusthemes.com/
Description: My first child theme. Parent theme: Invictus Theme's Flat White.
Version: 2.5.0
Template: Flat White
Text Domain: flat-white-child
Tags: theme, tags
*/
@import url("../flat-white/style.css");

  • Optionall you can also create a new functions file. Name it functions.php and add any required custom code to it like this.

<?php
//* Add your code here
?>

  • If you have created this directory off line you can zip the child theme directory (flat-white-child) and upload it to your site by navigating to Appearance > Themes from the admin panel and using the usual theme upload feature to add your own child theme.
  • Click the Activate button once the child theme is uploaded.

That’s all there is to it! You’ve successfully created your first WordPress child theme. If you’re satisfied with the theme’s functionality then you can skip Step 4. A child theme really only needs the style.css file to exist and perform properly.

It’s important to note that many premium themes nowadays come with child themes; however, if the theme you really like doesn’t ship with a child theme then you’ll be able to create your own in minutes!

Wrapping It Up

Child themes are incredibly useful for webmasters who find themselves making design tweaks to their site’s theme every now and then. Not only do they eliminate the risk of losing custom modifications all together but they also help you to organize your theme’s code.

We covered the essentials of WordPress child themes and walked through a tutorial to help you get started with them. We hope that you’re in a good place now to take things to the next level by customizing your site’s theme as you see fit.

Were you able to create a child theme for your WordPress site? Did you encounter any problems along the way? We’d love to hear all about your experience so get in touch by commenting below!