[WordPress] – why and how to create a child theme
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.
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”.
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 :
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 :
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.