How to create a Child Theme in WordPress

Today we are going to analyze a way to customize WordPress templates that is not very popular, but it is extremely useful and easy to implement. Let's dive into the Child Themes.

What is a Child Theme?

A child-theme either Child Theme It is a modified version of a WordPress theme, which works based on the latter.

When you choose a complete and robust WordPress theme that you like to work on and use it to create a Child Theme, you will be able to make changes of all kinds to the style sheet (CSS), add lines to the functions.php file or go much further and modify the PHP template files.

Thus, you create a fully customized version of your favorite theme, but without ever modifying the original theme files. Your Child Theme inherits all the functionalities, features and code of the parent theme, but every detail you modify remains in the Child Theme. The parent theme is not affected, making it easier for you, for example, each new update.

Let's create a Child Theme

Creating a Child Theme is much easier than you think.

In this example we are going to work with the Vantage theme, one of the most popular WordPress themes.

We go to Appearance -> Themes and clicking on the Add new button we search for it by name and install it.

We already have it among our local themes, listed along with the others inside the folder wp-content/themes of our facility.

Now like this, we start with the creation and activation of the Child Theme. For that, we connect via FTP and go to the folder 'themes' that we just mentioned.

Let's create a new folder called 'vantage-child'.

Now, let's create a file called style.css with the following information:

/* Theme Name: Vantage Child Theme Theme URI: https://duplika.com Description: This is a Vantage Child Theme Author: Débora Orué Author URI: http://deboraorue.com Template: vantage Version: 0.1 */ @ import url("../vantage/style.css"); /* =Theme customization starts here ----------------------------------------- -------------- */

The name you assign to the Child Theme (Theme Name) is the one that will later appear on your screen. Topics to identify it.

The most important part of this file is in Template Y @import. You have to be very careful to respect upper and lower case when calling the themes. In our example there are no major problems, because we chose a subject that is only written in lowercase. If instead the containing folder was named 'Vantage', then we should make it clear in Template and @import.

We would be left with:

Template: Vantage */ @import url(“../Vantage/style.css”);

Also make sure to include the correct path in @import to the parent theme's style.css file.

With the file ready, we save and upload it to the folder /themes/vantage-child/.

Now let's go Appearance -> Topics, where the Vantage Child Theme is listed, with the information that we uploaded to it and the clarification that it is a child theme. It will be just a matter of pressing the button Activate to start using it.

 

Now to personalize it!

If you give F5 to your site, you will see that with the Vantage Child Theme it looks exactly the same as before.

The time has come then to start customizing it. we return to style.css and we set there all the changes we need, placing them below the line @import.

For example, we can change the color of the links if we write:

/* Theme Name: Vantage Child Theme Theme URI: https://duplika.com Description: This is a Vantage Child Theme Author: Débora Orué Author URI: http://deboraorue.com Template: vantage Version: 0.1 */ @ import url("../vantage/style.css"); /* =Theme customization starts here ----------------------------------------- -------------- */ /* Links */ a { color: #D63CCE; } a:hover, a:focus, a:active { color: #f47e3c; }

Easy, right?

And we don't have to limit ourselves to the style sheet. Our Child Theme adopts all the functionalities of the parent theme. But if we needed to add new ones, we create a new file functions.php inside the Child Theme folder.

We make sure to include the opening and closing tags, and in between, we include whatever code we need.

<?php
// Acá va nuestro código
?>

This functions.php file will load just before the parent theme file.

And we can go deeper still. For example, we can customize some of the structural files of the template.

Maybe we don't like the footer of the parent theme. So what we need to do is copy the file footer.php, located in the folder /parts/ of the original theme, to the folder of our Child Theme. Once there, we make all the modifications we want.

When the site loads, WordPress will know to display only the version that appears in the 'vantage-child'.

Do I need a Child Theme?

As you have seen, it is not complex at all to put a Child Theme to work. But before you do, ask yourself if you really need it.

You need a Child Theme if:

  • You are constantly adding new functions to your theme's functions.php file
  • All the time you are adding or modifying features of the style.css file

On the other hand, you do not need a Child Theme if:

  • The changes you are going to make are minimal
  • The changes you are going to make are immense

If you're only going to make a couple of small changes, then you can make a custom-style.css file or use a plugin.

If, on the other hand, you are going to touch the entire structure of the template, you are far beyond a Child Theme and it is better for you to start creating a custom theme.

WordPress Child Themes are easy to apply and very useful to be able to quickly update your themes without affecting your customizations.

Learn more about Child Themes at wordpress codex.

We are Duplika

Give your site the hosting it deserves

no comments on How to create a Child Theme in WordPress

back to blog

Duplika

Duplika

We are online, we are not a bot :)

I will be back soon

Duplika
Hi 👋
Select the prefered contact method to get in touch.
Connect via:
chat