A child theme is a theme that inherits the functionality and design of another theme, called the "parent" theme. A child theme is a way recommended by the WP developers to modify an existing theme for themselves.
Why use a child theme?
There are several reasons why you would want to use a child theme:
- If you change the theme directly and it gets updated, your changes will simply be lost. By using a child theme, you will be sure that your changes will be saved.
- Using a child theme can speed up development time.
- Using a child theme is a good way to learn the WordPress theme development process.
How to make a WordPress child theme
A child theme consists of at least one folder (child theme directory) and two files (style.css and functions.php) that you will need to create. So, you will need:
- Child theme directory
- style.css
- functions.php
The first step is to create a directory for the child theme, which will be placed in the wp-content/themes folder. It is recommended that the name of the child theme directory end with the “ -child ” suffix (although not required, especially if you are creating a theme for public use).
You also need to make sure that there are no spaces in the child theme directory name, otherwise it will throw an error. In the screenshot above, the name of our child theme is “ twentyfifteen-child ”, meaning that the parent theme is Twenty Fifteen.
The next step is to create a stylesheet for the child theme (style.css). The style file must begin with the following meta information:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */
Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author URI: http://example.com Template: twenty-fifty Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child |
Important information you should be aware of:
- You will need to change the text of this example based on your situation.
- The string “ Template ” corresponds to the name of the parent theme directory. In our example, the parent theme is Twenty Fifteen, so the string “ Template ” contains “ twentyfifteen ”. There may be a different topic in your case, so adjust accordingly.
- In principle, the style file (style.css) is already enough to create a child theme. However, in order to correctly queue up styles to load, you will need a functions.php file (see below).
The third and final step is queuing the parent and child style files.
Note that the previous method involved importing parent styles using the @import directive. This is now an outdated practice.
How to correctly and correctly load styles
The correct method of queuing the parent stylesheet is to add hook(or, in English, action) as a wp_enqueue_scripts function.
This method also involves using the wp_enqueue_style() function in the child functions.php file. So you need to create this file in your child theme directory.
The first line of the child functions.php file starts with the opening PHP tag (
The following function example will work if the parent theme has only one main style.css file containing all the CSS rules. If your theme has more than one .css file (including ie.css , style.css , main.css ) then you will need to satisfy all required parent theme dependencies.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); )
Typically, a child theme's stylesheet is loaded automatically. If it's not, you'll also need to enqueue it. By setting parent-style as a dependency, make sure the child theme's styles are loaded after it.
add_action("wp_enqueue_scripts", "theme_enqueue_styles"); function theme_enqueue_styles() ( wp_enqueue_style("parent-style", get_template_directory_uri() . "/style.css"); wp_enqueue_style("child-style", get_stylesheet_directory_uri() . "/style.css", array("parent-style ")); )
add_action("wp_enqueue_scripts" , "theme_enqueue_styles" ) ; function theme_enqueue_styles()( wp_enqueue_style ("parent-style" , get_template_directory_uri () . "/style.css" ) ; wp_enqueue_style("child style" , get_stylesheet_directory_uri(). "/style.css" , array("parent-style" ) |
Your child theme is now ready to be activated. Log in to the admin panel, then go to the page Appearance > Themes. You should see your child theme in the theme list and ready to be activated. (If your current installation has multisite enabled, then you need to switch to the appropriate panel to enable the theme. After that, switch back and activate the theme).
Important: After activation, you will need to re-save your menu ( Appearance > Menu or Appearance > Tune> Menu) and theme options, including a background image as well as a header image, if provided by the parent theme.
Template files
If you want to change more than the styles, there is a way to override any parent theme files. To do this, simply include a file with the same name in your child theme folder. Thus, it will “override” the corresponding file in the parent theme directory when the site loads.
For example, if you want to change the header PHP code, you can include a header.php file in your child theme directory and that file will be used instead of the parent theme's header.php.
You can also include files in a child theme that weren't originally in the parent theme. For example, you can create a more functional template than the parent template for a particular page or category.
Using functions.php
Unlike style.css , a child theme's functions.php file does not override the parent's copy. On the contrary, it is, as it were, an addition to it (more precisely, it is loaded front parent copy).
Thus, a child theme's functions.php provides a smart, hassle-free way to change the parent theme's functionality. Let's say you want to add a PHP function to your theme. The fastest way is to open the theme's functions.php file and put the function there. But this is not very smart: the next time the theme is updated, your function will simply disappear.
There is an alternative path that is more reasonable: you can create a child theme, add a functions.php file to it, and put your function in the newly created file. The function will do the same job from there as well, with the advantage that it won't suffer from future updates to the parent theme. Hence an important note: do not copy the entire contents of the parent functions.php file into the same child file.
The structure of functions.php is simple: the opening PHP tag at the beginning, and below it you place your PHP code. You can place as much code as you need in this file. The example below illustrates a rudimentary functions.php file that does one simple thing: add a favicon link to the tag
HTML pages." . "\n"; ) add_action("wp_head", "favicon_link");
Tip for theme developers: The fact that a child theme's functions.php is loaded first means that you can make user functions replace developer functions, i.e. if the user created the same function as yours, then it will become the main one. Just add a condition:
if (! function_exists("theme_special_nav")) ( function theme_special_nav() ( // Do something. ) )
In this case, the child theme can replace the parent's PHP function by simply declaring it ahead of time.
Including files in your child theme
When you need to include a file that should be part of the child theme structure, use the get_stylesheet_directory() function. Since the parent stylesheet file style.css is replaced by the child style.css , and the child style.css is located in the root folder of the child theme's subdirectory, get_stylesheet_directory() will point to the child theme directory, not the parent theme directory.
Below is an example of using the require_once construct that illustrates how you can use get_stylesheet_directory when you need to refer to a file stored in a child theme structure.
require_once(get_stylesheet_directory() . "/my_included_file.php");
require_once (get_stylesheet_directory () . "/my_included_file.php" ) ; |
Additional useful information
Using post formats
A child theme inherits the post formats defined in the parent theme. When creating a child theme, be aware that using add_theme_support("post-formats") will override the formats defined in the parent theme, not add to them.
RTL support (right-to-left writing)
To support RTL languages, add the rtl.css file to your child theme. It contains:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */
A WordPress child theme is a theme that extends the functionality of another theme, called a parent theme, and allows you to modify or add functionality to the parent theme. This article explains how to create a simple child theme and what you can do with it. An example of a parent theme is Twenty Ten, the new default theme in .
Attention! If the information below seems difficult for you to understand, then you can use a more up-to-date and faster way to create a child theme using the Child Theme Configurator plugin
Creating a child theme is very easy. Create a folder, put the appropriately written file in it style.css and the child theme is ready! With a little understanding of HTML and , you can change this very simple child theme- changing the appearance and layout of the parent theme, but not changing its files. This way, when the parent theme is updated, your changes are saved.
Child themes in WordPress allow you to make changes to existing themes, and in such a way that such changes are not lost when updating the original (or parent) theme. In addition to appearance, child themes allow you to change the layout, and even the functionality of the parent theme, extending it to your own needs.
Support for child themes in WordPress has been around for a long time, but most users today still prefer to make changes to the source theme code directly. In this article, we will explain how child themes work in WordPress and why child themes should be used to make any changes to existing themes.
What is a child theme
A child theme in WordPress is a theme that inherits the look and feel of a parent (original) theme. Such inheritance makes it easy to change and supplement certain parts of the parent theme without changing the original theme itself. With this approach, updating the parent theme will not affect such changes.
The parent theme can be any other WordPress theme (with the exception of child themes), and for the child theme to work, both themes must be installed, but the child must be activated.
How to create a child theme
The simplest child theme consists of a single style.css file that specifies the name of the child theme and the name of the parent theme directory. The same file often references the parent theme's stylesheet using the @import CSS directive.
As an example, we will create a child theme called My Child Theme and use the default Twenty Twelve theme as the parent theme.
First, make sure the parent theme exists - find the twentytwelve directory in wp-content/themes . Then create a new directory in wp-content/themes and name it my-child-theme . In this new directory, create a style.css file and paste the following heading into it:
/** * Theme Name: My Child Theme * Template: twentytwelve */ @import url("../twentytwelve/style.css");
With the help of this title, we determined the name of our new theme, and also indicated the parent. The @import directive in this case loads all the styles from the Twenty Twelve theme, on top of which we will make our changes. Without this directive, our child theme will only inherit the templates (markup) of the parent theme, not the style.
After that, your theme directory should look something like this:
When you go to Appearance → Themes, you will see that your new theme is already available for activation.
If you activate it and navigate to your homepage, you will see that your child theme looks exactly like the default Twenty Twelve theme.
Working with styles
Child theme CSS styles can be set directly in the style.css file right after the @import directive. For example, to set the background and link colors in your theme, add the following code to the end of your stylesheet:
Body ( background: red; ) a ( color: green; )
In this way, you can change the styles of any elements of the parent theme, and you can easily find the necessary element using the developer tools in the Google Chrome browser or using the Firebug extension for the Firefox browser.
Working with Templates
With the help of a child theme, you can also easily modify the templates of the parent theme itself. To do this, just create a file in the child theme with the same name as the template in the parent theme. For example, to replace the footer.php template with your own, create a footer.php file in your child theme directory: