How to create a child theme in WordPress

Few years back when I was using a free WordPress theme, I learned how to create a child theme. Having a child theme is very important as I don’t want to lose all the custom styles I have been working on if I update the theme. Even now, I still using a child theme.

If you are new to WordPress, I would suggest you to learn how to create WordPress child theme. But before we go through the step by step of creating WordPress child theme, here’s some info about WordPress child theme.

What is WordPress child theme?

A WordPress child theme is a theme that inherits the functionality and styling from another WordPress theme, called the parent theme. Child themes are the recommended way of modifying an existing theme without losing the ability to update the theme.

That’s it, here’s the very basic concept of creating WordPress child theme for your website in a very simple and easy steps.

See also how to change WordPress domain address.

How to create a child theme in WordPress

Download and install any FTP software. I use a free one called Core FTP LE. If you’d like to try, here’s the website to download: http://www.coreftp.com/.

1. Open any FTP program and log-in into your WordPress folder.
2. Go to /wp-content/themes/ and create a directory for your child theme.
3. Go to your child theme directory (the one you created in step 2) and create style.css file.
   • To create style.css file, open Notepad and save as style.css
4. Open style.css file and create header like below (example of header comment):

/*
Theme Name: TruePixel Child
Template: truepixel
Author: Barzrul
Version: 1.0
*/

@import url("../truepixel/style.css");

Make sure to have the /* and */ at the start and at the end of the header comment.

• Theme Name: Put any name you want for your child theme
• Template: The exact name for your parent theme
• Author: Just put your name
• Version: Just put any number for your reference
• @import url("../truepixel/style.css) (replace truepixel with your parent theme directory)

Write any customization in the CSS code after the @import... line and click Save once done to save the changes..

Note: View your website on ignito or private mode windows to see the changes.

Let me know in the comment below if you need any help.