How to : Create basic WordPress child theme

Hello there!

Today, I am here to share a basic thing of WordPress theme. We all know about the WordPress theme. Its a great way to design your WordPress powered website. But there is always some little things you need to change like colors, fonts style/size or move a button somewhere else. You can change this with a little hack of theme file directly. But the problem is that, by changing the theme file directly you prevent yourself from update the theme to newer version in future. If you update the newer version, then your customization will lost.

So how you can overcome this situation, when you are not completely satisfied with the theme’s default design? Here child theme comes handy. Child theme is a way to do customization of the theme without changing themes file directly. Today I will show you how to create a WordPress child theme and why you should use child theme.

Child theme is completely new theme depends on a parent theme for most of their functionality and design. If you activate a child theme, WordPress will check your child theme first if a specific function exist there. If its not found in a child theme then WordPress will use its parent theme. Child theme should always be used if you planned to change even a single character of a theme. By using child theme you will get two great benefits, Updates and Organize.

Updates

If you modify your theme without using child theme, you only have two option for future. You can stop updating your theme in future or you update every-time and lose your modification.

Not updating your theme should be out of question, because all the “How my website hacked” questions has a common answer is, you are using outdated WordPress core, theme or plugins. To avoid any unexpected situation like this, you need to always update your WordPress core, theme and plugins.

So now you may think, “Well I will update my theme and will re-modify my changes as its a little modification.” Now the question is, “Why you waste your time on every update, even its a two minute job?” Also if you made a lot of modification then what to do?

Organize

If you customize an existing theme, you are adding code to a theme’s codebase which might be thousands and thousands of lines. So you will have a hard time to track those code in future, which leads your future customization a time consuming and complex job.

Using child theme, you are doing your code in a separate place with couple of files and may be 100 of lines, which is more organize.

Creating a Child Theme

Creating a child theme is so simple. Follow this 3 steps to make a basic child theme,

1. Create a folder in your WordPress theme directory
2. Create a style.css file with child theme information
3. Pull your parent theme’s style

After complete this 3 steps, if you activate your child theme it will looks exactly your parent theme with no difference but using your child theme. Well let me describe this 3 steps elaborately so that you can make child theme on your own. I am using “Twenty Fifteen” default theme.

1. Go to your theme directory and create a folder for your child theme. You can name it whatever you like, but its nice to give “-child” after parent theme’s folder name. So for me its “twentyfifteen-child”
2. Create a stylesheet file and this must be named style.css Use the following code into it.

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://yourwebsite.com/twentyfifteen-child/
Description: My first child theme, based on Twenty Fifteen
Author: Tapan Kumer Das
Author URI: http://21coder.com
Template: twentyfifteen
Version: 1.0.0
Tags: black, green, white, light
Text Domain: twenty-fifteen-child
*/

Here two thing you need to care about, “Theme Name” and “Template”. Theme Name tells WordPress what is your theme name and shows this name to your theme selector section. Template tells WordPress which is your parent theme.

3. Basically with the above steps your theme should work just fine. If you activated your child theme it will show all your content without any style as our style.css file has no style. This is where you need to pull parent theme’s style with enqueue it. Create a functions.php file in your child theme’s folder and use the following code

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}


Above code will enqueue your parent theme style in your child theme. Now by activate your child theme it will look as same as parent theme. If you need any custom css style, go to style.css file in child theme folder and make your changes.

This is a very basic way of creating a child theme, I hope this will give you a kick start.

Happy coding 🙂