Using a WordPress child theme for customization of your WordPress theme is one of the safest design routes possible. This is because the customization would be saved in a different package and will not disappear after you have updated the parent theme. Before we get into how you can create a Child WordPress theme, let’s look at what exactly a Child theme is. Basically, a child theme is a theme that inherits its functionality from another theme, called a parent theme. Child themes essentially allow you to easily modify pieces of an existing theme by overriding the code itself.
When you hear about theme frameworks, this is referring to the parent theme that contains all of the nuts and bolts to the theme. You may see hundreds of child themes all using the same framework, but each look completely different.
Learn more about child themes in WordPress’s child theme codex section.
Why Use Child Themes?
The great thing about a child theme is that you can change as little or as much of the theme as you would like with very little knowledge of WordPress theme coding at all. By creating a child theme, none of your code will be overwritten by updates to a parent theme of theme framework.
Child themes also allow you to quickly create new themes since all of the core code is already in place. For example, let’s say you wanted to edit the background colors and change the header layout a little bit. Instead of creating and editing all new code for the entire theme, all you would need to do is edit 1-2 files and place them in your child theme folder and you will have a brand new theme.
Easily Creating a Child Theme
The only file you need to create for a child theme is the style.css file, which references the parent theme folder name in the text.
Steps to Create a Child Theme:
1. Upload the parent theme to your themes directory
2. Create a new theme folder in your themes directory: wp-content/themes. Use a unique name different than your parent theme
3. Create a file called style.css, which would include typical style sheet structure for WordPress themes.
4. Use the line: Template: your-parent-theme-folder-name
5. Activate your theme and that is it!
Here is an example of a child theme using the Twenty Fourteen Theme:
We created a directory in our themes folder called “our_child_theme” and we added the style.css file containing this:
/*
Theme Name: My Child Theme
Theme URI:
Author:
Author URI:
Description:
Version: 1.0
License:
License URI:
Tags:
Text Domain:
Template: twentyfourteen
*/
@import url("../twentyfourteen/style.css");
/** Our Custom CSS here **/
Note the reference to the ” twentyfourteen” theme folder. This indicates our parent theme to use. We also imported the twentyfourteen css, but you can choose to start from scratch.
Child Theme Structure
Basically all files with the exception of the functions.php will overwrite the parent theme’s files. So placing the header.php file inside your child theme folder will replace your parent theme’s header.php file.
The functions.php file in your child theme is loaded in addition to your parent theme’s functions file, specifically before it. So be sure not to copy your parent themes functions folder to your child theme’s folder as you will get a bunch of errors for having functions of the same name. It is recommended to modify your parent theme’s functions by using action or hooks rather than editing the parent theme’s functions file instead.
Example of Modifying a Theme
So what I am going to do now is show you how I made a child theme and how the edits changed the look of the theme.
Normal Twenty Fourteen theme view:
1. First I created a child theme of the Twenty Fourteen Theme as described above.
2. Next I want to change the background color of the content area to a blue color so I edit the style.css of the child theme to this:
/*
Theme Name: My Child Theme
Theme URI:
Author:
Author URI:
Description:
Version: 1.0
License:
License URI:
Tags:
Text Domain:
Template: twentyfourteen
*/
@import url("../twentyfourteen/style.css");
/** Our Custom CSS here **/
.site-main {background:#006699;}
I also want to modify the footer of the theme to include some text before the theme credit, so I copied the footer.php file of the twentyfourteen to my child theme.
I then added the following text to it and uploaded it to the child theme directory. Here is the footer.php section edited:
<div class="site-info"> <span>This is my child theme....</span> <?php do_action( 'twentyfourteen_credits' ); ?>
Here is how my theme looks now. Notice the new text and different background color:
As you can see, creating a child theme is very easy and is a practical solution if you plan on consistently updating your parent theme files.
Thank you for checking out this article, and we would like to take a moment to introduce the new Flytonic Guide that we will be building and releasing over the coming days, weeks, and months. Please be sure to check back often as we add new and informative articles to our guide.
How To Customize A WordPress Theme Without The Creation Of The Child Theme
If the modifications you want to make to your theme do not need any editing of the parent themes code, the following are some other tactics that you can try out to make the changes.
Changing The Theme’s CSS
In case the modifications you will be making would only affect the CSS and you will not be making any changes to the PHP or HTML code of your theme, you can just use the custom CSS plugin. Many plugins allow you to add the CSS to the theme without having to create the WordPress Child Theme. Many of the top-notch WordPress themes have a customer CSS option that is in-built. In case the theme does not have the custom CSS option, then it would be great for you to give this plugin a try.
Add Custom Functions To The Theme
Utilizing the custom fiction will be a great option in case you just want to add a function or you want to add or remove a hook. You can check out any of our Flytonic Plugins for such purposes.
Custom JavaScript
Many of the high-quality WordPress themes currently offer the custom JavaScript field that allows users to add JavaScript on either the header or footer. If the theme does not have such a feature, you can try any other of the plugins we offer.
Conclusion
Making use of the WordPress child themes to change the parent them ought to be your first option whenever you want to customize your theme. This allows you to save yourself from undesired change reset mishaps.
