How to use a child theme on WordPress and WooCommerce

Share on whatsapp
Share on email
Share on facebook
Share on twitter
Share on linkedin

If your website is running on WordPress (and WooCommerce), you will know that modifying and customizing your theme can be a lot of work.

One of the most important things to ensure when customizing your website is to keep the possibility to upgrade your WordPress core, plugins, themes, and other parts of code.

Why should I use a child theme?

When you spend hours and days in customizing your website, you want to keep those changes even if there is an update coming to your main theme. Also, you should not skip updating WordPress, plugins, or themes just to keep your customizations. Updates are crucial to keep your site secure. Very often, they will also bring some great new functionality which will help you to build a better website.

Therefore, child themes are the way to go once you set up your website with WordPress. Many professional themes will already come with a built in child theme folder and make it very easy for you to start building upon them.

How to create a child theme for WordPress

Creating a child theme for your WordPress website is extremely easy. Basically, there are only three things to do:

  1. Create a child theme folder
  2. Create a style.css for your child theme
  3. Create a functions.php and enqueue dependencies

Here’s how to do this:

1. Create a child theme folder

First, your child theme needs a folder. Simply go to your theme directory at wp-content/themes and create a new folder. Name this folder similar to your existing theme and append ‘-child’ to it.

Example: to create a child theme for the theme twentynineteen you would create a folder named twentynineteen-child.

2. Create a style.css for your child theme

Second, you create the first fundamental file of your child theme – the style.css. Simply use a code editor (e.g., the popular and amazing Notepad++) and create a file named style.css within your child theme’s folder.

In your new style.css add the following lines of code on the very top of the file.

You need to edit those lines according to your needs. Replace the placeholders with your information. The following information is required and the most important:

  • Theme Name: this is what will show up on your WordPress dashboard later. Name your child theme uniquely so that you can recognize it later.
  • Template: This needs to be the exact name of the parent theme’s folder. E.g., ‘twentynineteen’.

Now, you can add your own CSS styles within this style.css. Simply add your CSS code below the code you have just added to the top of the file.

3. Create a functions.php and enqueue dependencies

Lastly, you need to create a file named functions.php within your child theme’s folder. This step is technically not mandatory but we recommend it as you will need this file for almost every customization later.

Within this functions.php, the first thing you may want to add is some code to enqueue your style.css and the one from the parent theme. Use the following code to load the parent theme’s style.css and afterwards the one from your child theme. This will ensure that your child theme’s CSS styles will overrule the ones from the parent theme.

Hint: mind the opening <?php in the top of the file. This is mandatory as your functions.php is an executable PHP file.

Once you have completed this step, you are practically done with setting up your child theme. Upload it, go to your WordPress backend, navigate to the themes section and activate your child theme. If everything is correct, you will still have the style of your parent theme on your website. Now, you can start to add customizations to your child theme!

You can find a full reference on how to create child themes on the WordPress.org Theme Handbook.

Share on whatsapp
WhatsApp
Share on email
Email
Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Discussion

Join the discussion about 'How to use a child theme on WordPress and WooCommerce'

No comment yet, add your voice below!


Add a Comment