How to create Child Theme

Updated: July 20, 2013, 9:48 pm

In this article you can read how to create Child Theme from themes with our AIT Framework, starting from Creator theme to our newest themes. (find list of all our themes here)

What are the most important parts in child theme?

  • 1. ait-cache folder
  • 2. Templates folder
  • 3. style.css file

Let’s explain whole process on example with Directory theme.

Step 1.

In your themes folder (./wp-content/themes ) create folder with for your child theme, for example folder with name DirectoryChild

./wp-content/themes/DirectoryChild

Step 2.

From your parent theme folder ( ./wp-content/themes/directory ) copy folder ait-cache, or create this folder yourself in folder with your child theme:

./wp-content/themes/DirectoryChild/ait-cache

Be sure that this folder have write permissions (777) same as folder in parent theme. This folder is empty.

Step 3.

From your parent theme folder ( ./wp-content/themes/directory ) copy folder Templates with all files and subfolders inside into your child theme folder:

./wp-content/themes/DirectoryChild/Templates

Step 4.

Create file style.css inside your child theme folder or copy from your parent theme folder ( ./wp-content/themes/directory ) file style.less.css and rename this file to style.css

./wp-content/themes/DirectoryChild/style.css

Open this style.css file from child theme to edit, and leave in this file only commented header, all styles below commented header you can delete.

In this header make changes:

  • write your child theme name into parameter Theme Name:
  • add Template: parameter which contains the name of parent theme folder
  • include style.css file from parent theme

Example with changed “Theme Name” parameter and added “Templates” parameter with imported style.css file from parent theme:

/*
Theme Name: DirectoryChild
Theme URI: http://preview.ait-themes.com/directory/wp1
Author: AitThemes
Author URI: http://www.ait-themes.com
Description: Follow us on Themeforest or Twitter
Version: xx
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
Template: directory
*/
@import url("../directory/style.css");

url of imported style.css file is in format: url(“../parentThemeFolderName/style.css”)

Step 5.

Your child theme DirectoryChild is ready and you can activate this theme in admin.
You can make your own changes inside php files in Templates folder and add own custom css changes in style.css file.

Do you want your own image as thumbnail for child theme? Just add image with name screenshot.png into child theme folder (example path: ./wp-content/themes/DirectoryChild/screenshot.png)