WordPress Child Theme. Why you need it.
Having a WordPress child theme setup is one of the most important setups on your website, especially if it has WooCommerce installed. It prevents the loss of any custom changes done on your site with the next theme update.
How does a child theme work?
A child theme is a copy of your parent theme, but it ONLY contains the custom changes. When WordPress “boots-up”, loading the content on a page, it will first access the child theme folder and look for any files that are an exact match of the files in the parent theme. These files take priority over the parent theme files. In other words, it bypasses the parent theme file say page.php and loads page.php in the child theme folder. The child theme files take precedence over the parent theme files.
Parent Theme: ============= ROOT/wp-content/themes/themeX/ function.php style.css page.php header.php footer.php /inc/class-somefunction.php .... Child Theme: ============ ROOT/wp-content/themes/themeX-child/ function.php style.css page.php ....
So if you bring on custom style changes, these changes need to go into the style.css file of the child theme folder so that they are not lost in the next theme update. When you update a theme it will overwrite files in the parent theme folder. So for example, if WordPress update the theme it will overwrite the all the files, in the example, in the parent theme, but all your custom changes will stay safe in the child theme folder.
Another example (based on the example above):
When you access a page.:
- WordPress loads all the core files.
- When it loads the theme, the VIEW of the site, it will check what files is in the /themes-child/ folder. It found these.:
- Now it has a list of files in the child theme folder, so when it loads the parent theme folder it will skip page.php for example since there is already a copy loaded in memory.
The reason why I did not add function.php or style.css to the list, is because the child theme, most of the time, refers back to those files in the parent folder. It also needs to load them else you will have no default styling or functionality on the site. So, in other words, it will fuse together both the child and parent’s function.php file for example, because the child function.php relies on the parent function.php file.
This was a simple example. Imagine when you have custom changes(layouts or functionality) to a bigger plugin like WooCommerce where all or most of the template files have custom changes. Most plugins like WooCommerce, WP Job Manager and such also have template files that are supplied with the plugin. If you want to perform custom changes on those templates you need to move them to the Theme’s child folder. For example, WooCommerce template files will live in this folder inside the child theme.:
CHILD THEME: ============ ROOT/wp-content/themes/themeX-child/woocommerce/ single-product.php single-product-reviews.php content-single-product.php content-product.php /cart/ /checkout/ /emails/ /order/ ....
The reason why I need to mention this is because we most of the time get clients who come to update there WordPress, Plugins, and Themes. The first thing we usually ask if we don’t find a child theme setup on their install is if they have any custom changes that they are aware off? If yes you can imagine the nightmare to filter through hundreds of coded template files to look for custom changes. That is IF the client knows exactly what custom changes were done to the site. If they don’t there is a process to find out, but it takes time. Then it takes 3x – 4x as long to update a site, to isolate all the custom changes because we would need to compare the current version of templates filed against each other to spot the custom changes. This is because WooCommerce and WooCommerce template files get updated so frequently.