Child themes allow you to add some features or modify the parent theme. It is a theme that is aimed at inheriting the functionality of a parent theme. A child theme is the easiest, safest and best way to modify an existing theme, whether you want to make extensive changes or a few tiny changes.
You can create a child theme and override within instead of modifying the theme files directly. It is much easier.
Some possible reasons:
- Your changes will be lost, if your existing theme is updated and you need to modify it. Child theme allows you to update the parent theme without losing your changes (which might be important for functionality or security).
- Child theme speeds up time needed for the development.
- If you just start learning WordPress theme development, using child themes is an excellent way to do it.
- First off, you need to create a folder in your themes directory that will hold a child theme. Usually, it is wp-content/themes. Then name the folder as part of the name without any space. It is recommended to use the title of the parent with the postfix “-child” in the end. For instance, your folder name would be greengarden-child if you are making a child of the Green Garden theme.
- Pay attention: As long as you include the line “Template”, you can name the folder whatever you like. “-child” part is usually used in the end of the parent theme name.
- Create a file called style.css in the child theme directory. The style sheet should contain the following lines:
/*
Theme Name: Green Garden Child
Theme URI: http://sample.com/green-garden-child/
Description: Green Garden Child Theme
Author: John Smith
Author URI: http://sample.com
Template: greengarden
Version: 1.0.0
Tags: light, dark, three-columns, left-sidebar, responsive-layout, accessibility-ready
Text Domain: green-garden-child
*/
/* =Theme customization starts here
-------------------------------------------------------------- */Each of these lines can be changed to suit your theme. Theme Name and Template are the only required lines.
The directory name of a parent theme is the Template. If a parent theme is Green Garden theme, so the Template will be greengarden, which is the title of the Green Garden theme directory. Use the Template: example-theme-name if you want to make a child of a theme with the directory name example-theme-name.
Do not use @import to import the stylesheet of a parent theme into the child theme. To enqueue the parent stylesheet, using wp_enqueue_style() is the best way. Insert the following code in “functions.php” of your child theme. To do it, in your child theme’s root folder, please create a functions.php file (These two files are necessary for child theme creation). On the first line, right at the beginning, you need to add an opening php tag. And the rest of the code will follow after it:
<?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' );
}Pay attention: The stylesheet of a child theme is included after the styles and parent theme’s stylesheet. Therefore, it will override those in the stylesheet of parent theme.
Then activate the child theme. Log in to your website, go to Administration Panels > Appearance > Themes. Click Activate as soon as you find your child theme in the list.
Note: You may need to switch to the network admin dashboard if your WordPress is running in multi-site mode. Go to “Themes” and enable network.
Your child theme can override any parent theme file if you want to change more than mere stylesheet. In the child theme directory, simply add a file with the same name. When your site loads, it will override the “old” file in the parent theme directory. For example, if you want to change the site footer`s PHP code, just include a footer.php in the directory of your child theme and that file will be used instead of the footer.php of the parent theme.
Files not included in the parent theme may also be included in the child theme. For example, you can create a more specific template (such as a template for a category archive or specific page) than is found in your parent theme.
The child theme’s functions.php does not override its counterpart from the parent, unlike style.css. On the contrary, it is loaded additionally to the functions.php. of parent theme (Traditionally, it is located right before the parent theme file.)
The child theme’s functions.php file provides a trouble-free and smart way of modifying the parent theme`s functionality. If you want to add a PHP function to your theme, all you need to do is add the function to its functions.php file. But it will not be the best decision: your function will disappear next time your theme is updated. However, there is another way which is a wiser decision: you can add your function to the functions.php file of a child theme. It will not be affected by parent theme`s future updates, while the function will do the exact same job.
Note: Do not copy the full content of the parent theme’s functions.php into child theme’s functions.php.
The functions.php has a simple structure: at the top is an opening PHP tag, and your bits of PHP are below it. You can put as few or as many functions as you wish there. The example below adds a favicon link to the head element of HTML page. It is the simplest example of the functions.php file:
<?php // Opening PHP tag - put nothing before this, not even a whitespace
// Custom Function to Include
function favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'favicon_link' );Some tips for developers. You can make user functions of your theme pluggable, since a child theme’s functions.php is loaded first. It is replaceable by a child theme. For example:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}By simply declaring it in advance, a child theme can replace the parent`s PHP function.
Use get_stylesheet_directory() when you need to include files that reside within the structure of your child theme’s directory. Get_stylesheet_directory() will point to your child theme’s directory (not the directory of a parent theme) since your style.css resides in the root of your child theme’s subdirectory and the parent template’s style.css is replaced by your child theme’s style.css.
This example shows how you can use get_stylesheet_directory using require_once when referencing a file stored within the directory structure of your child theme.
require_once( get_stylesheet_directory() . ‘/my_included_file.php’ );
As is was mentioned before, a child theme inherits post formats. Be aware of using add_theme_support(‘post-formats’) when creating child themes. It will not add the formats defined by the parent theme, but override them.
Add rtl.css file to your child theme to support RTL languages. It should contain:
/*
Theme Name: Green Garden Child
Template: greengarden
*/If is_rtl() returns true, rtl.css is only loaded by WordPress. Even if the parent theme has no rtl.css file, it is recommended to add the rtl.css file to your child theme.
Just like other extensions, child themes may be translated into other languages with the help of gettext functions. Follow these steps to internationalize a child theme:
- Create a languages directory. For example, my-theme/languages/.
- Add language files. Unlike plugin files which are domain-he_IL.xx, depending on your language your filenames have to be he_IL.po & he_IL.mo.
- Add a textdomain. During after_setup_theme action in functions.php, use load_child_theme_textdomain(). Use textdomain to translate all strings in the child theme. It is defined in load_child_theme_textdomain().
- To add i18n support for your strings, use GetText functions.
For example:
<?php
/**
* Setup My Child Theme's textdomain.
*
* Declare textdomain for this child theme.
* Translations can be filed in the /languages/ directory.
*/
function my_child_theme_setup() {
load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>An example of gettext functions
<?php
_e( 'Code is Easy', 'my-child-theme' );
?>To summarize, the translation files should be located in “/languages/” directory. All strings that use “my-child-theme” textdomain will be translatable.
When you use wp_enqueue_style() instead of @import, an @import statement is referenced from the main stylesheet, whereas your enqueued stylesheets are all referenced from the HTML output to the browser. It will help the browser to know where to concentrate next.
In addition, all resources declared in each import statement are not loaded in parallel so @import suffers from performance issues. Since some browsers (e.g. Internet Explorer) will load a given stylesheet in order of declaration vs completion, there is also lack of control over the the @import statement`s order. If the order in which you declare your stylesheets depends on the existence of preceding styles, this can lead to unpleasant results.
Both the child and the parent themes must call their respective enqueues in their respective functions.php, in order to use wp_enqueue_style() properly.
Then, do not include its stylesheet to the parent theme in any manual way.
To queue the child stylesheet from its functions.php:
add_action( 'wp_enqueue_scripts', 'load_my_child_styles', 20 );
function load_my_child_styles() {
wp_enqueue_style( 'child-theme', get_stylesheet_uri() );
}To queue the parent stylesheet from its functions.php:
add_action( 'wp_enqueue_scripts', 'load_my_styles' );
function load_my_styles() {
wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css' );
}These identifiers are meaningless except for their role in HTML as identifiers. After these names the text “-css” is added.
You can override the header.php of your parent theme, and do the enqueueing yourself, if it does not use wp_enqueue_style(). However, your child CSS file should be the last, so you must enqueue both, and in the right order. Otherwise, it will not override the parent CSS. But functions.php of your child theme will be executed first. So you must reduce its priority in order for it to be executed in the last turn. You can simply call them in the right order, if you do both yourself (first enqueue the parent theme, then the child).
This approach also includes is_child_theme conditional tag and uses wp_enqueue_scripts.
Insert this PHP code in the functions.php file of your parent theme:
<?php
add_action( 'wp_enqueue_scripts', 'my_enqueue_styles' );
function my_enqueue_styles() {
/* If using a child theme, auto-load the parent theme style. */
if ( is_child_theme() ) {
wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css' );
}
/* Always load active theme's style.css. */
wp_enqueue_style( 'style', get_stylesheet_uri() );
}In any child theme, you will always need a style.css.
/*
Theme Name: Green Garden Child
Theme URI: http://sample.com
Author: You
Author URI: http://sample.com
Description: Child theme for Green Garden
Version: 1.0
Text Domain: greengarden
Template: greengarden
*/Creating a child theme is a fast and easy way to add some functionality to your WordPress parent theme. It is important to realize that sometimes you may not need a child theme even though you can always create a child of any WordPress theme. First, consider the changes you have planned for your parent theme. In case future changes are minor, you can always use some CSS plugins or create a custom style.css file. If the changes planned are serious and you need to override the core files of the parent theme, then creating a child theme is really necessary. We hope that this article helps you understand what is WordPress Child Theme and whether you actually need it or not.
