Creating a New WordPress Child Theme (Part 1)
As mentioned on the documentation of WordPress : "A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme."
In other words, we can create a new theme (child theme) of our own by using the files of other themes (e.g. Twenty Ten), but without modifying the files. Now Let’s use Twenty Ten theme as the parent theme to create a new child theme.
Create a Directory for WordPress New Child Theme
First of all, create a new directory with the new child theme name (alexten):
Prepare a Stylesheet for the WordPress New Child Theme
The next step is to create a stylesheet file. The only REQUIRED file in a child theme is style.css. The style.css file is required and so important because it provides the header information by which WordPress recognizes the child theme, and it replaces the style.css of the parent theme.
Here’s the header information of style.css:
Theme Name: Alex Ten
Theme URI: http://wordpress.org/
Description: This is a Child theme create with TwentyTen theme.
Author: Alex
Version: 1.0
Template: twentyten
*/
Note:
For a child theme, the "Template:" line is required in order that WordPress knows the parent theme (e.g. twentyten) of that child theme (e.g. alexten).
Following the header, use the @import rule brings in the parent’s stylesheet.
/*
Theme Name: Alex Ten
Theme URI: http://wordpress.org/
Description: This is a Child theme create with TwentyTen theme.
Author: Alex
Version: 1.0
Template: twentyten
*/
@import url(“../twentyten/style.css”);
Note:
Don’t use other CSS rules above the @import rule, otherwise the parent stylesheet will not be imported.
Create a Theme Thumbnail for the WordPress New Child Theme
This is good to prepare a theme thumbnail to identify the new WordPress child theme. Create the thumbnail with any paint software.
Upload the theme thumbnail to the new child theme directory as shown in the diagram below:
Log in WordPress Admin Panel and navigate to:
The new child theme should appear under the Available Themes menu:
Now, the new child theme is basically created. Of course it has the same theme as the parent theme at this moment. The next steps are to customize the new child theme to your own that looks different from the parent theme.