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
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
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
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
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
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.
@Epheistos: Detail menu color options are there only in Pro version. If you want to change for Free version then you can ask in our free support forum at http://catchthemes.com/support-forum/
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.
@Epheistos: I don’t see it. Even I check in Spam section. Can you try posting it again. For Catch Box theme, tou need to login first and then post it in Catch Box Forum at http://catchthemes.com/support-forum/forum/catch-box-public/
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
@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
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.
We have updated it and not it uses wp_enqueue_style() instead of @import for parent theme style.css
@Consciousness: import is not bad for child theme. You can do that. It’s fine.
Yes, for advance developer you can use wp_enqueue_style and remove import in your child theme style.css. I have already replied you in http://catchthemes.com/support-forum/topic/how-do-i-change-default-image-sizes-in-blog-listings/
This is great! Thank you.
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?
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.
thanks for tuto =)
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!
Yes, it will work in child theme as well. So, you need to copy that
fullframe_primary_menu()to your child themefunctions.phpfile and then make the modification as per your need.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
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
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?
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
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.
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
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!
Hello Taavi,
For technical support, you need to post your question in our support forum at https://catchthemes.com/support-forum/ with your site URL and then we can check in.
Regards,
Sakin
Hello, do create child theme for this theme , thanks
https://catchthemes.com/demo/clean-business/
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
Hi Sakin,
I am using a simple catch theme. However, the featured images in the home page are either smaller or bigger . Request your support on this. The site is: https://www.wastenvironment.com
Thanks…
Best
Admin
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.
Wonderful blog. Easy and clear explanation that any newbie could get it. Keep it up.