Using a static front page with Headway

You may decide when you go to build or rebuild your site, that you want to use WordPress’s “Static Front Page” option so that can have a separate blog page. You can do this with Headway easily.

Step One

Your first step is to create the pages that will be used as the Static Front Page and the page to show the blog posts.

For purposes of this tutorial, you will need to know how to create pages in WordPress. If you do not know, please see our videos.

Go into the Pages administration area and create the two pages you would like for those two areas and save them (if they do not already exist). In this tutorial, I will be using a page called “Home” for the static front page and a page called “Blog” to show the blog posts.

Step Two

Now you need to formally set the two pages you created to display as the front page and the blog. In the WordPress dashbard, go to Settings » Reading.

Where it says “Front Page Displays”, change that to a Static Page. Then choose which page you want to act as the front page and which page to act as the Blog Index (showing your latest blog posts).

static-front-page-set-pages

In the Visual Editor, you will now see in the layout selector “Front Page” and “Blog Index”.

static-front-page-pages-ve

You will not customize the actual pages you created but the “Front Page” is the layout you customize for the static front page and “Blog Index” is the layout to customize to show the archive of your blog posts.

If you have already customized either of layouts for the pages you are using for the front page or blog index, that layout will not be shown.

In some cases that customized layout has conflicted with the layouts created on “Front Page” and “Blog Index”.

Step Three

Now you create your layouts for both “Front Page” and “Blog Index”. You can customize each one independently of the other so your static front page can have a different layout and/or style than your post archive (Blog Index).

Things to Know

  • The pages you’ve selected as the “Front Page” and the “Blog Index” will no longer be shown in the layout selector. If you want to style them, you need to style “Front Page” and “Blog Index”.
  • Why, you might ask? This setup follows the WordPress Template Hierarchy. This setup actually makes sense in case you want to change which page acts as the “Front Page” or “Blog Index” later.

So what do you do, if you’ve already designed the specific pages in the Visual Editor and don’t want to have to re-do anything?

Great question! And I have an answer. You will need to export your layouts from those pages and import them to the “Front Page” and “Blog Index”.

Step One

In the WordPress dashbard, go to Settings » Reading and change your settings back to Front Page Displays: “Your latest posts”.

Don’t worry – nothing will be lost by doing this. Your work is safe. But if it makes you feel better, you could save a snapshot and/or make a backup before doing this.

Step Two

Now you need to export your layouts. Find the page you’d like to use as the “Front Page” in the layout selector and click Edit. Next hover over the word Tools and then Grid Wizard. Within the Grid Wizard, click on Import/Export. Then find where it say “Export Current Layout” and click on “Download Export File”.

static-front-page-export-layout

Make sure to save the file (it will be on .json format) in a place where you can find it again.Repeat this process for the page that you’re going to set to show the Blog posts. The layout will save in this format Headway Layout – {name of page}.json. You can of course change this. My layouts saved as:

Headway Layout – Home.json
Headway Layout – Blog.json

Step Three

Now you need to re-set your pages as the “Front Page” and “Blog Index”. In the WordPress dashboard, go to Settings » Reading and select your pages again.

static-front-page-set-pages

Step Four

Open up the Front Page layout in Grid Mode. Then hover over Tools again and click on Grid Wizard. Click on “Import/Export”. Where it says “Import Layout”, click on “Select File & Import”. You’ll need to browse your computer to find the file you saved for the page you want as the “Front Page”.

Once it successfully imports, you will see “Layout successfully imported”.

static-front-page-import-layout-success

You then need to repeat the process for the “Blog Index” layout. And then you are done and you didn’t have to re-do your work.

Spread the word!

9 Responses

  1. Is this suppose to take awhile to import? I was able to export without troubles, but now I’m trying to import and nothing seems to be happening. I saw “Currently importing images” in the top right hand corner, which faded away after a few seconds, and then nothing. I have yet to see any “Layout successfully imported” as is shown in the blog, and the Grid Wizard box is still open. Is this to be expected?

  2. I tried to use this solution in combination with the plug in “wpml”, but it does not work. Do you know this problem? Do you have a solution for this?

  3. I did this and it worked however a word of warning, it didn’t bring the widget layout over into the new version. Not a biggie but still took time.

  4. I am trying to set up my website. I must have done something out of order. I do not see the option, “Front page displays” in reading settings. Please advise!

    • Hi Lori, that is a WordPress option. Please post in the WordPress support forum to get assistance. Of course, you can always check for a plugin conflict by making a backup and then deactivating all plugins at the same time to see if the option appears for you.

Leave a reply

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