Child theme is another individual theme on its own theme folder.

But child theme inherits all the styling and functions that exist in the parent theme assign to it.

 

Pros:

  1. Can tweak the theme without changing the codes at original(parent) theme.
  2. Can update the original(parent) theme without losing the tweaks that you have made.

Cons:

  1. Need depth understanding about original(parent) theme code styling, sturctures, and functions.
  2. Need to upload the parent theme as well to get the child theme works.

 

How To Make A Child Theme

 

Child Theme CSS

Child Theme CSS

 

 

First you need to create a folder to hold the child theme files.  You can name it as what you like but make sure you don’t have the same name folder exist in your theme directory.

For example, we want to make a child theme for WPThemestudio theme.  So I create new folder named wpts-childtheme.

I make the folder’s name to be all small letters so it is server friendly.

Next, we need to create the minimum basic file.  The style.css file.  Make a new text file in the folder.  And rename it to style.css. Make sure your computer is set to “Show extension for known files” or else you cannot change the text file to css file.

Open the style.css file with your favourite html editor or the plain notepad will do the job.  My favourite html editor is Dreamweaver.

Paste the particular below at your style.css file.

/*

Theme Name: WPThemestudio - Child Theme

Theme URI: http://wpthemestudio.com/wordpress-theme/wpthemestudio/

Description: Custom wordpress theme for YOURWEBSITE.COM

Version: 0.1

Author: Pangeran Wiguan

Author URI: http://pangeran.org/

Tags: editable, css, child theme, valid xhtml, plugin theme,

Template: wpthemestudio

*/

The most important parts is, Template: wpthemestudio.  You must put the parent theme folder name there.

After that, if you still want to use the styling of the parent theme, you must add the code below to your style.css.

@import url("../wpthemestudio/style.css");

If you put the above code, and there are styling in the original css file you want to change, you can override it by copying the css value in the child theme css file and change what you like to change.

We are done!

That’s the basic of making a working child theme.