Customizing your Theme with a Child Theme

People often ask what happens to customizations after a theme update. Well the short answer is: They will get lost.

Why is that? When you update a theme there is normally no build in update routine like you have it for WordPress core updates. That means when a new version of a theme comes out you need to replace the old files with the new ones and that overwrites your custom changes. By the way this also would happen in case of a WordPress update if you would have changed WordPress core files. That is the reason why you should never make any changes to WordPress core files. But how can you customize a theme and stay safe in case of an update? The solution is: A child theme.

What is a Child Theme?

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme (Source: WordPress Codex). It contains at least a screenshot, a style.css and a functions.php file. But it can also have an image folder and/or any other theme template file you want to customize.

Screenshot

All WordPress themes have a screenshoot image included – typically this is called “screenshot.png” and is a visual display of the theme, which can be seen on the Appearance > Themes page inside your WordPress admin dashboard. Since child themes have their own folders and are activated like any other theme, they require a screenshot like a standard theme.

Theme Files – Templates

The parent theme, is where all of the theme files (templates files) are kept. This would include the typical theme files such as footer.php, header.php, index.php, page.php, single.php and so on. Child themes can also include these files – and the hierarchy works in a way that if any of those files exist in the child theme folder, they will override the parent theme. In other words, if you customize a footer.php file and place it into your child theme folder, that will be used instead of the footer.php in the parent theme.

Theme files are also called templates or template files. A template in this case is not a complete theme. A theme is a “collection” of various templates (or template files).

Stylesheet – CSS File

The style.css (stylesheet) of the child theme imports the parent theme stylesheet. As long as you don´t change anything in the child theme the styles of the parent theme are used. Any style from the parent theme you add to the child theme stylesheet will be used instead of the parent themes style. So if you change e.g. the color of a h1 heading in the child themes style.css this will be used instead of the original color used in the style.css of the parent theme. And because the stylesheet controls 100% of the design you can use it to modify any area of the theme.

Functions File

Most WordPress themes have a functions.php file – which is typically a file where you can control certain behaviors of how WordPress is run or how the theme outputs various things. For instance, a functions file can register sidebar widgets and how they are styled, as well as a number of other “function” related things. Again you can use the child thtmes functions.php to overwrite the parent themes functions.

Images Folder

This one is  self-explanatory – as with (almost) any WordPress theme, there is an images folder which is used to hold images that a theme requires. Use this to hold background images, icons, navbar gradients, etc. If you don´t need other images than the parent theme already uses, you don´t need an image folder in your child theme.

Conclusion

Child themes a the perfect way to make “heavy” customizations to your theme without beeing afraid of future updates. If you update a theme the child theme files will remain untouched and your individual changes will not get lost.

Further Readings