A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme. The benefits of working off a parent theme means you don’t need to write all the HTML/CSS from scratch. A child theme will automatically use any template files you include, such as sidebar.php or footer.php. But if they are missing, then your child theme will pull the same files from its parent.
How to create the Child Theme
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
- The child theme directory
- style.css
- functions.php
The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you’re creating a theme for public use) that the name of your child theme directory is appended with ‘-child’. For example child theme ‘twentyfifteen-child’, indicating that the parent theme is the Twenty Fifteen theme.
The next step is to create your child theme’s stylesheet (style.css). The stylesheet must begin with the following :
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: Alechco 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 Text Domain: twenty-fifteen-child */
Next step is is to enqueue the parent and child theme stylesheets. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.
<?php function my_theme_enqueue_styles() { $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. 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 ), wp_get_theme()->get('Version') ); } add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); ?>
Your child theme is now ready for activation. Log in to your site’s administration panel, and go to Administration Panels > Appearance> Themes. You should see your child theme listed and ready for activation.
Using functions.php
Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. The function will do the exact same job from there too, with the advantage that it will not be affected by future updates of the parent theme. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.
<?php // Custom Function to Include function my_favicon_link() { echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n"; } add_action( 'wp_head', 'my_favicon_link' );
The fact that a child theme’s functions.php is loaded first means that you can make the user functions of your theme pluggable:
if ( ! function_exists( 'theme_special_nav' ) ) { function theme_special_nav() { // Do something. } }
Nice article.