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!
Briana Pierce says
Great overview! I have been using Headway for a couple years now, and there are definite pros and cons to it. Did a search on reviews of Headway vs. Catalyst; you have convinced me that I need to give it a try now. 🙂 Thanks!
mobremski says
Here’s a recent site I made using Catalyst: http://www.inspiredleaf.com
Kate says
Thanks so much for this. I own Headway and love/hate it.I keep looking at Cataylst. I am an intermediate coder but learn fast.
I am interested in your view of the speed of loading ( I have read reviews where Headways wins by a long shot), and also the responsiveness issue. Headway shows me lots of glitches like when site reaches a breaking point the first two blocks or objects in a blick stack up and objects 3 and 4 simply vanish.
Also, what about clients who want to take over the site and do everything for that point on…which framework do you recommend for that?
mobremski says
Kate,
In my experience, Catalyst loads faster and is more responsive. Catalyst has a built in tool that let’s you decide if you’re going to have fluid footers and headers as well as content. It also has a built in @media display area where you can write your own @media css directed at specific devices. You also don’t have to know too much code as Catalyst does have an editor that does it for you, it’s just not a wysisyg editor like Headway so there’s a lot of bouncing back and forth.
As far as letting clients in: I usually don’t want them messing around with the design anyway, so not having use of the drop and drag of headway is fine. I recently did a website for http://www.inspiredleaf.com where the client does a lot of work internally changing featured items, adding and deleting product and adding event calendar items and Catalyst worked wonderfully for that. Catalyst also works very well with every plug in I’ve ever thrown in there.
I have recently moved very much away from Headway due to them having far too many glitches which makes me nervous for the longevity of the website.
-Mike
scott says
I was looking at headway, but after trying Catalyst I am really hesitant on frameworks. There seems to be such a steep learning curve. When I was using Catalyst, trying to write css in that little live editor was a pain and there was so much javascript the developer told me I couldnt work with the dashboard open AND the site window so I could just refresh and see my changes. Maybe they have done some upgrades lately? I got it when it first came out and just fought with it trying to figure out all those options.
mobremski says
@scott – I always have the dashboard and the site window open at the same time, in fact, sometimes I have two windows open with the dashboard so I can work in 2 different areas without bouncing around in the back-end. Whatever your developer told you about javascript sounds like malarkey to me, but I don’t know the specifics.
Also, Headway’s “live css” editor is just as small as the one for catalyst. My preference has turned from Headway to Catalyst, mostly because of the fluid layout you can get with Catalyst. I’ve also found that more plugins work properly with Catalyst versus Headway. That being said, Headway is about to release an update that will apparently allow for fluid headers and footers, maybe it will be more plug-in friendly too..
Tom Brown says
Have latest Genesis 2.0 and Headway 3.6 installed. Headway blew my mind. It’s officially the best WordPress theme. And yes, I’ve researched for over a week, on the best frameworks. Headway 3.6 is like Dreamweaver x100. I created the exact type of site I wanted in 5 minutes after installing it. Deleting Genesis/Ultimatum from my Themes now… 🙂