[WordPress] – why and how to create a child theme

child themeWhy create a child theme in a wordpress project ?

If you want to translate your theme in the primary language of the site ( in French for example) or in multiple languages, you will lose all your work in each theme update .

Similarly, if you want to customize the theme you’re using by changing some of your site’s display. Or simply wanting to customize the display of your pages to mobile formats (tablets , smartphones ) which is now mandatory in order to get a better ranking . You’re still going to lose everything to each theme update.

Unless you create yourself your own theme (but this takes time and skills HTML / CSS / JS ) , I urge you to create a child theme in order to avoid these disappointments .

How to create a child theme in the wordpress project ?

First, open the ” themes” in ” wp -content” of your site. Create a ” Theme_name-child” folder inside of it.

child theme architecture

In the example above, we can see a folder “hueman-child” included in the “themes” to the same level as the theme used “hueman”.

Once this is done you may see your child theme in the administration of your site by opening the “appearance”. By cons you a message letting you know that the theme must have at least created a CSS file ( style sheet ) and a model.

Then let’s go, let’s create our style sheet. To do this, open the file “style.css” in the parent theme folder you want to change. In my example above, I open the folder “hueman” and retrieves the file “style.css” . Delete all of the code and just keep the cartridge section describing the file. Edit each part according to your child theme and then save it in your child theme folder as “style”. Below, the result with my theme “hueman-child”.

 child theme style sheet

Caution in the ” Template:” it is important to note the name of your parent theme directory in the same case otherwise you get a message in the administration of your site asking you to install the theme relative found.

Now you should see your child theme in the administration of your site.

Next step, create a “functions.php” file in the root of your child theme that will allow you to configure and customize your new theme. Enter fully the function of the parent theme in which you’ll find importing stylesheet “style.css”. I urge you to always completely retype the function otherwise you may break the functioning of the theme. If you want to use the style of the parent theme without modification using the “get_template_directory_uri ()” which returns the path of the parent theme as in the example below :

Import theme style child

By cons, if you want to use the child theme style sheet you need to replace the “get_template_directory_uri ( )” with “get_stylesheet_directory ()” which returns the path of the child theme.

In the example below I use this function to use my own translation of the theme files :

child theme language functions

And that ‘s it. Now you can change what you want in the parent theme. Just copy and adapt the files to your child theme carefully observing the architecture of the original theme.

To see the changes be sure to clear caches. This will reload the page with new css files.

Have fun and give me your feedback.

Rémy MANDIT

Advisor employability and web developer designer. Enthusiast image and sport shooting .

You may also like...

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Optimization WordPress Plugins & Solutions by W3 EDGE