Codeable info

A Quick Look At The Headway 3 WordPress Framework

Posted on by in Blog

Last month I previewed the long awaited release of Headway 3.0; the drag and drop framework that lets you design your websites visually.

Version 3.0 looks to simplify the website creation process. Whilst the previous version had some great features, in practice many simple tasks were overly complicated and time consuming. I also found the loading times of 2.0 to be very poor.

This week I’ve been testing it out to see if the latest release of the framework lives up to its expectations. Before I proceed, let’s look at the new features that Headway 3 has:
* Their words, not mine :)

  • Headway 3 has been completely rewritten from scratch. It features an entirely new codebase that’s fast.
  • You can now do more than ever without ever having to write a single line of code: even things like drop shadows and rounded corners in your designs.
  • Headway now has child themes, some of which are ports of well-known themes from major theme developers such as Press75, Allure and Organic Themes. Many others come from Headway directly and we’ll have new ones constantly. Any theme developer can create child themes for Headway, and even sell them in the Headway Marketplace.
  • You can design your website just by drawing rectangles live on the page. We call them Blocks. Just click and drag, tell Headway what kind of Block you want (header, navigation, content and more) and hey presto: you’re creating a custom layout without coding.
  • You can easily set fonts, colors, backgrounds, and other design elements in Headway’s Visual Editor. See your changes live right on the screen with no guesswork. Simply save your changes to bring them live to your website.

  • They’ve added in rel=author for author links, a new SEO feature based on Google’s announcement they were going to factor in that xfn information into their rankings more heavily.
  • For developers, the Live CSS editor now features syntax color-coding and there is a Blocks API so developers can create their own custom block types and even sell them in the Headway marketplace.

Setting Up Headway 3.0

The options area isn’t very different to it was in Headway 2.0. You can add a favicon in this section and set whether the headway admin link opens up the getting started, visual editor or options pages.

Headway 3.0

In the SEO area you can get the title structure and meta description. Advanced options include settings for page indexing, archiving, snippets and whether links are do follow.

Header and footer scripts can be added in the options area. Your feed URL can be added too and you can exclude certain categories from your feed if you want.

Headway 3.0

There is a ‘Getting Started’ page available. It simply links to the support forums, the codex and the visual editor.

Getting Started With Headway 3.0

The New Visual Editor – The First 5 Minutes

In version 2, the visual editor showed a small admin bar at the top of the page with all the editor functions at the left hand side. Your live site was displayed to the right, taking up around 60%-70% of the page.

Headway 3.0 is very different. The visual editor has been completely revamped though the layout is a little similar. The top admin bar and left column area remains. There is now a global control panel area at the bottom of the page too. This changes depending on what you are working on.

For example, on the home page the bottom area allows you to change the global width settings of the grid and the wrapper. The area can be minimised when it is not being used, giving you more space to work on your design.

Headway 3

Using any framework for the first time can be a little daunting. Thankfully Headway gives you brief introduction to the main areas of the visual editor. I’m sure many will be tempted to skip this part but I recommend reading each part so that you have a basic understanding of how to navigate the visual editor.


Headway 3 Tips

Grid Mode

Headway 3 Tips

Manage Mode

Headway 3 Tips

Design Mode

Headway 3 Tips

Layout Selector

Headway 3 Tips

Panel Options

Headway 3 Tips

Visual Editor Search

Headway 3 Tips

Getting To Grips With The The New Visual Editor

Headway 3.0 still uses the block system that was so popular in previous versions. At the top left hand side of every block is the block ID. At the top right hand side is an X button to delete the button and a button to show the control panel for the block in the bottom area. The bottom options area saves the last blocks you have edited, which is useful if you are switching between the settings of the same blocks frequently.

Headway Visual Editor

To the right of the block ID icon is an option to change the block type. There are 8 block types to choose from: header, navigation, breadcrumbs, content, widget area, footer, media and custom code.

Headway Visual Editor

Through the layout manager you can move things and resize blocks just like before. Any layout that you design can be saved as a template so that it can be applied to other areas of your site easily.

The layout has been greatly improved. Before you had to create a design and then copy it to other areas of your site. With version 3 there are 4 main areas: index, single, archive and a 404 page. It uses a parent system so if you edit single, the layout of your posts, pages and media will also be changed i.e. modifying the parent layout will affect all layouts below it unless they are changed too.

Headway Visual Editor

All settings for blocks are controlled through the control panel at the bottom of the page. It’s very straight forward and allows you to adjust most settings you can think of.

Headway Control Panel

In the previous versions of Headway you changed the design settings in the left column. This area has been moved to the control panel at the bottom of the page.

Headway Designer

I’m not sure if the control panel is the best area for the design section. It works well for changing basic settings but it feels a little ‘squashed’ for changing all of your design elements. There is a good chance I am just too familiar with how Headway 2.0 worked.

Headway Designer


It takes a while to get used to any framework and get the most out of it. I built a few websites with the previous version of Headway so I was able to get around the new visual editor after 30 minutes of testing it. As I haven’t built any websites with Headway 3.0, I can’t commit to saying whether Headway 3.0 is a huge improvement over the previous version. In my opinion, you have to build a website with a framework and spend a few days working with it in order to notice that little subtle differences.

My first impressions of the new script are generally good though. The layout manager seems much better; in particular the way that parent layouts are used for children unless the children layouts are edited. I’m also sure that I will get used to the design manager being at the bottom in the control panel after using it more. It does seem to work a little quicker too.

When I originally wrote this review I believed that Headway 3.0 was still in the beta stage of development. Whilst there is currently no way to upgrade from previous versions as yet, a future release will have this functionality. We should see more features added to the framework over the next months.


Links: Headway 3.0 Framework | Headway 3.0 Preview Videos

Codeable info

Comments (3)

Comment by AJ Morris says:

Headway 3.0 is on a very aggressive release cycle. We’ve already updated to 3.0.2 and plan on continuing to release frequent updates to continue with features, enhancements, and bug fixes. We’re finishing up a release for later this week. Social Media Integration and Social Optimization will be coming shortly.

Comment by Kevin Muldoon says:

My bad AJ. When I downloaded this script originally I believe it was still in beta (that’s what I believed anyways). :)

I still use Headway 2.0 on a few websites but I want to get to grips with the new script before upgrading.

Do you plan on adding more in built features such as social media integration etc?

Comment by AJ Morris says:

Kevin – Great review. Thanks. I was with you until one point. You mentioned that “Headway 3.0 is still in the beta stage of development.” in your last paragraph. Headway 3.0 is NOT in beta, it is released. Yes, it’s true you can’t upgrade from 2.0 (That’s coming), but if you are building a new site that is not coming from Headway 2.0, or you want to do a complete redesign from your Headway 2.0 site, there is no reason why you can’t install Headway 3.0 on a live site.

Codeable info