three4one design

design is the face of your business

Tutorial: Getting started with Headway for WordPress

I was helping a new user of Headway and he asked for three things to do to get started with it. Upon answering that question, I thought it would be worth sharing with all those new to Headway.

Sometimes I guess we who’ve been around technology start to look for the hard way to do things. I know when I switched to Macs I fell for that often.

Headway’s the same. It’s almost too easy. Also, all frameworks require a new way of thinking.

To get started, and assuming you’ve installed and activated it and refreshed your web page, you’ll see a standard layout which looks like many other framework’s stock look.

There should be a Visual Editor button towards the top right (provided you are logged into your WordPress blog). Clicking on it will take you directly into the Visual Editor (VE).

You can also access the VE via the Headway menu in your WordPress admin area.

Within the VE the layout is displayed on the right, and on the left, a a series of dropdown palettes of options and configurations (that’s probably a tautology!).

At this point I can provide 3 things to get started with Headway. I assume you have named your blog via the WP admin. Firstly, ignore Templates and Navigation. Which then leaves you the three palettes to get started with (click to open them).

1) Site Configuration

You can set your background image for your site, your header, the width of your site, the type (fluid or fixed), the position of your navigation bar and more.

2) Design Editor

This lets you style various elements on your page. It doesn’t cover everything (but you can use the built-in Live CSS Editor to get at the rest), but covers the important stuff, like colors, backgrounds, borders, fonts, font attributes etc.

Simply select the element you want to style from the dropdown and modify its stylings. Colours have a useful colour picker.

3) Leafs

Add your own leafs! This is where it gets fun. Under the Leafs palette you can enable resizing and repositioning of leafs, but also add your own. There are some really useful time saving leafs too, like the Image Rotator and the Photo Gallery.

Also, remember to save often! The save button is in the lower right of the VE. You reload the VE as required as well.

These three steps will have you well immersed in Headway and you will start to see how cool and easy it is. That said, it is also powerful and flexible for the hardcore developers. There are some amazing Headway sites out there that don’t look anything like they’ve been done in Headway.

I was underwhelmed by Headway too initially, and ready to ask for a refund after the first day. And I think that was because I had to adjust my thinking, just like I had to when I switched to the Mac. InHeadway, we don’t have to do things the hard way anymore but we do have to think like Headway. :)

Also, do use the Headway forums because there are lots of helpful people there.

Related posts:

  1. Tutorial: Conditional Leafs in WordPress Headway (part 2)
  2. Tutorial: Coding a complex design using the WordPress Headway framework
  3. Review and tutorial: Callout Plugin for WordPress and Headway
  4. Tutorial: Easy Conditional CSS in WordPress Headway theme
  5. Tutorial: Fixed positioning in Headway for WordPress
  • Bob

    So where in the world are the templates and skins and the how-tos to install them?

    The problem I have with Headway is the “documentation” and the “tutorials” are written by programmers, not end users and so for us real people . . . they are of no value

  • Chris

    There isn’t a formal site for downloading skins and leafs – yet. I do know it is coming.

    In the mean time, a forum space has been setup where developers can post skins and leafs in the member’s section (login required).

    Generally I target my tutorials at advanced users. This one, although targetted at novices, still leaves a lot for them to fiddle and experiment with.

    I suspect the Headway guys have taken a similar path, i.e. their documentation is not detailed enough for many novices.

    This year, of course, will have been crazy busy for Clay, who programs this alone, and is looking after 16,000 lines of code. Not only has he had to continue adding user requested features and debugging those and maintaining and debugging existing code, he’s also had to get ready for WordPress 3.0.

    At some point in Headway’s life – maybe sooner – they will have to engage someone to write comprehensive documentation that both the experienced and novices can understand.

    In the mean time, work the forums to death! Make us moderators work. :)

    Personally, I don’t consider WordPress user-friendly at the best of times. Clay is trying to rectify the design side of that, and I know WordPress are trying hard to make the content management much more user friendly. But it’s all a work in progress.

    BTW Here’s a link to the skins and style documentation. If you need more help, come see us in the forums.

  • http://checklistkids.com Paula

    HI Chris,
    Curious about what skill level Bob (comment above) is at. I guess there’s no telling unless he’s contacted you another way as he leaves no forwarding link to contact him or see what he’s working on…I’d be interested to see if he’s made any *headway*. Due to his comment I’m sitting on the fence now about whether to go ahead because I certainly fit the descritpion of Novice, but willing to learn!

  • Chris

    Hi Paula

    My experience of Headway is it is a major work that still has some kinks to iron out. However, even at this stage of its life, I still find it miles ahead of anything else out there I’ve seen or used, especially for ease of use.

    If you are willing to learn, accept that it’s not perfect and you may still need to learn work arounds for some things until they are rectified (altho I think the update due any day will iron out almost all the existing bigger bugs), then you’ll do fine with Headway.

    I’ve never found WordPress overly user friendly at the back-end. Clay is working hard to change that for design and development, and I know WP are working hard to change that for content creation.

    There are other platforms out there for creating websites (eg Free Webs, LightCMS, Tumblr), but they all come with their own limitations and quirks too.

    As I say, if you come at Headway with an open mind and willingness to learn, then I reckon you’ll do fine. Oh, and make sure to use the forums.

  • http://checklistkids.com Paula

    I appreciate your feedback — thank you! and with a 30-day return on Headway, what have I got to lose right?

  • Chris

    talking of what WP are doing to make it more friendly, I just discovered that in version 3, designers will be able to write a custom style sheet for the editor! That is seriously cool and seriously needed. It’s prob the single biggest problem I’ve had with teaching new users – that is, having the editor display one way and the page a different way.

    Here’s a link for anyone interested
    http://www.catswhocode.com/blog/8-useful-code-snippets-to-get-started-with-wordpress-3-0

  • Chris

    Paula,
    in the end, that was how i felt too.

    And after the first day with Headway I Wass ready to ask for that refund!

    But I was still in a different mindset of how to do things in WordPress.

    Once I started seeing and accepting how Headway did things,and finding how much time and effort it would saving me, i was enamoured.

    That said, don’t expect it to be easy. Learning anything new is never easy. Well, for an old dog like me, anyway. :)

    All the best with it and come see us in the forums.

  • Paula

    Hi Chris,
    Well I just now purchased and installed Headway! Very excited. My first little hurdle however is the following “Warning”:

    “The Headway Visual Editor is not optimized for Internet Explorer. Please upgrade to a better browser such as Mozilla Firefox or Google Chrome.
    Feeling risky? Continue on your on parole.”

    Would you reccommend this step?
    I tried to switch the other day to Firefox b/c I wasn’t getting onto some websites (like headwayhacks) but my IE would seem to override my new Firefox install so I uninstalled it.

    I thought I’d put this Q out to you on your blog in case anyone has the same problem, but I also can check with my local computer guy if providing an explanation here would be too involved or falls into your paid services to answer. (I always have to have my questions out to at least two resources to get hopefully accelerate getting my answer!)

    Once this little roadblock is cleared, I’m looking forward to follow your first steps outlined in your tutorial:
    Tutorial: Getting started with Headway for WordPress Written on April 11, 2010 by Chris

    Thanks in advance for your time.

  • Chris

    Hi Paula

    Not entirely sure what you mean by “my IE would seem to override my new Firefox install”

    But, if you simply mean IE was still the default browser, then that’s fine, just run FireFox and it’ll ask if you want to make it the default browser.

    Please also make use of the Headway member forums, that’s the best place to get your question answered. There are four moderators there plus Grant and Clay, not to mention many other helpful users.

    If you are in a major hurry for an answer, sometimes the Twitter list #headwaywp can help.

    And always remember with Headway, you are learning something new – even if you are familiar with WordPress, so always give it time and patience to get your head around it.

    Does all this help?

  • Paula

    Thanks Chris,
    Hint taken about taking Q’s to the forums! (In previous reading I had done on Headway reviews one neg mentioned was that forum questions were going unanswered, so I think I have that stuck in my mind.) However now that I think about it, that review was quite outdated (2009) so it sounds like it’s improved.

    To clarify about the IE thing — yes IE was still coming up as the default, even after setting firefox to be the default. Couldn’t figure that one out, but will keep trying.

    As always, thanks again (and next time I’ll see you in the forums!)

  • Mike

    Hi Chris,
    I’m new to WordPress and Headway and finding it a bit of a struggle because of the Headway documentation issues, especially the fcat that the narrative on the videos is way out of sync with the visuals. I’ve posted in the forum about this and hope there may be a way round it.

    I love the way your site Welcome page rotates those fantastic images – really makes it stand out. Guess it’s not a simple Headway function? I love to do something similar on my site but I guess I’m looking at functionality that is way beyond my capabilities?

    Regards

    Mike

  • Martin

    I too am struggling with Headway. I bought the theme because I believe its a good one and a good concept, but I find the Headway site videos hard to follow.

    The guy speaks really fast machine gun style which just makes it hard to follow (and Im a native english speaker by the way). Loads of jargon and geeky terms which arent explained properly, and he zips around the screen much too fast. SLOW DOWN PLEASE!

    I find the training videos a teeth-grinding exercise. I’m looking around for some unofficial training vdos for Headway from other sites because of this.

  • http://www.webhostings.in website hosting india

    Most of the people like this kind of information.All the points are explained very clear mind.

  • http://www.webhostings.in/ web hosting

    Excellent written skills.I get it clear idea about your topic.Above all the points are explained very clear mind.

  • http://www.adsyou.com/ ??? ????? ?? ??????

    I too am struggling with Headway. I bought the theme because I believe
    its a good one and a good concept, but I find the Headway site videos
    hard to follow.

blog comments powered by Disqus
© Copyright 2010, Chris Howard, three4one design
Site built using the Headway framework
Better Tag Cloud