Child Theme Authoring: Setup Theme Files
Creating a Child Theme from scratch is fairly simple. This section will take you through creating the bare-bones structure for your child theme that you can then fill with all your custom code.
You will need:
- HTML or Plain-Text editor such as Sublime Text (free)
- Image editor capable of creating and editing .png files
Create the Folder
- Create a folder with a lower-case name. Use hyphens to separate multiple words. In this example, we call our child theme “layers-child”:
- Create a new .css document and save it inside this folder as style.css
- Create a new .php document and save it inside this folder as functions.php
- Create a new .png image that is 880 pixels wide and 660 pixels tall to setup your theme thumbnail and save it inside this folder as screenshot.png
You now have a very basic skeleton for your theme with the following structure:
Structuring Your Theme
Your child theme only requires one file to work, style.css . However, you will probably end up including additional templates, scripts, stylesheets or images, which requires the functions.php . The file structure of these additional files should follow the Layers theme structure. Our recommended structure is as follows:
│ ├ theme.js
In cases where you plan to add additional files such as images, scripts or template overrides, the structure of your child should match the parent as closely as possible. For a detailed overview of the recommended structure, see Structuring Your Theme.
Of course, if you are starting from scratch, your files don’t contain any code and do nothing useful yet. Let’s fix that by setting up the style.css :
The style.css must declare the parent template folder name in its header to correctly inherit the parent theme’s functionality and structure. All of your child theme styling belongs in this file.
Below is an example of what this stylesheet header looks like:
Theme Name: Layers Child
Description: Layers Child Theme Test: http://www.oboxthemes.com
Author: Obox Themes
License: GPL 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
**Color reference, for consistency**
link color: #3D454C
border color: #CCC
light blue: #009DF3
**Table of contents**
/*- MAIN CSS ----------------*/
/*- 1 HEADER -------*/
Theme Name: should match the child theme’s folder name and can be capitalized. This value is used to display your theme’s name in WordPress.
Description: to provide a little supporting detail
Author: set here as us – change it to you!
Template: layerswp – the folder name of our parent theme, Layers – this must be exact!
Version: Start with 1.0.0 – for more advice on versioning, see Software Versioning, Change Significance on Wikipedia
Finally we have our License and License URI. As a child theme of Layers, this must remain GPL2 with the same URL as shown in our example above.
The color reference is optional, but helps keep your main color selections consistent, especially if you like designing in the browser.
Table of Contents: This keeps your CSS sections organized and easy to scan. It is also a requirement if you intend to submit your theme to ThemeForest. Each item in the table of contents corresponds to a commented heading, for example:
/*- 1 HEADER -------*/
Avoid using @import to load additional css file(s) from a different location (there is no good reason to do that.) Put all CSS in this file.
Setup the functions.php
The functions.php is where the majority of your custom functions and hooks will reside.By default, it looks sad and empty. Not all programs create PHP files correctly, so make sure it begins with the correct PHP tag, like this:
// Custom Functions Go Below
That’s all you need for now – we will return to this file later to add several functions.
Install & Activate
You’re ready to activate your theme! You can either zip the child theme folder and install via the WordPress admin, or drop the folder into wp-content\themes directory on your WordPress install directly or over FTP. When complete, continue with the next section, Styling & Fonts
Note: WordPress considers a child theme to be an entirely separate theme from the parent with regard to theme options and widgets (including Layers page setups). If you had widgets and customizer options setup for Layers, you can reactivate Layers, Backup the Layouts or Widgets and re-import them after reactivating your child theme.