How to create Child Theme
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.
In your themes folder (./wp-content/themes ) create folder with for your child theme, for example folder with name DirectoryChild
From your parent theme folder ( ./wp-content/themes/directory ) copy folder ait-cache, or create this folder yourself in folder with your child theme:
Be sure that this folder have write permissions (777) same as folder in parent theme. This folder is empty.
From your parent theme folder ( ./wp-content/themes/directory ) copy folder Templates with all files and subfolders inside into your child theme folder:
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
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 URI: http://www.ait-themes.com
Description: Follow us on Twitter
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
url of imported style.css file is in format: url(“../parentThemeFolderName/style.css”)
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)