Web Design: Create and Customise a WordPress Child Theme

We’ve all heard about WordPress themes, but what about child themes? For many, that could easily be a new term, but it’s something anyone well versed in web development and web design should be comfortable with. Implementing them is fairly simple, but they offer a huge amount of freedom when it comes to customizing and tweaking your theme. For example, websites based around mug design may use an overarching theme for the website, but alter the general design for each page.

Join us as we look at the purpose of parent and child themes, and how you can leverage child themes to take full control of your web design.

Parent vs Child Themes: A Quick Breakdown

Parent themes are what we’re used to as WordPress users. These are the complete collections of template files and assets. Anything that isn’t a child theme, is considered a parent theme. When you install a theme, there’s probably a lot you’d like to change.

Maybe some fonts, a few tweaks to the colors, stuff like that. The only problem, is that making those changes to your theme can easily causes functionality and overall web design to suffer. Most themes just aren’t made to be tweaked like that.

Enter child themes. These are separate versions of your parent theme that inherit all of the same elements, but with one key difference:
You can customize child themes to your heart’s content.

Everything is separate from the parent, so you can upgrade and tweak anything without risk of breaking other parts of your site. Here are some other benefits:

  • Make modifications that are replicable
  • No fear of losing your changes when the parent theme updates
  • Save time since you’re not starting from scratch
  • A good place to learn about theme development

Now that we’ve covered what child themes are and what they do, how can they help you with your web design as you make a website? Let’s find out.

Using WordPress Child Themes in Web Design

How to Customize Everything

You’ve implemented your child theme, but now what? Well, these themes work on a file-level, offering you the opportunity to make tweaks to various levels of the theme’s backend and have those load instead of the original parent files.

When loading the child theme WordPress checks if certain files are present, and if they’re not, it uses the file from the parent theme. The one exception to this rule, is the functions.php file. This file is loaded from both the child and parent.

This is done because the theme wouldn’t function properly without the elements of the parent’s function file, so both are loaded to enable your modifications. If you want to make changes to the parent’s head, simply go into the header.php file in your child theme, edit away, and save to keep the changes.

Modifying Your Child Theme’s Stylesheets

Beyond this, the easiest way to modify your child theme is to use CSS. By experimenting with design choices in the child’s stylesheets, you can always revert back to the parent if something goes wrong.

After you’ve activated your child theme, go to appearance -> editor and look at the style.css file. Don’t worry if it’s mostly empty.  This is because the theme is inheriting everything from the parent theme automatically.

This empty version of the sheet will be loaded after the parent sheet is finished. How does this override the original stylesheet? It does so because Cascading Style Sheets read from the top down. Later rules will override earlier ones, thus giving the child theme precedence.

Keep in mind, that you only need to copy over items that you’ve changed into your child theme’s stylesheet. Everything else is automatically inherited.

Changing Template Files

When you’re modifying template files, you need to copy over the entire file you’re looking to edit into the child theme’s directory. Once you’ve done that, you can make the changes you want to the functionality of certain pages.

If something goes wrong, simply delete the file in your child theme directory and the parent will take over. Between the CSS stylesheets, and the ability to edit your PHP files, you’ll have everything you need to modify and redesign your website’s theme to your heart’s content.

Simply remember to delete anything that goes wrong in your child theme directory, and you’ll be able to revert to the parent theme.

Final Thoughts

WordPress child themes solve a huge problem with themes in general: they give us the ability to modify them from top to bottom without fear of losing our changes or breaking the site. Have you used child themes to tweak your web design? Let us know in the comments!