How to make a child theme in WordPress

child theme

How to make a child theme in WordPress

How to make a child theme in WordPress to make changes to our parent theme. Changes could be to make our website faster, or to edit some CSS code in the theme. We can add new widgets to our theme and so on. In this article we will learn how to make a child theme in WordPress. We will do this step by step so everybody could make a child theme.

Difficulty : Child’s play

Why make a child theme in WordPress?

The main reason why we would want to make a child theme in WordPress is to make changes to the parent theme that we are using. And, not losing all of the changes when there is an update of the parent theme.

Another important reason why we want to make a child theme in wordpress is when we make a certain mistake. Especially in the functions.php file. We can easily delete the file and go back to our settings before we made the changes. If we would do those adjustments in the parent theme’s functions.php, and we make a mistake, we could completely ruin our website and lose a lot of time to find the mistake we made. Often this can be very subtle, like forgetting to add an ending php tag ?>, could already cause our website, not to show up anymore.

Making a child theme in WordPress to change the CSS is also a time saving event. Because when we make adjustments to the style.css from the child theme, the standard css from the parent theme will be overwritten immediately.

How to make a child theme in WordPress?

In the first place, we need to have access to our directory in WordPress. This can be done trough various ways. Or we can go to our WordPress directory using Cpanel or DirectAdmin. In that case we go to the file manager. Then click on our domain

public html => wp-content => Themes => (‘Make a new directory’)

The new directory we make will be the name of our child theme. In this example we will use Child-T1.

The next thing we will do is adding a new empty style.css file in that new directory.

For making the child theme work we have to add some lines to the top of our new CSS file…

These lines need to be copied and pasted at the top of the new style.css file inside our child theme. It is very important that the Theme Name is exactly the same name as our new directory. Theme URI and Author URI both contain our url starting from http://….

Description can be a personal description. Does not really matter, but the child theme needs to have a description anyway. The author is your name. This can be a nickname or be your real name.

Template should have the exact same name as the directory of the parent theme. In my case mh-newsdesk-lite.

Version 0.1 because this is the first version.

After adding these lines of information about the theme. We can save the file and upload to our server.

How to make a child theme in WordPress work?

In fact, we only need to have a style.css to make a child theme in WordPress.

Before we used the :

Today this is not the right way to make the child theme work.

This is because it will slow down our pagespeed.

The best practice to let WordPress know that we are using a child theme, but still need the style.css from our parent theme is to make a new empty php file in the child theme directory.

We call the empty file “functions.php”.

In the new functions.php we will add a few lines of code to use the child theme’s style.css AND still use the style.css from our parent theme.

The code …

The meaning of the code…

We are using a child theme. By adding this code we let WordPress know that this is a child theme from a parent theme. And we still need the original style.css from the parent theme to make it work.

Our new stylesheet from the child theme will be loaded automatically in most cases. We save the functions.php file and upload it to our server in the same directory as the new stylesheet we just created.

Now we go to Dashboard => Appearance => Themes

Our new child theme will now appear in the list of themes. This will look something like…

how to make a child theme in WordPress

 

If this is not the case and the child theme does not appear in our list of themes in the dashboard.

Than we have to enqueue the stylesheet from the child theme the same way as we enqueued the original stylesheet from our parent theme.

The code to do this …

We do not have to use both codes. If the first one works, we do not need to use the second piece of code. If the new stylesheet does not load automatically. We have to add the longer piece of code into the functions.php. Now we save the file, upload to our server.

We check again Dashboard => Appearance => Themes

Now we will find the child theme. We can activate it. And we know how to make a child theme in WordPress!

Extra

This is how to make a child theme in WordPress. But what will happen now, is that 2 CSS files will be loaded when we want to visit our website. If we want to make the website faster in one simple step, than we can simply copy ALL of the CSS in the stylesheet from our parent theme. And paste it in the stylesheet from the child theme. Then we click on save.

Note : This is used when the parent theme is only using one main stylesheet called style.css. If there are multiple stylesheets in our parent theme this may not work and we might have to copy all of our loaded CSS code into the stylesheet from the child theme.

What we are basically going to do now is to add all of the code from the parent stylesheet to the child theme’s stylesheet. In that case we do not need to use the stylesheet from our parent theme. This is going to make the website slightly faster because we have one fewer http request to execute for the website being loaded.

When we add all the CSS to the stylesheet from the child theme, we click on save and upload to the server.

Now to make sure that the stylesheet from the parent theme, will not be loaded anymore. We need to add a few lines of code to the functions.php in the child theme.

The code looks like this…

When we add this piece of code into the functions.php, our style.css from the parent theme will not be loaded anymore. If for some reason the CSS of the website does not work. Than simply delete the code and do a speedtest on pingdom to determine how many different stylesheets need to load when we want to view the website. In most cases this will be caused by having multiple css files in the parent theme.

If we want to take this reducing of CSS files to a further level, we can combine all CSS to one file in WordPress.

Share this with your friends

Be the first to comment on "How to make a child theme in WordPress"

Leave a comment

Your email address will not be published.


*