Create a child theme in WordPress

Create a child theme in WordPress

Create a child theme in WordPress

Create a child theme in WordPress

After installing WordPress, you may want to change the default look and feel of your WordPress site. And the way you do it is basically changing the theme. Changing the core theme or hacking into this is not always a good idea. Because when you will update your theme it will just overwrite everything with the new version of files and you will lose all your hard work. So, what is the solution? Yes! The solution is making a child theme of the desired theme you want to change. By doing this you can modify your theme without touching the core theme.

Question is how to make a child theme. Let me guide you through. This very simple to make a child theme. I assume you are already familiar with WordPress file structure. Even if you are not, there is nothing to worry about. You will gradually get to know this.

Suppose you have installed WordPress and your current theme is Twenty Sixteen. Your WordPress theme directory will be wp-content->themes and you will see twentysixteen directory that you are using as your current theme which you want to change with the help of a child theme.

Make a new folder under wp-content\themes directory and name it twentysixteen-child Make sure you make the folder inside themes directory not inside any individual theme.

So right now, out twentysixteen-child directory is empty, and we need to create a style.css file inside the twentysixteen-child directory which will have our all style override. so, any styling we do in this stylesheet will override the parent themes stylesheet. So, lets create a style.css file inside twentysixteen-child directory.

Now in the style.css file, we need to write some information so that WordPress understands that this is a child theme of its own twentysixteen core theme. To do this, open the style.css and write some information.

/*
Theme Name: Twenty Sixteen Child Theme
Description: This is a child theme of Twenty Sixteen
Author: Your Name
Template: twentysixteen
Version: 0.1
*/

Once you are done writing this in your style.css file, your Child theme is created and if you go in your WordPress dashboard and navigate to Appearance-> Theme you will see your new child theme there and it appears there because of the information we have provided in the style.css file.

You can click on the child theme and activate it. Now if you go back to your website and refresh it you will find a website without no style at all which is a bit frightening and you did not want it. Nothing to worry about as we will solve it in a bit.
Now go back to your style.css of your child theme and write @import url(“../twentysixteen.style.css”);
underneath the information, we previously wrote. Which is going to look like this

/*
Theme Name: Twenty Sixteen Child Theme
Description: This is a child theme of Twenty Sixteen
Author: Your Name
Template: twentysixteen
Version: 0.1
*/
@import url("../twentysixteen.style.css");

Let me explain this a bit. With @import we are basically importing all the styles from the core theme which we can override/change from this style.css file.
Now if you save it and go back to your website you will find everything back to normal with the facility to override the styles.
So, any style you write under the import will override the core style.css file so try this

/*
Theme Name: Child theme of Twenty Sixteen
Author: Your Name
Template: twentysixteen
Version: 0.1
*/
@import url("../twentysixteen/style.css");
body{
background-color: red;
}

 

Best WordPress Hosting in BD

Leave a Reply

Your email address will not be published. Required fields are marked *