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:
- style.css
- screenshot.jpg
- images (folder)
- index.html
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.”
Any Questions?
What questions do you have about building a child theme for Headway Themes? Share your thoughts, opinions, questions, and suggestions in the comments below.
Download My Example Child Theme
You can download the empty (base) child theme here: Headway 101 Empty Child Theme (123)
I am a newbie of using headway themes. I created a child theme but is it possible to add or combine with the functionality of another themes? If so how can this be done? Looking forward for your reply. Thanks
I’m not sure what you mean, but to add functionality via a child theme, you’re basically looking at PHP code, whether you copy it from a tutorial or try to strip it from a different theme.
As Headway is an independent theme, though, you can’t use its child themes with other themes to create a “mash-up,” if that’s what you mean.
Thanks for the reply. I am actually trying to merge two themes. I am trying to get a certain function and add it up in headway child themes. From what I understand I guess that’s not possible in child themes. But is it ok with Headway Base?
What you’re trying to do would require a child theme, because you can’t alter the core files of Headway. There’s not a straightforward way to merge two themes together, no. You would need to understand -how- that function was coded in the theme you want to copy from, and manually incorporate it into a child theme.
You can probably find plugins that mimic the functions you want, though.
I’ve already done quite a lot of work on my Headway site and only now realised that I need a child theme if I want to manually edit it. If I add a blank child then I lose some, but not all, of the work I’ve already done. Am I missing a step? Is there a way to simply plug-in the child theme to my existing design so I can modify the CSS?
When you say “manually edit it,” do you mean the CSS? You can use the live CSS editor in the VE if you don’t want to install a child theme.
Child themes might mess up the widgets/menus when installed, but they should be found in the “Inactive Widgets” tab or even in other sidebars if that happens. I would only worry if you’re using a ton of custom widgets from plugins n’ stuff.
Thanks Corey.
The VE wasn’t showing any blocks but they were there when previewed in a browser. Nevermind, my fault for not starting with a child theme. All sorted now. I did the site again.
Rather amazing how quickly you can throw together something quite complex with Headway. Thanks again.
Hi Corey,
Thanks for all the useful information. I have a question regarding headway child theme. I want to have my own custom post type templates so i am trying to build a child theme. But i dont want to lose any CSS that i have put in the Live CSS editor or the native headway CSS.. which CSS file(s) do i need to import to my new stylesheet for child theme?
Thanks,
Lucky
Also in my custom template for custom post type, i want to include the header, footer and sidebar..how do i do this?
Thanks again.
Sorry disregard my first comment… somehow i lost all headway native styles when i built a blank stylesheet for the child theme..but after going to the VE and saving the blocks, i have the native styles back..Also i noticed that i can build the template for my custom post type from within the VE (which is very cool) but i still need to change the ‘content’.. or i can say that i need a custom loop for this new template and i want to add div with different classes for different parts of the content so that i can style the differently..how can i do this?
Thanks
I just saw that there is a block-type for ‘custom code’…lol
And my custom query works like a charm 
But i still have one confusion and i dont know what i am doing wrong..
I have a custom post type called ‘portfolios’ and under this post type i have created some posts (as usual)
Now when i go inside the VE and edit ‘single > portfolios’ and create a ‘custom-code’ block and write my custom query in it..
This custom query has shows when i open my ‘posts’ under ‘potrfolio’ but not when i open ‘portfolio’…to explain better..
the query should show its effect when i open this page:
http://localhost/kellyann/portfolios/
But it shows when i open:
http://localhost/kellyann/portfolios/my-second-portfolio/
or
http://localhost/kellyann/portfolios/my-first-portfolio/
What am i doing wrong…
http://localhost/kellyann/portfolios/ gives a 404 error…
Thanks.. i am learning by just posting on your blog
From what i understand.. headway is creating a single-portfolios.php but how do i create a archive-portfolios.php ?
am i in the right direction?
Hi Corey,
OK…so I still dont understand what a child theme is and why it would be useful. So, a child theme is an add on that allows php coding to change stuff instead of using the VE? is that its purpose? if one, me for instance, doesnt know code, why would I want to go thru the effort of doing a child theme or knowing anything bout it? the LiveCSS area seems to do whatever I would want…and certainy involves more code than i wnated to know…I’m curious to try to understand.
Child themes give you a way to design your website and add code without the VE, yes. You don’t have to use one if you don’t want to. But you can buy child themes if you’re not a designer and want to just use headway for layouts, SEO, etc. Then you have a pre-made design that you can just install on your website and be done with, which may even incorporate extra features. That’s pretty much what 60% of users want from one.
Others want a “starting off” point where they make changes to the child theme, whether through elements that haven’t been designed through code or by changing the code itself. Just like using a “normal” pre-made WordPress theme, but with Headway’s features.
If you don’t want to get involved with code and don’t want a pre-made design, then don’t make or download child themes. It’s not a requirement, it’s just a resource for those that might want to.
Aha! got it…not useful for me who dont want code and also dont want pre-made designs…awesome. thanks Corey!