Making Headway with Headway WP Theme

After seeing  April Tara’s blog I was pretty sure I wanted to try Headway. Her blog has some of my favourite things which I was using with the Thesis theme. I spent a couple of hours looking at themes. Before choosing Thesis I spent years looking at free themes and patching together what I wanted for my own blog. So, I expect a lot from a premium (paid) theme.

I picked Headway’s WordPress theme as the one I would switch from Thesis for. I am not knocking Thesis, I still find it a great theme, the GPL debate was mostly a good time for me to try a new theme that also looked good. Matt Mullenweg bought Headway for me after his post about paying for a new theme for anyone using Thesis interested in trying a new theme.

I did have a rough start using Headway. I was frustrated. I’m not that frustrated now that I have made some progress. There are still some issues which I would like to change or fix. But, overall, Headway is working for me.

Headway:Visual Editor:

Visual Editor: Leafs:

The first thing you need to know is how to find the drag and drop to manhandle your layout. It is part of the Visual Editor. If you look at Leafs you will see you can enable Arrange and Resize. Be aware it is kind of backwards: if it says “enable” it means it is not going to work until you click the button. If it says “enable” it is actually disabled. When it says “disable” it is enabled. In a future Headway update they might add the “D” to make this clearer.

Leafs is mainly a way to move around your template with your mouse. You can set the dimensions of your columns but be careful, they still have to fit in the wrapper in order to appear side by side. Also, check your site in different sized monitors as it will need to shrink and contract to fit various screens. Keep things fluid so they can suit each screen size without you needing to having to stress out about it too much.

Other than the drag and drop feature Leafs are mainly widgets you can add to the site. They can replace some of the WordPress plugins you may already be using. I haven’t done much with Leafs so far. I did add the About one but may yet change my mind about it as I already have a whole About page which is linked in my header navigation bar.

Visual Editor: Templates:

You can ignore the Templates tab unless you buy another template or skin for Headway. You don’t have to. I think this tab on the Visual Editor should be moved to the bottom of the list. It is an optional thing versus the tabs for Design Editor, Site Configuration, Leafs and Navigation which you will each need.

Visual Editor: Design Editor:

Design Editor is where I spent most of my time. I think it has too many options. It would help to have something that lets you set the font and colours for the whole site/ blog instead of going through each and every littlest option for comments, footers, headers, widgets, etc. A main switch would be nice. Some people may like to have a rainbow of colours and use every font at least once, I prefer to stick to a couple of colours and a couple of fonts.

In the Design Editor go down the list on the Element Selector. This is the best way to make sure you don’t miss something. Once you choose an element you will see a button appear: Call this element out. This is very nice, it highlights which element you will be working on. It’s a guide through your functions so you know which part of your blog theme you are changing before you begin making selections. Almost everything you need is in the Design Editor, just keep working your way through. It is handy to open a Notepad file and paste in your code for the HTML colours you are using. Much easier to paste them in as you go if you remember which one is the main colour for headers and subheaders and which one is background or subtitles.

Visual Editor: Site Configuration:

Site Configuration is where you can make big changes to your header, footer, wrapper and body, basically push around your site width at the top, middle and bottom. After you do you may need to go back to Leafs and fiddle around to get your columns in place again. This is where having fluid elements comes in handy.

WordPress Admin: Headway:

Now, you could do this at the end or you could have started here but last on my list is configuring Headway back in your WordPress Admin. You will leave the Visual Editor and step back into the WordPress screen again.

Headway: General Options:

In General Options you can add Header and Footer stuff. I put in some extra meta tags. (You add your main meta tags for keywords and description to Search Engine Optimization below). I also added stuff to the footer but I have more work to do on that, it looks a mess right now as I want to make a horizontal bar for widgets to be in 3 columns there. So far I have not gotten it to work. General Option is pretty simple, just add your Favicon and feed as directed.

Headway: Posts/ Comments:

If you want short posts in a double row as I have in this blog you tick Enable Small Excerpts in Posts/ Comments. At the bottom of Posts/ Comments you can also change the “Read More” words you use in the excerted posts.

Headway: Search Engine Optimization:

We now come to Search Engine Optimization. Skip down past the navigation title section. (I only changed Posts Page Title so it doesn’t show “Blog | Word Grrls” at the top of my blog). The important section is for your basic meta tags: description and keywords. Write a good description but don’t make it a book and don’t let it be spammy. Describe your site as you would to someone who asked you what your site is about. Make it clear and keep it simple. Don’t go into overkill on keywords. Try to find search terms someone might use to actually find your site. You can use phrases, not just single words.

Thats about it. Once you have gotten this far you have covered the basics of working with the Headway theme. I still have a list of things I am working on. One nice thing I discovered in Headway is that you can use the new WordPress 3 Menu feature which is not yet configured with the Thesis theme. The Menu (which is on WordPress, not part of the Headway theme itself) will let you set up the header menu bar with links to your pages, categories or outside (custom) links you want to add.

I am coming to like Headway. But, it does need to build more community support in order to get the extra tutorials, plugins, features, widgets and such which you can find when you use the Thesis theme. Headway needs to grow and I see every chance that it will. I wouldn’t say Headway is a full package yet. If you read my list of things I am working on (below) you may notice a couple of things Headway could add in another upgrade. I’m glad to see a strong community around Headway because this is how things like new features and extras come about.

Other resources:

Headway Beginner

Headway Tips

Headway Demo

Headway Hub

Headway Support – For premium members who have bought the theme.

Headway WP – Headway, as mentioned on Twitter.

Just for fun and human interest, these are the things I have worked on, have fixed or am still working on with this blog and the Headway theme. Some of them are not Headway related but still relevant to the outer workings, the things you can see when you land here. Right now the footer thing is the biggest project. I have tried the Headway Hub plan but it did not work for me. Looking at WordPress options, but no luck on getting this working yet.

  • Footer- need 3 columns for widgets, gadgets, etc. – Would like one long horizontal sidebar or 3 widget columns, whichever is workable.
  • Fluid main content div to fit the page rather than be fixed or float and throw off the alignment. (This seems to be ok, so far).
  • Add header graphic, under the header text and link. (Not able to do this with Headway it seems).
  • About page is missing and navbar seems to be uncoordinated. (Turned out to be user error which I fixed).
  • Background, something new. (Still high on my to-do list).
  • Sidebars, look untidy still. (Done, changed my font, personal taste).
  • Set up e-cards – WordPress thing. (This has been on my to-do list awhile. I keep putting off getting into figuring it all out).
  • Headway saves and then returns to previous settings. Why? (Still a mystery but… it only did it the first day I was working with it).
  • Set standard for all pages. (I am still missing sidebars when you click into a post etc).
  • Lifestream feed and RSS. (Done).
  • Big, gaping space appears at bottom of content, above footer. (This was an odd thing. My div columns were re-setting themselves, one kept becoming very long. Seems to be ok now.)
  • If possible… have a ticker type thing announcing posts which I would like to highlight or feature, running right under the header and navbar. (Have not started this project but expect I can find some kind of WP plugin that will work for my idea).

12 thoughts on “Making Headway with Headway WP Theme

  1. Hey Laura!

    Great review, thanks for contributing to this community! A few notes on your questions at the bottom of your post and in your review:

    – You can actually do a Mass Font Change in the Visual Editor – the option is under the Tools Menu!
    – To get the widgetized footer you’re looking for, this tutorial is very clear & simple to follow – http://headwaytips.com/creating-a-widgetized-footer/
    – Fluid main content (wrapper) is probably not going to happen anytime soon; a completely fluid layout is something of a Holy Grail of web design; it’s very very difficult to create, and it would be hard to program so that users weren’t banging their heads against walls! The fluid footer and header options do make a site appear to be MOSTLY fluid, though, which does help.
    – You can add a header graphic behind the Site Name and Tagline, you just need a little custom CSS to do it. The details can be found in the forum actually, we just had someone recently ask this question.
    – You can set up standard sidebars by either Linking pages or linking individual sidebars.

    Some of your other issues sound like user error that you worked through – awesome!

  2. Thanks for the feedback. That is the tutorial I used for the footer. It didn’t work for me. At the stage when I was ready to add widgets there was just nothing there. I had to add the code via FTP cause my WordPress screen did not have a save button. Could be a WP3 glitch. Anyway, I had the code up but no one was home. I have been looking for another way to fix this up.

    I am glad to know about the forum post for the header. One more thing to cross off the list. 🙂

  3. If you hear of a way to do the footer using a plugin that would be wonderful. It would be independent from updates to both WP and Headway if it was a plugin versus a modification to the template.

  4. You don’t need code to do a widgetized footer. If you are adding code to your WordPress install and Headway via the FTP, this may be your issue. In fact if you are modifying the core code of Headway, this may also be the issue.

  5. Hi Laura,

    Nice review and comparison. I also came from Thesis, though I wasn’t a coder so the swap was better for me.

    Not sure why the code from Headway Tips isn’t working – when you copied all the code, I assume you went to the WP dashboard widget area and placed whatever widgets you wanted into the Footer box?

    Although the new version of Headway (currently in beta) is going to answer a LOT of your questions |:)

  6. I’d never give myself the credit of being a coder. I know some from what I have had to learn. I did read one book about HTML all the way through, that’s about it.

    I don’t know what didn’t work for the footer. But, there wasn’t a footer box at all when I tried to add widgets. The only thing I had were my two sidebars (the same two I already had created for the main blog). Quite likely I missed something in the process. I will give it another try tonight. Your guide is good. Thanks for the feedback here.

    I’ve been hearing about the new Headway update. I am looking forward to working with it.

  7. This is an old review but I’d like to point out that headway hacks (my site) was and is updated more continuously than any other headway tutorials blog and my host is no longer made of bullsh*t and actually loads my site and fixes website errors. >.>

Leave a comment