Creating and customizing Child Themes

We all know WordPress-Themes. But what is a Child Theme? WordPress offers a simple interface for implementing customizations into a theme without having to edit its original files. The result can be better overview, security during theme updates and the process is almost as easy as copy-paste.

Theme Hamburg: Starter kit for a Child Theme

Index

What are the advantages of a Child Theme?

Opposite to “hacking” a theme in order to code your customizations into template files directly, Child Themes provide an elegant way to customize your theme according to the principle of copy-paste:

You copy single template files or stylesheets to a folder (also called directory in the context of a web server) and customize them there. Your modifications are kept safe even during an update of the original theme.

The folder you’ve created and the files you keep there are named a Child Theme. The original, unmodified theme thereby automatically upgrades to a Parent Theme—becoming a “mother”, essentially.

How does a Child Theme work?

WordPress attempts to find each template file it needs in order to display your content within the directory of the currently active theme.

Whenever WordPress does not find what it is looking for, it checks if whether the active theme is a Child Theme. If so, WordPress additionally searches for the required file within the directory of the Parent Theme (home at “Mama’s” if you will).

The only exemption is the functions.php file which always gets loaded from both directories, Child and Parent Theme (with the file from the Child Theme directory being loaded before the one from the Parent Theme).

How do you recognize a Child Theme?

Every theme in WordPress needs to have a file named style.css. At the very top of style.css you’ll find the theme’s name and other pieces of information like version number, description etc.

If you happen to see a line starting with Template: something in the top section of style.css, you’re dealing with a Child Theme. The bit something equals the directory name of the Parent Theme.

How do you create a Child Theme?

As we’ve just mentioned: create a directory within the themes directory of your WordPress install.

Within that directory create a file named style.css and paste the following header to the top of the file. Theme Name should be the name of your Child Theme you’re about to create, Template the directory name of the related “Mama” theme:

Customizing files in a Child Theme

Editing template files via a Child Theme is very similar to copy-pasting: all you need to do is copy the template files you want to edit from your Parent Theme over to your Child Theme. From there you can edit and customize theme as you see fit. WordPress will always go there first when it needs a specific file.

Heads up, remember to always keep the folder structure!
A file with the path
hamburg/parts/content.php
also needs to have a path like
hamburg-child/parts/content.php
within in the Child Theme.

You can even load file via a Child Theme that are not included in the Mother Theme—for instance when you’re dealing with standardized file names from the WordPress Template Hierarchy:

For a page displaying a monthly archive WordPress at first is going to look for a file named archive.php. If that file is not available, WordPress defaults to index.php. Let’s say your Mother Theme does not feature an archive.php file, then you can still add one via your Child Theme; WordPress is going to recognize and load it.

Custom Page Template are handled in a similar manner. For WordPress pages you can create so called Custom Page Templates which you can then select for a specific page in the back-end. Adding a Custom Page Template also works when the template is only present in your active Child Theme.

WordPress Template Hierarchy Infographic
WordPress Template Hierarchy: Which template loading when?

Download a starter kit for a Child-Theme

We have created a starter kit for our own theme Hamburg. You can download the kit below. It features a couple of basic files and functions, and—as a goodie for Hamburg users—a custom color scheme you can use as a boilerplate to create your own color scheme.

The starter kit is available in a public repository at GitHub. Feel free to use it for your own projects, whether you use Hamburg or some other theme as your Parent Theme.

TL;DR

Child Themes offer a secure way to edit theme code ensuring that your customizations will make it through the next theme update. Creating a Child Theme is almost as easy as copy-pasting.

Post Sharing

Author Avatar

Caspar has contributed to customer happiness at MarketPress. When he’s not providing plugin and theme support, he can be found at WordCamps and other community events.

Also Interesting

muenchen-blog-1000

New: WooCommerce Shop Theme München

by Michael Firnkes

A WordPress and WooCommerce theme that not only looks great, but also excels in functionality? Welcome to München. The template is an addition to our WooC ...

Read more
xtreme

Work with Us on Xtreme One - Framework and Themes Now Free

by Michael Firnkes

We are now offering the theme framework Xtreme One free of charge for collaborations in the community. Here is an overview of some of the most important qu ...

Read more
ffretinaallnews@2x

New: WooCommerce Shop Theme Frankfurt

by Michael Firnkes

Our city tour continues with a particularly attractive design for online shops and blogs: Frankfurt is the latest addition to our WooCommerce and WordPress ...

Read more
WordPress Theme Kiel

New WordPress shop and blog theme: Welcome to Kiel!

by Michael Firnkes

Let's continue on our dynamic city theme tour: After visiting Hamburg and Düsseldorf, we have now made our way to Kiel. In addition to its still th ...

Read more

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">