A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. A WordPress child theme is the safest and easiest way to modify an existing theme. A WordPress child theme allows you to change the functionality/design of the theme without having to edit the original/parent theme files. If you need to modify/add any template file or add/edit CSS styles and images then we recommend creating a child theme instead of editing the original/parent theme. Since the child theme is stored separately, you won’t lose any customizations made in the child theme when updating your theme. But if you edit the original/core theme, then all your customizations made in the parent theme will be lost when you update your theme.
How Child Theme Works
It is almost like magic when you are modifying the theme. Once you build a child theme and active it, WordPress will look for the template files in the child theme folder first and then only in the parent theme folder. For example: if you add “header.php” in your child theme then WordPress will use the child theme header.php instead of the parent theme header.php file.
If the file doesn’t exist in the child theme, it will fall back to the parent theme folder. In other words, if there is a “header.php” in the child theme, WordPress will use that “header.php”, else it will use the “header.php” file in the parent theme.
Creating Child Theme using Generate Child Theme Plugin
Generating a child theme is just a few clicks away, install our free plugin “Generate Child Theme” and it will create automatically a child theme for you without any hassle. Here is link for the plugin.
Creating a Child Theme manually
If you want to create child theme in a manual way follow the following steps:
To build a WordPress Child theme, first, you need to create a new theme folder/directory. For example, if you are building a child theme of the ‘Catch Box Pro’ theme then you can name the folder as ‘catch-box-pro-child’. Then, create a new CSS file in the child theme folder and name it style.css. This is the only file required to make a child theme. This stylesheet must start with the following lines:
/* Theme Name: Catch Box Pro Child Theme Theme URI: https://catchthemes.com/themes/catchbox-pro Author: Catch Themes Team Author URI: https://catchthemes.com Description: Catch Box Pro is an advanced version of our popular theme Catch Box. It is based on HTML5, CSS3, and Responsive Web Design to view on various devices. Some of the additional features include: featured image slider, option for the full-width slider, disable responsive layout, header option for margins, image and search, color options, additional color scheme, font family options, font size options, additional default layout options, additional optional sidebar for homepage, archive, pages, and posts, homepage category setting, more tag text options, and footer editor options. Multilingual Ready (WPML) and also currently translated in Brazilian Portuguese, Spanish, Danish, Germany, French, Polish, Czech, Croatian, Italian, Swedish, Russian, Arabic, Serbian, Dutch, Persian, Hungarian, Slovak and Japanese. Version: 1.0 License: GNU General Public License, version 3 (GPLv3) License URI: https://www.gnu.org/licenses/gpl-3.0.txt Tags: dark, light, blue, white, black, gray, one-column, two-columns, left-sidebar, right-sidebar, fixed-layout, fluid-layout, responsive-layout, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-image-header, featured-images, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready Text Domain: catchbox Template: catch-box-pro */ /* =Child Theme Custom CSS -------------------------------------------------------------- */
The above style.css is the sample file for Catch Box Pro Child theme. Now, let me explain the code above
Theme Name (required): use the parent theme name + child to make it easy to identify
Theme URI (optional): URI of the Theme
Author (optional): Theme development team
Author URI (optional): URI of Theme development team
Description (optional): You may enter any text here. Best if to describe your child theme
Version (optional): Version of you child theme
License (optional): License of you child theme. It should be same as your parent theme
License URI (optional): License URI of you child theme. It should be same as your parent theme
Text Domain (optional): Used for internalization.
Template (required): name of the parent/original theme folder
Then you may add any additional Child Theme Custom CSS that you want.
The two necessary items in the code above are the lines starting with “Theme Name” and “Template”. The theme name tells WordPress what the name of your theme is, and this is displayed in the theme selector in your WordPress Dashboard. The template tells WordPress which theme it should consider as the parent theme.
Child Theme functions.php
After you create sytle.css in your child theme, the next file necessary for your child theme is the functions.php file. functions.php is where a theme’s main functions are typically stored. A parent theme’s functions are always loaded with the child theme, but if you need to add more custom functions to your theme then you can do so by creating a new functions.php file within your child theme folder. The new functions will be loaded right before the parent theme’s functions. Your child theme’s functions.php file should start with a PHP opening tag and end with a PHP closing tag. In between, you can add your desired PHP code.
<?php /** * Child Theme functions and definitions * */
Loading Parent Theme Stylesheet (style.css)
At this point, your child theme works just fine. If you activate it and reload the page all your content will be there but, it will have no styling information. So, the final step is to enqueue the parent theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer the best practice. 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. So, add the following example code in the functions.php file in your child theme:
/**
* Loading Parent theme stylesheet
*
*/
add_action( 'wp_enqueue_scripts', 'catchbox_child_enqueue_styles' );
function catchbox_child_enqueue_styles() {
wp_enqueue_style( 'catchbox-parent-style', get_template_directory_uri() . '/style.css' );
}
Overriding Parent Theme Template Files
Now you may like to override your parent theme files such as header.php, footer.php, image.php, index.php, single.php, page.php, and so on. So, to override the template files, open the original template file from our original/parent theme and save a copy to the child theme folder with the same file name and folder structure. Basically, the file structure has to match the parent theme.
For example, let’s say you want to edit/add in your page template then you need to open the page.php file from your parent theme and save a copy in the child theme. Then edit your copy of the page.php file in your child theme folder.
Overriding Parent Theme Functions
Most of our theme functions are wrap with if ( ! function_exists ( 'Function Name' ) ) : to make it easy for customizing through child theme. So, if you see any function like that and you want to change that then you can just copy that function in your child theme functions.php file and edit it as per your need.
For Example You will see this type of function in our theme
if ( ! function_exists( 'catchbox_header_image' ) ) :
/**
* Template for Header Image
*
* To override this in a child theme
* simply create your own catchbox_header_image(), and that function will be used instead.
*
* @since Catch Box Pro 2.2.1
*/
function catchbox_header_image() {
// Check to see if the header image has been removed
global $_wp_default_headers;
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="site-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" />
</a>
</div>
<?php endif; // end check for removed header image
}
endif;
So, if you want to change, that alt text to manual text My Site instead of your site title in the header image, then you need to copy the whole catchbox_header_image() function and change the value in the alt. See the code below, where I have added the whole catchbox_header_image() function and added in alt as Child theme header image.
/**
* Template for Header Image
*
* To override this in a child theme
* simply create your own catchbox_header_image(), and that function will be used instead.
*
* @since Catch Box Pro 2.2.1
*/
function catchbox_header_image() {
// Check to see if the header image has been removed
global $_wp_default_headers;
$header_image = get_header_image();
if ( ! empty( $header_image ) ) : ?>
<div id="site-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="My Site" />
</a>
</div>
<?php endif; // end check for removed header image
}
endif;
Download this simple Catch Box Pro Child theme
Activate The Child Theme
Now you can zip your child theme folder. As in this tutorial we use the example of Catch Box Pro child theme, your zip file will be as ‘catch-box-pro-child.zip’ and then upload your zip file as a new theme installation process from “Appearance => Themes => Add New => Uploads”, upload your zip file and activate it.
Or if you know the FTP access, then you can simply upload your folder and files ‘catch-box-pro-child’ in the wp-content/themes/ folder.
Generate Child Theme Plugin
If you are having difficulty to create child theme then you can use this plugin to create child theme.
The WordPress Codex: Check out the WordPress codex for more info about child theme