Where WordPress Stops and Headway Begins

Note: This post is paginated, meaning it splits across onto multiple pages (see the page links right below the content on this page!) because it’s a bit long. Don’t forget to read the rest of the post & then comment!

For those starting out as new users on both Headway and WordPress, it’s common for there to be confusion around what functionality is WordPress default functionality, and what options are specific to Headway.  I hope to clear up some confusion and help you to draw a clearer line between the two, while also giving you a little education on WordPress and the Headway Theme in general.

Writing Blog Posts and Pages

Click Add New under Posts to get started!

What it means: Adding new content to your website, in the form of blog posts or static pages (such as a Contact me page, or the About page on this site)

Default functionality of: WordPress

Where you do it: In the WordPress Dashboard, under Posts –> Add New and Pages –> Add New

What else you need to know: In the WordPress dashboard, you can control certain things about the content. For example, in any given post or page you can add text, videos, or images. You can style that text as well, adding statements in bold text, italicizing certain words, or adding headings (such as the words “Writing Blog Posts and Pages above this section). In the Headway Visual Editor, you will control other elements of a blog post or page’s content, such as font family, font size and default font colors, link colors, borders around images and more.

Uploading Media

What it means: It means uploading things like pictures, videos, or even documents such as PDFs to your website, either for visitors to

Media Library: Click to Enlarge

Click to enlarge

download or for use in your design or site content.

Default functionality of: WordPress

Where you do it: In the WordPress Dashboard, under Media –> Add New.

What else you need to know: Once you upload your media, you will be able to grab the absolute URL so that you can link to it or add it to some HTML code to display it anywhere! You can also see the media you’ve uploaded from the Post Edit and Page Edit screens, by clicking on the appropriate icon (picture, music note, etc) next to “Upload/Insert” above the edit area (below the post/page title) and viewing the Media Library.

Separate Home Page & Blog Archive

What it means: Setting up a “static homepage” for your site – most often seen with small business websites. This format allows you to present specific information to the visitor — about your company, products and services, etc. If your site includes a blog, typically you also add a navigation tab (page) to direct visitors to the list of your blog posts – the Blog Archive.

Default functionality of: WordPress

Where you do it: Under Settings –> Reading. Select “A Static Page” and select the appropriate pages. You’ll probably need to create a page called Home and a page called Blog, unless you want folks to start on a different page, like your About page.

What else you need to know: Once you set up these settings, you will edit your “Home” page in the Visual Editor (Headway Theme) to set up your home page layout. You’ll edit either the page you called Blog or the Blog Index system page  (it’ll be the same, ultimately) to set up your blog layout. Don’t forget to link everything appropriately.

Configuring the Navigation Bar

Navigation panel when using WP 3.0

What it means: Adding and arranging links that appear in your navigation on a website that makes use of a horizontal navigation bar. These are also often referred to as “Tabs” and “Pages”. Optionally, the navigation bar might include a “drop down” – where you hover over an item in the navigation bar and a list of additional child links appear.
Default functionality of: Gray area.  The basic function — wp_list_pages() – is a WordPress function that automatically lists all of the pages you’ve created in your WordPress website. However, the ability to drag & rearrange the navigation, forward pages to different URLs, and style the navigation are part of the default Headway functionality.

Where you do it: To add pages to your navigation bar, you need to create a new page within the WordPress dashboard. This is also where you’d set up parent-child relationships between pages (the top-level parent appears in the navigation bar, and child pages appear in the drop down).  You can also use Page Order in the WordPress dashboard to define what order the pages appear, though the Headway option to rearrange the navigation is much easier to use (within the Visual Editor). Once your pages are created, you may modify the navigation item order, style, whether drop downs are shown, and hide navigation items by dragging them to the Inactive Tabs area.

What else you need to know: WordPress 3.0 offers new functionality around creating “Menus” – or, navigation areas. These may be navigation bars, or they may be inserted as widgets in sidebars or a footer. The new Menus area under Appearance in the WordPress dashboard allows you to create menus based on pages, categories, external links and more. You may also create multiple menus. The Headway Theme, version 1.6.6, is compatible with these Menus in WordPress – the options right now are limited, but I expect that they’ll be expanded.  Right now, if you are using WordPress 3.0 and you create a Menu, you’ll notice that in the Headway Visual Editor,  the Navigation panel will offer you a drop down to choose which menu you want to display as the main navigation for the page. You cannot currently show more than one menu, or show different menus on different pages. This is the functionality that I hope Headway will eventually introduce.

You can use the free Navigation leaf to create an additional navigation menu – horizontal or vertical – and you can also add a widgetized sidebar and add a Menu as a widget.

Adding Widgets (Sidebar Content)

Widgets in the sidebar (WordPress Admin)

What it means: Widgets are basically just user-friendly blocks of (usually) dynamic content. Some of the most popular widgets in WordPress are those that display a list of categories, recent posts, areas for visitors to register or log in, recent comments, advertisements, photo galleries, etc.  Widgets are added to sidebars in WordPress – specifically, widgetized sidebars. Most new themes (including Headway) support this feature, but you may encounter older themes that have “static” sidebars – you can’t drag widgets to them.

Default functionality: WordPress

Where you do it: First, you will need to have a sidebar in at least one page layout that you create within the Headway Visual Editor. (Read on for how to do that). Once you have  a widgetized sidebar available, you’ll add widgets from the WordPress dashboard. Navigate to Appearance –> Widgets and start adding & configuring!

What else you need to know: Plugins for WordPress often add additional widgets that can be used in your sidebars, so not every WordPress installation / site will have the same widgets available. Headway replaces the default WordPress search widget with it’s own. You’ll also see a Social Media widget which Headway provides — it allows you to enter the links to your social media profiles and it automatically displays an icon linked to your profile in the sidebar. (Don’t like the links? Use a text widget to add your own, or replace the default Headway icons and use the widget)

Creating Page Layouts

What it means: Setting up the various elements of your website — adding areas for content, sidebars, special advertisements, videos, image sliders, etc. This could mean one layout that the entire website uses, or multiple layouts for certain pages (i.e. a special layout for your contact page that displays large social media icons and a Twitter stream in the sidebar, or a layout for a Directions page that has a Google Map embedded on the page.)

Default functionality: Headway

Where you do it: The Headway Visual Editor, though certain options such as controlling how many featured (full-length) posts are shown in the blog index; whether excerpts are shown; the size of post thumbnails; what post meta information is shown, are found under the Headway Configuration area within your WordPress Dashboard.

What else you need to know: There’s a lot to learn around creating page templates. You can review the following tutorials to get started:

Changing Global Colors, Fonts, Borders, Backgrounds and Other Design Elements

What it means: The styles that define the look of a website – overall font color, background, the logo/header, etc – are all configurable within the Headway Theme.

Default functionality: Headway

Where you do it: The Headway Visual Editor. Specifically, most of these elements will be styled using the Design panel. You can also upload a logo/header and a background via the Site Configuration panel in the Visual Editor.

What else you need to know: There are many, many elements that you can style via the Design Panel on the Visual Editor, but it is by all means not everything available to style. Using Custom.css, you’re able to have minute control over every element on your website. [Coming soon! A guide to the commonly modified CSS styles in Headway, with code examples!]

Changing Colors and Font Styles of Individual Posts and Pages

What it means: Creating a post or page like this — with multiple font colors, styles (bold text, italicized text) etc.

Default functionality: WordPress

Where you do it: The Edit Page or Edit Post screen in your WordPress Dashboard (navigation to Posts –> Edit or Pages –> Edit to find a list of pages/posts to modify.)

What else you need to know: There are two modes in the Post/Page Edit screens — on the top right of the big white box where you write your content, you’ll see “Visual” and “HTML”. Most users choose to compose their content using the Visual Mode — it provides a (sort of) WYSIWYG editor. The HTML mode does not provide this option.

Be cautious! While it’s called a WYSIWYG editor, WordPress is not great at interpreting the styles of the current theme and displaying them to you in the editor. So while you may have set your H2 titles to be in a red font, the WordPress Edit Page screen doesn’t show it to you that way — click Preview to see how it will really appear.

Defining a Post Thumbnail

Set a featured image (WordPress 3.0)

What it means: The post thumbnail (called the Featured Image in WordPress 3.0) is an image that you choose to represent your post. Many plugins utilize the post thumbnail now, and Headway uses the post thumbnail in blog excerpts (it displays next to the post excerpt on the blog index page, archive pages, etc)

Default functionality: WordPress

Where you do it: The Edit Post screen in your WordPress Dashboard. On the left side of your screen, typically, you’ll see a box labeled either Post Thumbnail or Featured Image.  Click the link to set the thumbnail – the Media manager will pop up, allowing you to upload a new image, or choose from your existing media library. Underneath the image, you’ll see a link next to “insert into post” that says “Set as Thumbnail” or “Set as Featured Image”.

What else you need to know: In Headway, the thumbnail also appears automatically on the single post page. If you’d rather not see it there, you can hide the thumbnail on single post pages.

Search Engine Optimization

In-Post SEO Options, Click to enlarge

What it means: Without going into great detail, Search Engine Optimization (or SEO) is a way to make your site more Google-friendly. Typically, the goal is that when someone searches online for something your site has to offer, your link will be closer to the top result than your competitor.

Default functionality: Headway

Where you do it: You can set overall SEO options under the Headway –> Configuration –> Search Engine Optimization menu on the WordPress dashboard. These are global options for your site, and should relate to the purpose of your site and what it’s all about. You will also find options on the Edit Page and Edit Post screens in the WordPress dashboard (typically underneath the WYSIWYG editor box) where you can specify options for that specific blog post or WordPress page.

What else you need to know: Search Engine Optimization is a complex subject, and it can take some research to use it most effectively. However, even filling out a basic description for all of your content and a few keywords, you’re on your way. Headway is cleanly coded and SEO-friendly – so you’re probably taking a step up from your old theme or HTML website right from the start.

Wrapping Up

Did this help? Do you have more questions? Leave a comment here so that the community can benefit from your question and the answer!

Spread the word!

16 Responses

  1. Lisa Nowak says:

    Thank you, thank you, thank you! I’m new to WordPress and Headway. While the theme came highly recommended from a trusted source, it’s been a bit of a mystery to use. This is the most comprehensive Headway guide I have found.

    • MommyGeek says:

      Glad that this could be a help! Don’t forget that you can request a tutorial if you need help with something specific or you have an idea for something that might be helpful to the community :)

  2. Mike says:

    I’m brand new to Headway but not WordPress. This has been a very useful resource in helping me unravel the mysterious of Headway.
    Thank you!

  3. joanne Russell says:

    Thanks cat!

  4. This is an awesome article – in fact your whole site rocks! Although I did get my question about using a featured image answered here (plus the how to hide it in a single post post as well) I’m sure there are many people out there searching for how to use this function that would appreciate a more in depth article on it (like, how to get text to wrap around the feature image in an excerpt…ack!) So if you were so inclined, that would be AWESOME!

  5. Lisa E says:

    Hi. I have a question re: adding pages. I have several links to pages in my nav bar (which I put in bf I switched to Headway) and would like to add some more (pages and links).

    I went in to the “add page” section in WP and attempted to add one (as I was able to do quite easily bf I installed Headway). Surprisingly, a strange message appeared about an “Invalid argument supplied” and the fact that I “cannot modify header information – headers already sent by (output started at /home2).” There’s more, but I don’t want to include all of it here.

    Anyway, I’m wondering if this is because I’d created the pages previously (when I had a different WP theme)? If so, what can I do to clear the system or start fresh? I’d really like to move ahead with my site and feel stuck.

    Thanks for your help–I truly appreciate it!

  6. Lisa E says:

    Hi, again. Looks like the pages I mentioned in the last comment were actually created–despite the warning messages that appeared. However, something is wrong. There are some things from the main page (not the blog) that appear on the new pages, but have shifted location and changed. For example, a box (an html/php leaf I have text in) that has a nice background on the front page is on each “new” page, but without the color and in a different location.

    • MommyGeek says:

      @Lisa E, just wanted to state here for everyone reading that Lisa and I worked on her issue offline; it wasn’t Headway related, more of a WordPress issue. If anyone else experiences a similar problem please let me know.

  7. Lisa E says:

    Thanks for your help on this…your explanations have been clear and easy to understand and your ability to problem solve is impressive!

    And that comes through on this site. It is the best one like this that I’ve seen. What you’re doing here has made and continues to make a difference for me, someone new to Headway. I truly appreciate it…and look forward to reading and learning more here.

    Thanks!

  8. kgregg47 says:

    The “Pages: 1 2 3 4″ at the bottom of this first page don’t work. It just returns me to this page. I would really like to see pages 2, 3, and 4, please.

  9. Have you posted those promised common CSS customization tutorials anywhere?

    Thanks!

    David

  10. Brandi says:

    Prop’s to Headway for not only creating a super user friendly theme but also for your commitment to making sure the documentation includes everything we need to create a kick ass website. including the SEO is a HUGE HUGE BONUS for people like me who do not code. thank you!!!!

Leave a reply

Headway Newsletter

Get the latest updates from our blog directly in your inbox! Are you ready to learn the latest from Headway Themes?

Copyright © 2013 Vesped Inc. All Rights Reserved. Proudly Powered by Headway and WordPress