Headway 3.0 forgoes including a custom.css and custom_functions.php file in favor of using the WordPress child themes API. This means that those looking for more advanced customization will be required to create or modify a child theme built for Headway. It’s simpler than it looks!
What is a Child Theme?
A child theme is a WordPress template that lets you add functionality and style to a parent theme (e.g. Headway). Basically it means we can make changes to Headway (design and custom functions) that can be carried over to other websites easily.
Note: Headway’s visual editor settings do not get saved into the child theme’s files, so you cannot currently use the VE to generate child themes.
Why Would You Use a Headway Child Theme?
Despite the word on the street, child themes are extremely easy to make, and are useful to every Headway user. A child theme gives you an editable CSS file to work with, and is currently the only way to use Headway’s hooks system.
Using child themes, you can avoid the visual editor’s design mode completely if you wish, and even access areas for design & code that you can’t get to in the VE. For instance, automatically adding adsense into post and page content.
How to Create a Child Theme for Headway 3.0
Child theme creation is actually incredibly simple. Watch the video to find out how to create one in about 5 minutes:
Folder Structure of a Child Theme
All WordPress themes are contained within folders, their contents unzipped and uploaded upon installation. The folder structure for a basic but fully-functional child theme will look like this:
- images (folder)
How to Create the Style.css File
The most important prat of the child theme is the style.css file. This is really the only file that needs content in it upon installation, because it defines the theme so WordPress will identify it. The contents of a demo child theme’s CSS file will look like this:
/* THEME NAME: Headway Child Theme Template TEMPLATE:headway THEME URI: http://headway101.com/child-themes/ VERSION: 1.0 AUTHOR:Corey Freeman AUTHOR URI: http://coreyfreeman.me DESCRIPTION:This is a child theme template for usage with the Headway Premium WordPress Theme. You can rename the folder and edit the style.css file to create a unique child theme with its own meta information. */
Using a text editor, copy & paste the above code into a text editor and then save it as style.css.
How to Package and Install Your Child Theme
Once you have your files made, use your computer’s native zip functionality to create the childtheme.zip folder (an example name, you can pick anything you want). Make sure NOT to put the files into a folder before compressing them. Just select style.css, functions.php, and any other theme files and compress them.
To see how to create a zip file in Windows 7, click here. For Mac users, click here.
Working with Your New Child Theme
You can install your child theme just like you would a regular theme, through the WordPress admin dashboard. Navigate to the “appearance” menu in the sidebar of the dashboard and choose “add new” on that page. Upload the childtheme.zip file into the theme installer.
If you don’t have a text editor that links directly to your website (like Coda) then the easiest way to modify child theme files is to go to the WordPress dashboard. Click “Appearance” and go to “editor.”
What questions do you have about building a child theme for Headway Themes? Share your thoughts, opinions, questions, and suggestions in the comments below.