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?

Get Headway » No More Code! Visually Customize Your Site!