Child Themes Explained

Please note that much of this article refers to the Karma WordPress theme however this information is identical for all other Themes

What is a Child Theme?

  • A Child Theme is a “blank WordPress Theme” that pulls in all of it’s functionality from a Parent Theme.

When to use a Child Theme?

  • A Child Theme should be used anytime significant code modifications are made to the theme. This includes things like editing PHP files or adding custom PHP functions.
  • Using a Child Theme will ensure that you can upgrade the Parent Theme (ie Karma) without losing any of this newly added code.

Important

  • All Custom Code and Settings that have been made within Karma’s Site Options Panel will always remain *safe and untouched* during a theme upgrade.
  • A Child Theme is not necessary unless making changes to the theme outside of it’s Site Options Panel.
  • When a new Theme Version is released, update the Parent Theme just like normal. Always leave the Child Theme *untouched* during an upgrade.

How to Install a Child Theme

  • A Child Theme is installed just like a normal theme
  • To use a Child Theme you’ll first need to install it’s Parent Theme. In this example we will first install and activate the regular Karma theme.
  • Next we will install and activate the Karma Child theme. Both files are located within the download package from ThemeForest. (karma.zip and karma-child-theme.zip)

Required Steps after activating a Child Theme:

  • After a Child Theme has been activated there is only one additional step. The Menu ‘Theme Locations’ will need to be re-saved.
  • From within the WP-Dashboard click on ‘Appearance > Menus’. In the top-left corner of that page you will see a ‘Theme Locations’ box (screenshot below). Simply re-select your menus from the dropdown lists, save and rejoice.

kb-child-theme-menu-location

How to edit a Child Theme

  • Child Themes are edited just like a normal WordPress theme.
  • If editing via FTP you can simply log into your server and locate the Child Theme on the web server. For example: wp-content/themes/karma-child-theme/
  • PHP functions should be added to the Child Themes functions.php file. This is located within Appearance > Editor
  • Any new CSS code can be added to the Child Theme’s “style.css”.
  • Child Theme’s are widely used in the WordPress Community. Have a quick search on Google if in need of any additional resources.

How to edit the Parent Theme via the Child Theme

Lets say you want to add a super cool function to your theme’s header.php file….here’s how to do it:

  • Copy header.php from the Karma Parent Theme and add it to the Karma Child Theme folder. For example: …/themes/karma-child-theme/header.php
  • Next, go ahead and make your code customization to header.php in the Child Theme folder. (important: always leave the original file in the Parent Theme un-touched)
  • That’s it! WordPress automatically checks the Child Theme, and if it finds the same file in the same location as the Parent Theme, it will use the Child Theme version instead of the Parent Theme version.

This same logic should be applied to theme files which are located in sub-folders. For example, lets say you want to edit a file in the “js” folder (…/themes/karma/js/custom-main.js)

  • Go ahead and create a folder named “js” in your Child Theme and then make a copy of the file you wish to edit. For example (…/themes/karma-child-theme/js/custom-main.js)
  • That’s it! WordPress will once again use the file located in the Child Theme rather than Parent Theme