A child theme in wordpress. Many times it happens to us, we have made a wordpress installation, and we have a wordpress theme, template or theme installed and customized. But for whatever reason there is an update on this issue, we proceed with the update and by doing so, we overwrite all the personalized information that we would have done in our theme, losing all the customization, so if we did not have a backup we should start of zero.
The best thing to do this operation and what the wordpress content manager offers us to avoid this kind of situations is to create a child theme with the personalization that we want, in this way any update or renewal of the original theme will not affect the child or secondary theme created from it. The child theme will inherit the configuration of the original theme or parent theme and will also incorporate the configuration that we give to the child theme, at the level of css style sheet configuration, ...
Let's see how this operation has to be done:
First we proceed to create a folder with the theme that we are using, for this it is best to access via ftp to our server and make a copy of the theme folder, which will be on the route / wp-content / themes / we can call as we want, but it would be nice to give a meaningful name, for example if our theme is called temawordpress, the folder we create could be called temawordpress-hijo.
This new folder will be empty and there we can add the files we want, taking into account that they will modify the originals, for example if we modify the file footer.php, this new one will modify the one we had in our original theme.
If we want to customize the css stylesheet, we have to take a little care, in this case it is best to create the file, style.css and this new file must include a header that indicates that the new theme is a child of the original theme.
The header will include some directives on the subject, the most important directives are:
- Theme Name: <Name of child theme>
- Template: <Name of the original theme from which the child theme inherits>
- @import url (<path to the css of the original theme from which the child inherits>)
We can include what we want, our credits, our domain data, ... we must take into account that these directives are in the header and between comments. Once the header is included we can include the modifications that we want to the original css file
/ *
Theme Name: Theme child
Template: Theme
@import url ("../ Tema / style.css")
NOTE: Having created a folder in the themes folder we must include the path relative to the style.css of the original theme.
Here we could include directives that we want as
Author: My name
Description: This theme is a child of the original theme with theme name
....
* /
/ * Then we can modify the css as we want * /
Once created this new css file if we go to the Appearance menu of Worpdress and we access issues, topics installed we can now select the theme you just created son and activate it .
As we mentioned before, if we want to modify the original footer.php file it is best to copy the original file in the new folder of the child theme and modify it, bearing in mind that this new one will crush or overwrite the file we had before it will not have validity. The same for the header.php, or any file that we want to touch of the original theme.
If in addition we want to touch the file functions.php of the original theme, (we can happen that it does not show the posts of a certain category a certain function, or that it shows the image in one way or another) we must proceed in the same way, we create the functions.php file and add the new function that we want.
The operation of a child theme in wordpress and the sequence of operation is as follows:
- WordPress loads the active theme (if we have activated the new child theme, it will load this new one), it accesses the style.css file and detects in the header the Template directive that refers to the original theme.
- WordPress loads the stylesheet that marks the header of the style.css to be imported, in this case
@import url ("../ Tema / style.css")
- Load the style sheet of the child theme and the modified files of the child theme
- Once loaded, it loads the original files of the parent theme, both the style sheet and the original files of the parent theme, footer.php, header.php, ...
- Then it loads the functions.php file with the modified functions of the child theme and then the functions.php of the original parent theme.
Once we have this we will see that we can do any update of the original theme without fearing that the modifications we have made in the original theme are lost, since the modifications will be made on the subject child and not on the parent theme.
Personally I think it's a good way to solve the issue and it's pretty good, we can always export our child theme or include it as a personalization of the original theme for other users of the wordpress community.