A child theme or WordPress child theme is a theme that inherits the functionality of another theme, called a “parent theme“. Using a child theme is the easiest and safest way to edit an existing theme, because it allows you to add new features or change the appearance of the parent theme without directly overwriting the original files.
Why use a child theme?
Among the fundamental reasons that motivate the use of the child theme is the possibility to use third-party themes and customize the theme according to our particular needs without directly modifying the core of the parent theme (original), with the security of not lose the changes made to the WordPress template after each update of the parent theme.
In this case, the advantage of the procedure for creating a WordPress child theme occurs when we have to add a feature that is common to all sites and we can do so by modifying only the child or child theme.
Moreover, it is an excellent way to understand the hierarchy of files and to develop a customized theme, facilitating the development phase. In the absence of a child theme, simply modifying the code of the parent theme would represent a solution that is so viable, but of dubious effectiveness; this because, as anticipated, the changes made would be lost when the theme was first updated. But how do you create a WordPress or child theme?
How to create a WordPress child theme (or child theme): style.css and function.php
Setting up a child theme is a simple operation, using any file management software via FTP, simply create a folder in the WordPress theme directory ( ../wp-content/themes) to which we can assign the name twentyfourteen-child (the name is given as an example, can therefore be assigned any other name). Inside the folder the only really essential file is style.css, this file, through its header, will be used to indicate to WordPress which parent theme the child theme should refer to.
CSS style sheets let you control the appearance of Web pages. Using CSS, you can precisely position and set the appearance of elements on a Web page (download for free: Notepad ++ free text editor program to create a CSS, PHP, JS style sheet etc.)
The file header style.css can contain various information and be similar to the following:
/* Theme Name: Twenty Fourteen Child Theme URI: http://example.com/twenty-fourteen-child/ Description: Twenty Fourteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfourteen Version: 1.0.0 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready*/@import url("../twentyfourteen/style.css");/* =Theme customization starts here-------------------------------------------------------------- */ |
The syntax /* and */ is essential (mandatory) because it tells WordPress opening and closing of the header ( header ). Among the example information only two are strictly necessary: Theme Name because it serves to assign the name of the child theme, and Template because it serves to assign the theme to be referred to, indicating the name of the parent theme directory (the directory name is case sensitive, then distinguishes between uppercase and lowercase letters).
As for the other topics, their use and the role played by each of them, it is possible to refer to the following scheme:
| Parameter | use | Description |
|---|---|---|
| Theme URI | (optional) | URI to the child theme. |
| Description | (optional) | Description. |
| Author | (optional) | Author’s name. |
| Author URI | (optional) | Web page of the author. |
| Version | (optional) | Version of the child theme. |
| Tags | (optional) | Labels for the classification of the theme. |
After declaring the theme header, you need to import the parent theme style sheet via:
@import url("../twentyfourteen/style.css"); |
Note: The added css code, present in the style sheet ( style.css ) within the child theme folder, will overwrite the styles of the parent theme. This type of CSS statement ( can slow down the loading of pages.) It is therefore preferable to integrate the parent theme style sheet without using the @import function but creating a new functions.php file always inside the child theme folder, containing the following code:@import url)
<? php add_action (‘wp_enqueue_scripts’, ‘enqueue_parent_theme_style’); function enqueue_parent_theme_style () {wp_enqueue_style (‘parent-style’, get_template_directory_uri (). ‘/ style.css’); }
At this point, if the header has been filled in correctly, the child theme is ready to be activated. By accessing the area under the heading “Appearance” > “Themes“, it can be found among the themes installed and available. It will therefore be sufficient to click on “active” to start using it. If you want to add a custom preview image, you can create a named image file screenshot.png and place it in the child theme directory. Alternatively, simply copy and paste the file screenshot.png from the parent theme directory.
Initially, the child theme will be a simple mirror copy of the parent theme for the fact that still have not been included special personalizations that could be both “aesthetic”, with the definition of new rules of style, or functional with the definition of new instructions (function in php).
The new style rules can be inserted directly style.css following the CSS import instruction of the parent theme. For example, if we want to change the color of the titles with respect to the parent theme, we can add a specific CSS rule. The rules of the child theme will take precedence over the equivalent ones of the parent theme, overwriting them.
The chances of changes through a WordPress child theme, as already mentioned, do not end with the style.css style sheet. You can in fact intervene on other features of the WordPress site through the creation of the functions.php file, specifically created inside the folder of your child theme. Inside the functions.php file you can in fact insert the php(or snippet ) function codes inside the php tags (<? Php and?>).
Unlike the style.css style sheet, functions.php does not override that of the parent theme, but is loaded just before the parent theme. You do not need to copy all the function.php text of the parent theme into that of the child theme. You can enter only the php codes required to get certain functionalities in the functions.php of the child theme, such as adding or removing widgets in your theme, editing a text in the footer or removing the search function in WordPress.
How to install a Child WordPress Theme with just one click
If the guide that I have previously explained you on creating WordPress child themes seems to you below you will find the best WordPress plugin to create child themes with just one click in an easy and safe way: Child Theme Configurator.
With the Child Theme Configurator plugin you will be able to configure a WordPress child theme in an instant and also easily find the parts of the parent (parent) theme you want to edit.
Conclusion
In this guide we have seen what the WordPress child themes are and how to create WordPress child themes.
I hope I have helped you and made you understand why using the child theme could be a very smart and fundamental move in the development of a WordPress website or blog.
If you want to leave your opinion on the subject you can do it in the comment box.