Headway vs. Catalyst – Two WordPress Theme Frameworks Reviewed

If you’re a WordPress developer, it’s likely you’ve used one or the other of these WordPress theme frameworks, Catalyst or Headway. You may have even used both frameworks. Or, maybe you’ve heard of them and are wondering what they’re all about. I use both frameworks almost exclusively in my designs and I wanted to write about the differences and similarities, and perhaps help you decide if they’re right for you, and which one would be best for your project.

I’ll start by saying that I use each of them differently. If a client gives me a Photoshop design, or already has a design pre-made, I typically use Catalyst. If a client wants me to make the design, I will use Headway. Here’s why.

I’ll start with Headway. Headway is a drop and drag, design oriented framework. On one side of the theme you have the “grid” area and on the other side you have the “design” area. Each area has it’s own set of parameters to work with.

In the grid you drag and drop your blocks, for example, your header, navigation, content, widget and footer areas. You decide the width and height of each block and then tell Headway what each block is going to be. There’s also an area for custom code, so if you’re a coder you can add your own code whether it’s html, javascript, jquery or even php. The grid area also gives you the option to give each individual page it’s own layout, or you can mirror the other pages. In the main configuration panel you’re given the choice of whether or not you would like to have a responsive layout. I’ve never personally been impressed with their idea of “responsive” since my navigation bars and pictures still seem to look pretty bad on mobile devices, but I always check the box for what it’s worth. As of the writing of this article, there is no “set” way to have fluid headers or footers, but you can manage it with some CSS trickery if you know how.

Then in the design you add the colors, borders, shadows etc… to each block. Each block area is listed on the left and when you click on each one your given options for font, padding, margins, borders, box shadows, rounded corners, etc. You can see all your changes right there in the editor through their wysiwyg viewer. Keep in mind however, that some of these options are no good for most versions of I.E. so you’ll have to use some CSS to get that to work if you can (like opacity… grrrr). And speaking of CSS there is a one-click option for a “Live-CSS” box where you can write all your own CSS to your hearts content. Granted, for the most part you don’t really have to, most of what you want to do can be done in the design area, but sometimes a margin nudge or a specific color adjustment or a hyper-targeted font-size is needed so you may need to use it. I’ve never built a site that I didn’t use the “Live-CSS” box on.

Headway has a lot of 3rd party blocks that you can purchase from their site that are pretty good. I’ve used the “Slider-plus”, “Gallery-Plus”, “Utility-Block” and the “Features Block”. The only one I’ve ever had problems with was the “Gallery-Plus” block due to some really weird picture issues that I won’t get into here, but it’s a 3rd party plug-in so you have to try to get help from Pizzaz (the plug-ins creator) and I had a hard time getting them to respond. Once you load in each plug-in it shows up in both the grid and design areas for you to manipulate and change.

So you see that with Headway, if a client needs me to make the design, Headway is easiest to use because I can see the design unfold through the wysiwyg editor and it’s all very easy.

Now on to Catalyst. Catalyst is little bit harder to use if you’re not very good with html or css. Catalyst comes stock with a child theme called “Dynamic”, so you know they were expecting you to have to write some code. Catalyst is a hook based theme framework, so if you don’t understand the hook system of WordPress, you’ll also get lost pretty easily there.

Catalyst has 3 areas to work in: ‘Core Options”, “Dynamic”, and “Advanced Options”. I will preface all 3 areas by saying there is no wysiwyg area, but you can make live changes in CSS, but I’ll get to that in a minute.

Core options is what you would expect. Taking a look at each area of the site (Header, Nav-Bars, Content, Footer, etc.) and giving them some specific rules and layouts. You’re given a default layout to start with, and you can create more in the advanced area with different sidebar position options. You can then go to each page in WordPress and choose which layout you want on that specific page, or leave it on the default layout.

The Dynamic options are where you’ll set all your styles for your body, wrapper, content, header, footer, etc. There’s no wysiwyg viewer here like in Headway, so you’ll have to jump back and forth from the live page to the back-end to see your changes. However, on the live page, in the upper right corner is a button for “Live CSS’ which will open a box right then and there where you can write CSS and see the changes happen in real time. I like this option because you can open firebug to find your specific selector and then style it in the CSS editor. The Dynamic area is also where you can set the widths of your layouts, for example if you have a 2 sidebar layout, you can set the width of your sidebars and your content box to equal 960px and your sidebars can have different widths. Again, each page can have different layouts so there is a ton of flexibility here.

The advanced options are where the real fun begins in Catalyst. This where you can create your own widget areas and hook areas. You have the option to put them pretty much anywhere you want on the page. This is why I like to use Catalyst when I have a pre-made design. You can create the hook or widget, place it where you want and then add the code to make it look exactly like the design. Yes, you could do this in Headway, but not as specifically as Catalyst. In Headway you’ll spend more time using CSS to get the area to look right, where in Catalyst (given the right HTML code) it all just lines up.

The bottom line when deciding to use Catalyst or Headway is to think about your project ahead of time and take into consideration how good you are at writing code. Both frameworks will take some knowledge of HTML and CSS and you’ll get a lot further in Catalyst the more code you know.

Let me know if you have any questions or comments. I’m sure I could have gone into a lot more depth on both frameworks, but this is just a review and not a tutorial. If you do need help with either framework, please feel free to contact me. I’m always happy to meet other designers / developers and help where I can!