• Blog
  • Themes
  • WordPress Theme Builder Shootout:...

WordPress Theme Builder Shootout: Headway

WordPress Theme Builder Shootout: Headway

Contender number three in our WordPress Theme Builder Shootout is Headway.

The developers claim “drag and drop” but there’s little “drop” to speak of. The “drag” though provides a “drawing” experience that combined with a slick interface is very much worth speaking of.

But is the incredible flexibility of this product let down by a lack of out-of-the-box functionality?

HeadwayThemes

Headway from HeadwayThemes is the “original Drag and Drop theme builder for WordPress”. There’s actually very little “drop” about Headway but the “drag” is the basis for an incredibly flexible theme building experience.

Note: This review is based on version 3.6 of Headway which is a beta version.

What Does It Cost?

Headway comes in two flavours:

  1. Base, for any site you or your business owns, $87 per year (to maintain support)
  2. Developer, for use on unlimited sites, $174 per year (to maintain support).

More details on pricing here.

What Do You Get?

All Headway’s functionality is provided by installing and activating the theme.

How Does It Work?

Building a theme in Headway is a simple case of creating layouts for each of the major views: front page, archive, single and 404. All views will then inherit the parent layout unless a specific layout is designed, so category and author listings will use the archive layout if they don’t have their own.

Layouts are designed in the Visual Designer and are selected for editing through a drop-down control. Layouts can also be created for individual categories, authors, pages and posts.

Screenshot of the Headway Visual Designer
The Visual Designer feels like a wire-framing app

Layouts consist of one or more wrappers than can either be fixed or fluid (generally fluid) and have a width specified in grid columns. Each wrapper acts as a container for one or more blocks (very similar to a WordPress widget).

The blocks are “drawn” within a wrapper by clicking and dragging, an experience that is very similar to prototyping tools. Once drawn, you then assign the functionality to the block, be it slider, navigation, etc. The drawn height is not important as the blocks resize themselves.

Screenshot of the block configuration panel
Configuring a block’s properties is straight-forward

Headway uses inheritance, so if you clone a layout then it’s possible to “inherit” the placement and settings of the blocks from the original layout. This allows wrappers such as headers and footers to be created once and then inherited by all subsequent layouts.

Headway also has the notion of templates but to be perfectly honest I did not find a need to use them for the test site and I found the description in the documentation a little confusing.

Although custom classes can be assigned to a wrapper and a block in the Visual Designer, the real design work is performed in the Design interface, which allows the styling of global elements as well as individual blocks and their elements via a tree-list selector or simply by clicking on the element.

Screenshot of the Design interface
Click on any element to style it – well almost.

What Features Does It Come With?

  • A Base template that provides initial styling
  • A fully-featured Visual Designer that allows for “drawing” of layouts
  • A Design interface for styling layouts and blocks
  • SEO enhancements to page and post editing screens
  • The following blocks:
    • Header – specifically for displaying logo, title, subtitle
    • Navigation – adding menus
    • Breadcrumbs – standard breadcrumb navigation
    • Content – shows the content or a configurable list of posts
    • Widget Area – creates a “widgetized” area that can be assigned widgets in the WordPress admin interface
    • Footer – specifically for displaying footer items
    • Slider – very basic image-based slideshow
    • Embed – allows embedding of any oEmbed service such as YouTube and Vimeo
    • Custom Code – allows the insertion of HTML, PHP and WordPress shortcodes
    • Text – rich-text version of the WordPress Text widget
    • Image – displays an image
    • Listings – displays a list of categories, authors, pages and comments
    • Social – displays a configurable list of social icons

How Did Building The Test Site Go?

I was pretty impressed with how much of the test site I was able to build in a relatively short amount of time.

The initial layout, the front page, took some time but once that was completed then the other layouts came along thick and fast, due to Headway’s use of “inheritance” when cloning a layout and because I was able to use WordPress’ “default behavior” for most of the content blocks.

I did have to resort to widgets and shortcodes for the search form and the tag clouds which is slightly surprising as this is fairly standard functionality. In fact, I can see widgets playing quite a part in extending the Headway’s functionality which is okay but the preference would obviously be for functionality that is integrated into the theme.

Headway does create the widget areas for you in the WordPress admin interface, though, and if you name your blocks then that’s what is displayed which at least makes targeting a widgetized area fairly simple.

Laying out the listings in columns was not a problem and Headway generally handled custom post types fairly well. I had a small initial hiccup with the custom post types until I realized that I hadn’t switched on permalinks and I needed to use default behavior, otherwise it was an intuitive and productive experience.

Not surprisingly, complete replication was not possible, with the primary stumbling blocks being:

  • Slider too basic – wanted a content slider and Headway only provides an image slider. There is a 3rd party option which seems to be very comprehensive (allows for my pet feature of including custom content types) but this test is an out-of-the-box test
  • No form handling – one of the site’s pages is a form and Headway provides no form handling at all. In fact, there’s no generic form handler in the paid blocks either (the Contact Block does provide a contact form for $25).
  • Custom taxonomies – couldn’t display them on a post / custom post type listing
  • Customizing the archive headings – looks like I need to attach a custom function to a filter if I don’t want to clone for each category

And then there are the oddities:

  • Breadcrumbs – didn’t seem work properly. Whether this was due to how I set up the permalinks, I’m not sure, but for custom post listings, the title of the first post was displayed and for category listings, the title of the first post appeared before the category name.  The breadcrumb navigation also badly disrupted the custom post type listings page. Perhaps a 3.6 beta issue?
  • Elipses on excerpts – even when the content block was set to use excerpts and the posts had excerpts, the ‘…’ was still added to the end of the excerpt.
Screenshot of the breadcrumb navigation issue
Breadcrumbs are a little erratic – permalink setup or beta?

I had limited time with the Design interface but is also very easy to work with.

The only slight drawback I found was that it sometimes didn’t go granular enough. For example, with the text block next to the slider, I wanted to style the “Subscribe Today” hyperlink but through the design interface I could only style all hyperlinks in that text block, which would include the “More…” link as well.

My only other minor annoyance with both interfaces was that on some controls I had to click on the text of a drop-down rather than the arrow to see the options. Pedantic, I know, but why move away from such an established behaviour?

Screenshot of front page of test site
Quick to build and virtually ready as a rough draft for a client

Ultiamtely, though, at the end of my allotted time I had a working site that after very little customized CSS would be more than acceptable to show a client as a semi-rough draft.

Ratings

Learning curve / ease of use

Getting to grips with Headway is a curious experience. Its a little like trying to run a race with someone holding onto the back of your shirt and then suddenly they let go.

At first, it seems quite daunting especially with the comprehensive user interface. Install the theme and you are immediately presented with the option to dive into the Visual Editor. Do that, and you find yourself staring at a blank canvas that looks nothing like WordPress, a little unsure of what to do next.

Once you start, though, the approach starts dropping into place and you quickly find yourself creating layouts, especially if you use Headway’s inheritance and work with WordPress’ default behavior. The  Visual Editor and Design interfaces are excellent, the “drawing” of a layout is intuitive and the resizing and moving of blocks is virtually flawless.  At times I forgot that I was working in a browser.

I would have liked more feedback, especially when completing the configuration of a block. With no “save” button, other than the global button in the top menu, I was initially not sure if my new settings would stick or not.

You will find yourself constantly going back into the WordPress admin interface to manage menus and widgets, so you’ll likely need three browser windows: WordPress admin, Headway and the “live” site. This is especially the case for widgets with the range of included blocks being relatively small.

The documentation is okay but seeing “this article was last updated for Headway version 3.4” when the current version is 3.5 is a little disconcerting. It may well be that nothing’s changed since 3.4 (certainly I saw some pages that were updated for 3.5.5) but relying on the user making that assumption is not preferable.

Features

Whilst the Visual Designer and Design interfaces are very impressive, the list of available blocks (widgets) is disappointingly small and often under-powered (the Slider springs to mind) and you’d almost certainly need to look into the available paid extensions.

Even the paid list is fairly small, so if you’d want to make that list of required features for your site and make sure that the blocks were available. Of course, you can extend by using shortcodes, and this works well, but there’s always going to be a preference for features integrated into the theme builder rather than running the risk of installing additional plugins.

Headway also adds quite an array of SEO features to pages and posts. The value will depend on whether you have already invested time and effort in one of the many existing SEO plugins. If you haven’t then this will bring immediate improvement to your site.

Flexibility

Flexibility is certainly Headway’s major strength. There are no constraints on the layout and the grid-based approach, as opposed to rows and columns, combined with automatic height adjustment means that any layout is a possibility.

Being child theme compatible is a major bonus and, in fact, you’d almost certainly want to develop on a child theme. Given the potential speed of development, developing child themes targeted at particular platforms (and using a theme switcher) is a distinct possibility.

Out-of-the-box

Headway will let you design the layout for almost any site you can imagine. And with the layout process still using a base template, the results are pretty good even without any additional styling.

The constraints come, however, with the functionality of your site. The included blocks are limited both in number and sometimes in scope. There’s no form handling or real control of laying out a post (particularly a custom post) and I quite often found myself hunting WordPress.org repository for plugins to provide shortcodes.

Value for money

Given that Headway is targeted at web professionals, then $174 per year for the Developer licence seems pretty good value as it will undoubtedly make a considerable difference to the time to build out a solution.

What you will need to do, though, is carefully consider which of the paid blocks you’ll also need and then add this to the total cost. Whilst the paid blocks are not expensive, typically around $25, I wasn’t certain as to whether this was a one-off cost or a recurring fee or for a single site or unlimited sites.

The Good

  • Drawing layouts is intuitive
  • Cloning layouts and inheriting blocks makes development rapid
  • Slick and easy-to-use interface
  • Support for child themes
  • Base template provides decent initial styling
  • Plenty of options for laying out listings

The Bad

  • Only a small number of blocks (widgets) included
  • Slider is only a basic image slider
  • No form handling
  • Breadcrumbs block has issues
  • Most interesting blocks are additional cost

HeadwayThemes

  • Learning curve / ease of use:
  • Features:
  • Flexibility:
  • Out-of-the-box:
  • Value for money:
  • Overall:

Final Thoughts

From the comments on the introductory post to this series, I knew that Headway had strong support and I can see why.

The interface is good enough that it’s easy to forget that you are using a web-based application and once you get going the “drawing” approach is very easy to get the hang of. Clearly, Headway has been through a number of iterations and the result is a mature product that does its job extremely well.

My only gripe is the lack of functionality out-of-the-box and the fact that some of the blocks provide very basic implementations: the slider, for example, doesn’t cut it. Yes, there are additional blocks for sale (and they do look full-featured) and I have no problems with an after-sales marketplace but standard functionality should really be included with the base product.

That doesn’t take away, though, from the fact Headway truly does provide theme building without coding for a price that would easily be recovered in a single project.

The idea of these reviews is to start a conversation, so if you’ve used Headway please add a comment about your experiences.