Headway Quick Start User Guide

The Headway WordPress Theme is a framework and a competitor to the well-known Thesis theme. Created by Clay and Grant Griffiths, Headway brings an amazing new approach to the premium theme market. This post will give you an insight into using the Headway theme, and highlight the most important things to know for getting started. Ready?

Overview – Why Headway is Different

It would be difficult to explain all of the things that Headway can do, so how about I show you? Check it out:

Okay, now let’s take a more in-depth look at the features and usage of Headway.

SEO Benefits

Headway has the same SEO optimization level as its popular competitor, Thesis. In addition to having built-in SEO, Headway allows you to configure your website without a plugin by going to Appearance–>Headway Configuration –> Search Engine Optimization and modifying the options. Included in this panel are:

  • Customize page title structure
  • Customize META content
  • Customize noindex and nofollow rules

What’s more, every post and page has a Search Engine Optimization panel at the bottom which allows for META descriptions, keywords, optimized titles, and nofollow or noindex options.

How to Install and Configure Headway

Installing Headway is as simple as uploading headway-15x.zip into your theme installer and hitting “activate.” Of course you can always upload via FTP if you run into problems with the automatic installer. Simply unzip your headway folder into wp-content/themes/ and you’re good to go!

Configuration

Off the bat, Headway is already configured so you can just dive in and go. However, there are some cool options you should set if you want to make the most of your new theme. Head over to Appearance–>Themes–>Headway Configuration to find the new Headway Configuration Dashboard. (Seen Below)

If you’re too nervous to install the theme yourself, you can visit the support forums and hire someone to install it for you, or get some help with any errors you may experience.

Jumping into the Visual Design Editor

The Visual Design Editor is the pride and joy of the Headway theme, and the element that sets it apart from other themes. Working with the editor itself is fairly simple. There are two ways to get to the editor. You can click “Enter Visual Editor” in the upper right-hand corner of your website, or you can head over to Appearance–>Headway Visual Editor to be redirected there.

The Visual Editor is basically your very own WordPress Theme Dreamweaver. You can make design changes to your blog live and see them come to life before your very eyes. You can change the background of just about every element you can click on, modify typography, move navigation and entire sidebars around…the fun never stops!

All of this is possible with the built-in color picker and, of course, the leafs…

Understanding Leafs

Aside from the visual editor itself, Headway also shines when it comes to leafs. Leafs are small snippets of code that act as the building blocks for your website. They are as follows:

  • Content – The content leaf pulls content from posts and pages. It is loaded into the visual editor by default and is how you modify page content from the back end.
  • Text/HTML/PHP - The text leaf allows you to work with PHP, Javascript, HTML, etc. to insert just about anything anywhere into your layout.
  • Photo Gallery – The Photo Gallery is a fully functional photo gallery plugin for wordpress. Configured from the back end, you can use it to display your image stream in an organized fashion.
  • Image Rotator – The image rotator rotates through a series of images one-by-one. You can even link these images to create rotating banner ads or house ads.
  • Widgetized Sidebar – The widgetized sidebar is a fully integrated widgetized sidebar for wordpress. Add widgets to it using the “widgets” tab under Appearance on the dashboard.
  • Twitter – The twitter leaf parses the latest tweets from any user. Just enter the username and you’re good to go.
  • Featured Posts – The featured posts leaf adds a content slider to your blog that displays any content you want. You can even include images.
  • Recent Posts/RSS – The recent posts leaf will take recents posts from your blog and display them or parse RSS feeds from other blogs for display.
  • About – The about leaf allows you to use a photo and a small blurb to create an “About the author” section of your website.

The newest update to Headway (1.6) will give developers the ability to create their own leafs as plugins. You can use leafs to literally drag-n-drop your website into existence. In addition, every page can have its own leafs and layout.

How to Use Headway to Build a Static Website

Many business and professionals today are looking for an easy way to build their websites with a smooth content management system like wordpress. Luckily, Headway can be used to easily create a professional static website. All you have to do is get rid of the blog posts page and you can begin building your website pages using leafs and the visual design editor.

To set a static homepage, just create a page named “home” and go to settings–>reading–>static home page. Set your new page “home” as the static page, and you’re good to go! Every time you create a new page, it will automatically be added to the navigation, so there’s no need to worry about navigation.

In addition to creating a static homepage, you can disable breadcrumbs and comments on pages to complete that “static” website feel. Afterwards, you can move onto customizing your new website…

Customizing Headway: Make Headway Work for You

How to Upload a Favicon

Headway makes adding a favicon simple. Just head over to Appearance–>Headway Configuration–>General Options andscroll down to Favicon Location. Enter the absolute url (http://www.yoursite.com/favicon.ico) of your favicon image. Be sure that the image is a .ico file.

How to Customize the Header

Customizing the header is as easy as heading over to Site Configuration–>Header in the visual design editor and messing around with the options. From this panel, you can:

  • Upload a Header Image
  • Show/Hide the Tagline
  • Show/Hide Site Navigation
  • Show/Hide Breadcrumbs
  • Set Fixed/Fluid Header
  • Move Navigation Left/Right

In addition to these settings, you can also vertically rearrange the header in case you want your navigation on top of your logo or your breadcrumbs under your logo, etc.

How to Upload a Logo or Header Image

Under “Site Configuration” is the header image uploader, which is really a logo uploader. This will automatically replace your blog title in the header with a logo image. All you have to do is click the “Upload Header Image” button. You can also link externally to an image.

How to Customize Sidebars in Headway

Headway allows you to create an unlimited amount of sidebars. Just head to the leafs panel in the visual editor and add a widgetized sidebar. Clicking the edit (pencil) icon will allow you to change the name of the sidebar as it appears in the widgets area, and create a “duplicate” sidebar in case you want to copy the contents of a different widgetized area.

In addition, you can disable the padding on any sidebar and flip it horizontally to create a widgetized footer area.

How to Add a Photo Gallery

If the image rotator isn’t your style, you can add a fully functional photo gallery into your pages. Adding a gallery takes a bit of work, so bear with me.

It’s extremely important that you make sure wp-content/uploads/headway/gallery exists and is chmodded to 777. Headway doesn’t always do this automatically, and you will get an error when you try to upload photos if it doesn’t exist.

Once that’s done, you’ll need to go to Appearance–>Headway Advanced Leafs and add a new gallery. Switch to that gallery and upload your photos.

When you have a gallery and some photos, go to a page and add the photo gallery leaf. From there, you can set the following options:

  • Width/Height of Thumbnails
  • Rows/Columns of Thumbnails
  • Thumnail Container Position
  • Enable/Disable Image Cropping
  • Enable/Disable Image Resizing
  • Set Number of Preloading Images
  • Enable/Disable titles and captions
  • Configure Slideshow Settings

In order for your gallery to function properly, the gallery leaf and thumbnails need to be an appropriate size. Otherwise your gallery may break.

How to Add Twitter to Your Sidebar

Headway comes with a twitter leaf that will automatically parse your tweets and display them. Just add the leaf and enter your twitter username into the options. You can also format the date and set the limit of tweets.

How to Customize the Footer

Headway has footer options built right into the design editor. Just head over to Site Configuration–>Footer and you’ll have the ability to change the following options:

  • Fixed or Fluid Footer
  • Show/Hide Administrative Dashboard Link
  • Show/Hide Edit Page or Post Link
  • Show/Hide Copyright Message
  • Show/Hide Attribution (Developers Only)

Unfortunately, you cannot change the footer text from within headway. however, you can do that using regular hooks and filters. Scroll down to the “advanced” section to learn how.

Creating a Widgetized Footer

The widgetized footer method that Headway employs is kind of a pain. Luckily, Paul Coughlin from Headway Tips has an awesome tutorial for creating an outstanding widgetized footer.

Understanding “Easy Hooks”

Headway has an awesome feature built in for non-developers called “easy hooks.” Just like regular wordpress or thesis hooks, “Easy Hooks” allows you to access certain areas of your website and insert code there.

For example, you can google ads underneath each post automatically with the “below post” easy hook. Just select it from the dropdown menu and insert it.

Becoming a Headway Power User

Headway isn’t just for non-coders. There are plenty of powerful options for serious developers to get their hands dirty. Let’s take a look!

Using Custom_Functions.PHP

The custom_functions.php file does exactly what you’d expect it to do – hold your custom functions. Here is where you can do cool things like create page-specific commands and widgetized footers. Your custom functions will rely on hooks – isolated areas for code insertion.

There are two kinds of hooks: filters and actions. They are essentially the same thing, but it’s important to know which is which when you’re adding code. Here’s an example of an actions:

function my_function() {
echo 'Add this to the page';
}
add_action('headway_some_action', 'my_function', 1);

Here’s an example of a filter:

function my_function() {
echo 'Add this to the page';
}
add_filter('headway_some_filter', 'my_function', 1);

See? Simple. Basically what this does is add whatever is between the echo statement (Add this to the page) and places it wherever you want it to appear (headway_some_action). If you’re using the same hook for different functions, the “1” will prioritize your function.

When to Use Custom PHP Functions

Let’s talk about a few examples. First, let’s say you want to put a 468×60 advertisement above every post, but only when you’re viewing single posts. That would look like this:

function my_banner() {
<a href="http://www.affiliatesite.com/?aff=mylink"><img src="http://www.afilliatesite.com/affiliates/banners/468.gif" alt="Affiliate Software - totally awesome" /></a>
}
add_action('headway_above_post_single', 'my_banner', 1);

Hit “save” and your banner will appear automatically atop each post. The Hook Codex offers a full list of all the available hooks and filters.

Using Custom.CSS

The visual editor is great, but it does have its limitations. Luckily, Headway comes with a custom CSS option which allows you to take full control of your blog. The file custom.css is loaded after everything, so your changes will always take effect.

The beauty of custom CSS with headway is that everything has its own class. Including pages, posts, categories, etc. You can also assign classes to specific leafs using the visual editor. Therefore, everything in Headway is customizable.

Here’s an example of custom.css code:

body.custom {background: blue;}
/* Give the blog its own background */
body.blog {background: url(custom/images/blog.png);}
/* Get rid of breadcrumbs on pages only */
body.page div#breadcrumbs {display: none;}

This code would turn the background of the website blue, except on the blog index, where it would be an image. It would also display breadcrumbs wherever they’re supposed to be displayed, except on static pages.

Because Headway has classes assigned to just about everything, things that would need PHP to modify are now as simple as one line of logical CSS code.

Headway in Action – Example Websites

Now you may be wondering what else can be done with Headway. Well essentially anything you can dream up, but for some inspiration we’ve compiled a list of great Headway customizations.

Wrap-Up: Are YOU Making Headway?

Headway is a fantastic theme that is offered at two price points $87 and $164. With the “Personal” option ($87) you will be able to use Headway on two of your own sites.

With the Developer version which retails for $164 allows you to install it on any number of sites you personally own or have developed allowing you to use Headway to it’s fullest potential.

This only leaves one question to be answered. Are you making Headway with your blog?

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by

Corey Freeman is a 17-year-old freelance designer and entrepreneur. Corey has been building and designing websites since she was 12, and currently runs the blog Headway Hacks - an unofficial guide for Headway theme users.

Comments

  • […] Below you will find a list of slick Headway customizations to get your creative juices flowing. If you aren’t familiar with Headway make sure to check out our Headway Theme Review and the Headway Quick Start Guide. […]

  • Hey Corey – fantastic article – and thanks for the mention – appreciated. Great job. Paul.

  • Danny Brown says:

    Agree with Paul, great overview and look forward to more from you (and Nick) in future. There’s definitely never been a better time to be a WordPress user, no matter what choice of theme you go for.

  • Ryan says:

    Well Done, Corey! Thanks for the great tips and please keep them coming…

    Cheers…wait, I probably shouldn’t end with cheers to a 17 yo…l8r…peace out…I don’t know…*shaking head*…geez, I feel old right now…

    Ryan

  • Jean Gogolin says:

    Hi Corey – great tutorial. Hard to believe you’re only 17! A dumb question. I’ve uploaded a header image from my hard drive (a JPEG I pulled off a free WP theme) and then saved it, just clicking “save” in the drop-down menu under “Headway” at the top left. Every time, it vanishes. What am I doing wrong?

  • armando says:

    Hi, Corey
    I just wanted say thank you for all the time you have put into developing these tutorials surrounding headway. I’m not new to WP but i am new to headway so I’ve found your tutorials very useful. However, being a design company that designs both blogs and corporate websites, I wish I could find more sites that don’t look so “bloggy” (look too much like a wp blog). We build 100% custom sites and currently using a .net cms (dotnetnuke) but are looking to expand into headway for its seo capabilities.

    So my questions is…have you created any tutorials or know of any that go over how to integrate more complex designs similar to the ones you see here : (www.vision2life.com/portfolio.aspx)?

    I believe that seeing only bloggy sites built with headway will deter professional designers from taking a deeper look thinking that you can’t build cms/like sites.

    I’d like to be a company that can really show headway’s design friendliness by incorporating some of our designs. We can design anything but just need to know a little more about how the integration works.

    Any help would be greatly appreciated. Thanks.

  • Eddie Gear says:

    For some reason, once i update the keywords for posts at the seo section, And update the post. The keywords just disappear..

  • Vivek Parmar says:

    just won a copy of headway theme in a contest organized by headway, now playing with it and finding the ways how it is more useful, thanks for sharing

  • Corey – you’re awesome! I haven’t even read the post yet and I wanted to comment. I watched the whole video at the top and LOVED IT.

    Off to read the post and learn more.

    (I just bought Headway yesterday.)

  • Steve Atwal says:

    Thanks Corey. Excellent post! Just one question. I just purchased the Headway Theme, and am playing around with it to get familiar. So far, looks great. But, how do I get a banner (for affiliate) to appear just to the right of the header image (which is about 300 x 90)? I tried the “After Header Link” Headway easy hook, but that puts the affiliate banner below the header image. I want it to appear just to the right of the header image. Appreciate any input.

    Cheers!
    Steve

  • Corey
    You are the shining light for all of my head scratching questions about Headway Themes . As a user for 6 months or so, I love the tool but frequently find myself at my wit’s end over some seemingly simple issue. Without exception, every step of the way when i’ve been lost i’ve somehow found your posts sprinkled throughout the web. Without your guidance, I would be hopelessly lost in their confusing online support forum!!! You truly have a gift of teaching and helping others and I hope Headway sees the value you bring them.

  • Robin Boult says:

    Hi Corey… Great post. I have a issue with my headway powered site & tried everywhere to find a way of resolving the problem with no luck. My home page is a series of posts categorised in different columns. The title font is set low…10px so it’s a kind of teaser. When you link on it I’d like the font size on the relevant Blog page to be back to normal size. How do I achieve this ?

  • Ted Canto says:

    Hi Corey,

    Great stuff! I actually am in the middle of designing my site and have pretty much decided what my static home page will look like however, I want to have an entirely different look to the posts and pages and I am not sure where to go to do that. Any words of wisdom?

  • Keith Davis says:

    Corey
    Loved the video and loved your style of presentation.
    Just bought Headway and starting to mess about with it.

    Have you done anything yet on version 3?

    • This is a super late post but if you want Headway 3.0 specific tutorials and information, please visit the new HeadwayExpert.com. I’m glad this guide continues to help people, and I am continuing to help Headway Users :)

  • Dustin says:

    Thanks Corey. Great post and video!

    • Happy to help! If you need more updated materials, please check out HeadwayExpert.com for 3.0 tutorials. It’s a totally new product so there are a ton of new features to learn.

  • Christopher A. Steele says:

    In my almost-to-the-medicare-stage long life, I’ve been, among many other things, a freelance writer (news stand magazines), a proofreader, and an editor of procedural manuals for the federal government and private industry. I constantly see our language hacked to pieces on the web: the word “atrocity” comes easily to mind. So it is all the more refreshing, even *heart warming* to see English prose treated with the respect – and talent – it deserves. Your procedures are clear, concise, and easily understood. One of the highest compliments I can pay any person is to tell them what I will now tell you: You, young Lady, are a good writer. *Outstanding* job. I am sincerely proud of you, Corey. /cas

  • Shah Faisal says:

    Thanks for the nice post. See forward to see something different like this from you guys.

  • kristy says:

    Hi Corey,

    Loved your article … Do you know if Headway themes can be tweaked into a YouTube type of user-generated multimedia content platform? I was going to purchase it but now I am researching multimedia WP themes but I don’t know any coding as I am a marketing person. Any ideas, thoughts or places where you know I might be able to get some input/help?

    Thanks so much!

    Kristy