How to Create a Child Theme in WordPress

WordPress Child Theme
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 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, add/edit CSS styles and images then we recommend to create 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 child theme when updating your theme. But if you edit original/core theme, then all your customizations made in parent theme will be lost when you update your theme.

How Child Theme Works

It almost like magic when you are modifying the theme. Once you build 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 you child theme then WordPress will user child theme header.php instead of parent theme header.php file.
If the file doesn’t exist in the child theme, it will fallback 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 a Child Theme

To build a WordPress Child theme, first you need to create a new theme folder/directory. For example is you are building child theme of ‘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 advance version of our popular theme Catch Box. It is based on HTML5, CSS3 and Responsive Web Design to view in various devices. Some of the additional features includes: featured image slider, option for 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 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 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 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 you 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 same file name and folder structure. Basically, the file structure has to match with the parent theme.

For example, let’s say you want to edit/add in your page template then you need to open page.php file from your parent theme and save a copy in the child theme. Then edit your copy of 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 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 	
}

Download this simple Catch Box Pro Child theme

Activate The Child Theme

Now you can zip you child theme folder. As in this tutorial we use the example of Catch Box Pro child theme, you zip file will be as ‘catch-box-pro-child.zip’ and then upload your zip file as new theme installation process from “Appearance => Themes => Add New => Uploads”, upload your zip file and active it.

Or if you know the FTP access, then you can simply upload your folder and files ‘catch-box-pro-child’ in wp-content/themes/ folder.

Sample Child Themes

Additional Child Theme Resources

The One Click Child Theme Plugin: If you are having difficulty to create child theme then you can use this plugin to create child theme with the click of a button.

The WordPress Codex: Check out the WordPress codex for more info about child theme

Mission: Never ever edit any core theme files directly. Always build child theme for edits

31 thoughts on “How to Create a Child Theme in WordPress”

  1. hi sakin,

    i am using Catch Box theme. To create a child theme is familiar to me, but i want to create a new color scheme option in the child theme. do you know if it is possible at all?

    what i did so far (and its not working):
    1. create a child theme (import parent, works all well)
    2. in child i created the color folder and placed my own css in there
    3. also i created a inc folder and placed the copy of the theme-options.php there
    4. updated function catchbox_color_schemes() and catchbox_enqueue_color_scheme()

    but what did i forgot?

    any hint is appretiated!!

    best regards, martin

  2. Hi Martin,

    Adding Color Scheme is hard one as you need to add options in Theme Options panel. So, I suggest you to send us the color scheme that you want then we will include that in next version update.

    Regards,
    Sakin

    1. Hi Sakin,

      many thanks for the really fast reply!

      i compared the colored schemes, it can be reduced to 5 colors. this would be a great starting point to just fill in those 5 colors in the options.

      I fixed my requriement with the Additional CSS from the options, but anyway, i would be really interested in generating a new option in the child theme.

      maybe you can support me ,,,?
      (Maybe directly via mail, skype, whatever…?)

      BR Martin

      1. Hi BR Marin,

        I will email you and you can send me the color scheme that you want and maybe we can work together to release new color scheme. What do you say about it?

        Please check your email.

        Regards,
        Sakin

  3. Hello,

    i´m using Catch-Box Theme with the blue.css. But this ist not really the blue i want. How can i change the color, for example the menu? I´ve tried with childtheme, but unsuccessful.

    I have also noticed that when I move the mouse in the comments to the text, then ist is unreadable. Since the same color appears as the font color.

  4. ok, sorry, but i tried at forum second times, but my posts are not displayed.
    If the posts before publication of you tested? There was no hint text.

  5. Hi all,

    I’m using catch base pro and I have just finished making child theme. However, in the tutorial of wordpress.org I read that @import is no longer the best practice to reflect the parent’s theme.

    My question is how do I go about it? Should I just stick to the tutorial posted here or follow what was said on wordpress.org? And if how to do it if I were to follow the ones posted on wordpress.org? I’m new to customizing theme so I’m not really sure how to do things.

    TIA!
    Arnold

    1. @Tory: There is two way to import parent theme style.css. @import in child theme is the easy and one of the popular menthod. So, I added that in the tutorial. However, you can use wp_enqueue_style() to enqueue parent theme style. This is new way for adding parent theme style.css

      If you want to use wp_enqueue_style() then you should remove @import in your child theme style.css

      1. Hi – at your suggestion, I am going to try to make a Child Theme. Since “enqueue” is the recommended method now over “@import” I want to do it that way but it is not clear to me how to do that since the WordPress Codex (that is linked to on this page) says:
        “The following example function [that they give] will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies. Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.” I do not know how to do what they are saying since I do see other “.css” files in addition to “style.css” in the Catch Evolution theme folder so I don’t know how to proceed. I am not very familiar with code.

        What is the proper code to enter in the Child’s functions.php for a Catch Evolution Child theme to do the “enqueue” instead of “@import”, since Catch Evolution has more .css files than just the style.css?

        Thank you for your help.

  6. Do I really need a child theme? At this point we do not need to edit any of the core files. We might need some changes but won’t the custom css option do what we need? Or will these changes be over-written when our “full frame pro” theme is updated?

    1. No, you don’t need child theme for changing settings and css. Yes, custom css will work just fine. You need child theme only if you need advance customization like editing/adding theme functions.

  7. Hi,

    I created a child theme of Fullframe Pro. I already did some modifications which work (so far), but I struggle to do any modification to function fullframe_primary_menu(). When I do the modification in the parent file, it works, when I do the modification in the child file, I don’t see the changes on the website. Is there anything special to be considered for the files in \inc folder?

    Thanks for your help!

    1. Yes, it will work in child theme as well. So, you need to copy that fullframe_primary_menu() to your child theme functions.php file and then make the modification as per your need.

  8. Hi there,

    at the moment I’m testing your theme “full frame” to create our website in a new modern style. And I like your theme for our boat cruises.

    But I have some questions:
    Is it possible to get the in strong and bold to be found easier in the net? Where do I need to give the demand?

    And I need to do the website in different languages. At the moment I help myself with 2 websites. I don’t know how to translate the theme itself. I have alreade WPML in the small version. Is it possible to translate the theme options in Full Frame Pro?

    Greetings
    Sabine

    1. Hi Sabine,

      Thanks for your appreciation. Yes, you can make it strong/bold from CSS or from HTML tag strong. So, for this type of technical question, you can post in our free registered support forum at http://catchthemes.com/support-forum/. Yes, if you have Full Frame Pro then you can use WPML plugin then you can translate options from string management.

      Regards,
      Sakin

  9. I created a child theme for Catch Responsive free theme using your example under Sample Child Themes. Now that I’m further into work on my website, I am considering purchase of Catch Responsive Pro. Would it be best for me to start over from scratch and create a new child theme using your Catch Responsive Pro Child Theme example?

    1. Hello DJ,

      It depends on the what are the changes you have made in you Catch Responsive Child theme. You can actually just change few codes in your Catch Resposnive Free child theme to make it Catch Resposnive Pro child theme.

      In style.css file change
      Template: catch-responsive

      to

      Template: catch-responsive-pro

      Regards,
      Sakin

  10. Hi guys,

    for some reason I can´t see the uploaded child theme for catch responsive. I am using the provided child template without any changes and uploading via FTP.

    Any ideas?

    Thanks a lot.

    1. Hello Huca,

      Sorry I don’t get it what you mean? Are you saying that child theme is not working for you. I just check in and it’s working fine. You don’t need to user FTP. You can simply upload that zip file from “Appearance => Themes => Add New => Upload Theme => Browse”.

      If you are any other issues, then please post in our free registered support forum at https://catchthemes.com/support-forum/ where we can provide detail support.

      Regards,
      Sakin

  11. Hey!

    I’m using the Catch-Box theme & I downloaded the child theme from here.
    I installed the child theme & I can choose it, but there is a problem.

    I have changed some things on my homepage – design-wise. New header, different background picture & so on.
    But I just did it from “Customize” function, so I haven’t changed any core code.

    But when I use the Child theme, it shows template “orange” version of the page, without my header, background image etc.

    What am I doing wrong?

    Thanks in advance!

    1. Hello shahid,

      I have added child theme for Clean Business Free and Pro theme above. Please download it from the link above in the content.

      Regards,
      Sakin

    1. Did you check in recommended image sizes for Simple Catch Theme at https://catchthemes.com/theme-instructions/simple-catch/#featured-image. If you upload image larger then this then it will automatically crop into the exact size mention there. But if you upload image smaller then the recommended size then it will just display in the original size. So, make sure you upload image with exact this size or greater for consistency.

      Note: The older image before activating theme will not be changed automatically. In this case, you need to regenerate thumbnail using “Regenerate Thumbnail” plugin.

Leave a Reply

Your email address will not be published. Required fields are marked *