What is a WordPress Child theme & how to customize WordPress Theme using WordPress Child theme?

We all know that a WordPress theme is a collection of template files which lets us change the user interface, design, look & feel of the site.

 

Have you created WordPress theme or have installed any free theme or commercial one, many of you have done this job and have also customized but the problem is created when you have customized the original theme files and the update of that theme is available and you never would like to update as your customization will get destroyed if you update that, but my recommendation is that you should always keep your plugins and themes updated to the latest version. So you should take care during the customization and never do the customization in original file and should create a child theme. But what does that mean, and how do you do it?

 

In WordPress 3. 0 or latest versions a new concept was added by WordPress core team and community named as “Child Theme”.

 

As per the WordPress Codex definition of Child Theme:

 

“A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. 

Child theme allows you to modify, or add to the functionality of that parent theme. A child theme is the safest and easiest way to modify an existing theme, whether you want to make a few tiny changes or extensive changes. Instead of modifying the theme files directly, you can create a child theme and override within. “

 

How to work with WordPress Child Theme?

 

Let’s take an example; I’ll create a child theme for WordPress default ‘Twenty Twelve’ theme.

1) So in this case, to create a child theme, I have to create a new directory alongside the ‘Twenty Twelve’ theme’s directory called twentytwelve-child.
“twentytwelve-child” directory should be in parallel of original theme twentytwelve.

2) Create a style.css file under the ‘twentytwelve-child’ theme directory.

Put the below text in style.css file

[css autolinks=”false” classname=”myclass” collapse=”false” firstline=”1″ gutter=”true” htmlscript=”false” light=”false” padlinenumbers=”false” smarttabs=”true” tabsize=”4″ toolbar=”true” title=”example-filename.php”]
/*
Theme Name: Twenty Twelve Child
Theme URI: http://wp. tutsplus.com/
Description: Child theme for Twenty Twelve
Author: Japh
Author URI: http://wp. tutsplus.com/author/japh
Template: twentytwelve
Version: 1. 0. 0
*/

// This @import line loads the stylesheet of parent theme
@import url(‘. . /twentytwelve/style.css’);

//Theme customization starts here
[/css]

There are two important parts here to notice:

Template: twentytwelve
It tells WordPress that this theme is a child theme of the ‘Twenty Twelve’ theme

@import url(“. . /twentytwelve/style.css”);
It loads the parent theme’s (twentytwelve in this case) style.css as a starting point

3) Now you can log into your WordPress dashboard and see your ‘Twenty Twelve Child’ theme there, and activate it.

4) Make further alterations & addition and you will found that these will automatically reflected on your website.

 

Just Done!!

 

Now always keep in mind that whenever you want to make a customization to your theme, does it in your child theme.

Files in your child theme override files of the same name in the parent theme. So any file from your parent theme you want to change, copy to your child theme & make your modifications there.

The same goes for any templates that may not be in your parent theme. You can add them in your child theme, and WordPress will use them.

One exception to these rules is the functions.php file. In this case, the functions.php file for the child theme is loaded first, followed by the functions.php file of the parent theme. So there’s no need to copy the functions.php file from the parent into the child, just start fresh in the child theme for that one.

This allows the child theme to have all the functionality from the parent theme. Parent themes can also make their function pluggable, which allows a child theme to override them.

 

Why should you use WordPress Child Themes?

 

1. Safe Updates

A child theme automatically inherits the parent theme’s features, styles, and templates. This allows you to make changes to your site using child themes without ever modifying the parent theme. When a new version of the parent theme available, you can safely update it as you know that all your modifications are saved in the child theme.

 

2. Easy to Extend
A child theme built on a powerful theme framework allows a great deal of flexibility without writing a lot of code. You can selectively modify only the template files and functions that you need without going through other template files. You can add new functionality and much more.

 

3. Fall-back Safe
When you are creating a complete theme you need to think about all the possible scenarios and code for them. However, when you are working on a child theme and you forget to code for something, then there is always the parent theme’s functionality available as the fallback option.

 

WordPress catchable Tools for Child Theme

 

One-Click Child Theme plugin built and tested for the latest WordPress 3.x version.It adds a menu link into your Admin “Themes” section to automatically build a child using your currently active theme.This is fantastic if you don’t want to mess with FTP and are looking to play around with some new ideas.You can also use Child Themify plugin for creating the child themes.

 

If you plan to edit these files within the admin panel you’ll also enjoy clearer syntax highlighting for that you can install the Advanced Code Editor for some much-improved functionality. This makes wading through PHP code blocks and HTML/CSS a whole lot more manageable.

 

Additional Resources & references

 

1. http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

2. http://www.hongkiat.com/blog/wordpress-child-themes-dev/

 

Hope this all helps.