We often get questions regarding uppdates in various forms. What we quite often see is that there is no child theme installed on the website. Instead the theme has been installed and changes have been made within the theme files.
If you were to update the theme, all code changes made previously will disapear, especially if you use WooCommerce and you use WooCommerce template files or hooks in your theme.
A way to avoid this is to create a child theme to be certain no changes of code will be done in the original theme.
Create a Child Theme – this is how you do it
What you need to do is create a folder on your computer for the theme. In our case we create a child theme to the original theme Storefront from WooCommerce.
Give the folder a name that indicates that it’s a child theme. In the folder you only need to create two files in order to make it work.
- functions.php
- style.css
Your can create these with the help of different text editor programs such as Notepad, Sublime Text etc.
Open the text editor and create a new file that you name style.css. This file needs to contain the following text:
/* Theme Name: Storefront Child Theme Theme URI: http://example.com/storefront-child/ Description: Storefront Child Theme Author: John Doe Author URI: http://example.com Template: storefront Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: e-commerce, two-columns, left-sidebar, right-sidebar, custom-background, custom-colors, custom-header, custom-menu, featured-images, full-width-template, threaded-comments, accessibility-ready, rtl-language-support, footer-widgets, sticky-post, theme-options Text Domain: storefront-child-theme */ /* Add your own css here */
Depending on what theme you have you also need to change:
Template: storefront
to the name of your original theme.
In order to make WordPress understand that this is a child theme and the style.css should be taken from the original theme, you initially need to enqueue style.css from the original theme in your child theme’s functions.php. The file then needs to contain at least the following code:
This makes the original theme style.css to be enqueued first and secondly the child theme style.css . This makes sure that all changes you do in the child themes css overwrites the original theme styling.
Upload the theme to WordPress
Once you have created these two files in your folder you need to add them to you website. This you can do in two different ways. Either you upload the theme via ftp/sftp or you create a zip file of your folder and then upload it via WordPress admin as an installation of a new theme.
Through this setup you can create an environment that makes it more safe to update your original theme when new versions are available.
