Creating a single page website using Headway Part 1

Sometimes, you don’t need a multipage website. Sometimes, you want a website stripped down to the minimum. When you are looking for small, minimal sites, a single page website may be the answer.

If you’re used to designing a multipage website, creating a single page website will often require a bit of adjustment. It doesn’t require loads of javascript. It doesn’t require any specialized php. But it will require a bit of rudimentary knowledge of html and css.

Not to worry, though, I’ll provide examples that you can hack for your own use.

Let’s start with what our finished page will look like. Note, the design isn’t going to be drop dead beautiful, but colors and such are chosen so you can see where one element ends and another begins.

A one page website using Headway Theme

Step 1 – Install Headway

Start with a fresh install of Headway 3.x, the latest version of WordPress, make sure your browser is updated, and deactivate any plugins you might be running.

Step 2 – Create the Home Page

We’re going to create a page in WordPress that will be our single page website. So, go into WordPress dashboard area, go to Pages, click Add New. Name the new page “Home”. Click Publish.

Step 3 – Setup WordPress for a static Home page

Back to the WordPress Dashboard we go to setup our Home page as the default landing page. Go to Settings, go to Reading. For “Front page displays” Select “A static page”. For Front Page, use the drop down menu and select “Home”. Click Save Changes.

Step 4 – Create the content for the Home page

Here’s where thing might get a little confusing. We are going to use the custom query ability of the Headway content blocks to bring in our content. So, we are going to create separate pages in WordPress with this custom information. You’ll see how this all ties in together later on.

Let’s add a new page and name it “Top Content”.

In the body of the new page, add the following content:


<h2>Welcome to a one page website</h2>
This website is built using only one page, WordPress, and the theme framework Headway.
This is the first section and would be the equivalent of the landing page. Content here will be
above the fold. If you click on the navigation links, it will not actually take you to another page
but will, in fact, just move you around on this page.
By using graphical elements and color, I can make each section stand out.

Click Publish.

What we’ve done is created a block of content and wrapped it in a div title #top_content. We’ll use this for our navigation.

Let’s add another new page and name it “Middle Content”.

In the body of the new page, add the following content. You’ll want to add your own photo to the content.


<a name="mid_content">&nbsp;</a>
<h2>About This Section</h2>
This is the middle section and we might want to use it as our About Us section. So we'll put
in some biographical information and a photo.
<img class="size-thumbnail wp-image-10 alignleft" title="Rialto_Beach"
src="http://link_to_a_picture_here.jpg" alt="" width="150" height="150" />This photo, that
I'm using instead of my photo, was taken at Rialto Beach on the coast of Washington state.
This is a part of the Olympic National Park and features tide pools, cliffs, rocks, sand, and the
occasional hiker trudging about with a big camera. That would be me.
On this particular day, the morning temperature was quite chilly until the sun came up and
then it was very hot. The cold water of the pacific was a welcome relief. I had to wait
until the tide was coming in to snap this picture. In fact, I waited about an hour for the
waves to get high enough to give the effect I wanted.
Oh, and don't let the blue sky fool you, it rains all the time in Washington. Really.

Now, let’s add our final page, named Bottom Content. I’m going to show how you can add other blocks to a section, but this will happen when we get to the Visual Editor part of the tutorial.

Here’s the content we’re adding to the new page:


<a name="bottom_content">&nbsp;</a>
<h2>Video and More!</h2>
This is the bottom section and we are going to include a special addition: a media block with
a fun little video from YouTube.
Since I don't have a fun video of my own, I'm going to link to one of my favorite videos:
Simon's Cat. I hope you enjoy it.

Now that we have all of your content, let’s move on to the next section.

Step 5 – Creating the Layout in the Visual Editor

Open up your Visual Editor and create the following blocks. Make them take the full width of the page – this is supposed to look a bit like we have multiple pages in the website but it’s all built on one page. Having sidebars would defeat the look.

  • Header
  • Custom Code Block
  • Navigation
  • Content
  • Custom Code Block
  • Navigation
  • Content
  • Custom Code Block
  • Navigation
  • Content
  • Media Block
  • Footer

Your page should look a bit like this now:

One Page Website using Headway - the grid view of the design

 

Step 6 – Custom Code Blocks

This works by adding an html tag to your content called ‘a name’. With the configuration I have in this page, putting the html code in the content of the page would mean that, when you click on ‘Bottom Content’ in the navigation, the top of your screen would be even with the top of the content. This effectively hides the navigation. To bypass this, I’ve added a custom code block above each navigation and added that html tag to the block.

For the custom code block above the first Navigation block:

<a name="top_content">&nbsp;</a>

For the custom code block above the second Navigation block:

<a name="mid_content">&nbsp;</a>

For the custom code block above the last Navigation block:

<a name="bottom_content">&nbsp;</a>

Click Save.

Step 7 – Creating a navigation menu that works.

We are going to create a new menu in the WordPress dashboard area. We’ll call this “Main Menu”.

We’ll add 3 custom URLs to the menu. In the URL section, you’ll type the link to the section of the page.

URL #1:

#top_content

Label #1:

Top Content

URL #2:

#mid_content

Label #2:

Middle Content

URL #3:

#bottom_content

Label #3:

Bottom Content

Step 8 – Assign the Menu to the Navigation blocks

While you’re still here in the Menus section of WordPress, you should see the 3 Navigation blocks that we created in the Visual Editor. Assign “Main Menu” to each of these Navigations.

Your WordPress Menu area should look like this now:

Setting up the menus for the 1 page website using Headway

Step 9 – Getting the Content into the page

Back to the Visual Editor we go. Click on the options icon for the first content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Top Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Click on the options icon for the second content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Middle Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Click on the options icon for the Third content block. Select “Custom Query”.

Under “Query Filters”, Select “Fetch Page Content” and choose “Bottom Content” from the drop down list.

Under “Display”, unselect “Show Titles”.

Step 10 – Add media

Under “Embed Options” I’ve put in the following URL: http://youtu.be/w0ffwDYo00Q

This is a fun little video I like, but you could add any link you want, like this one from AJ http://youtu.be/qsahO_09tFc

Step 11 – SAVE

Now save your work. Open the page in a browser and click around in the site.

This is a pretty boring looking site but you can add styling later. We’ll do that in part 2.

 

Spread the word!

5 Responses

  1. Thanks for these instructions.  After following each step to a T, however, navigation is not working properly around the page.  I have double and triple checked steps 4, 6 and 7, but when I click on the navigation bar, each “page” brings me to the top of the home page (as opposed to navigating up or down to the corresponding content).  Any ideas?  Thanks!
     

  2. Hi, thanks for this step by step instructions! very useful…! Now how do I best deal with the Smooth Scrolling Effect for our page sections?

  3. Hello,

    First of all I must say thank you for this tutorial! It has really helped me out. However, I am having one issue. When I view my site, there are 3 menus instead of 1. How can I hide the other 2 menus? And is there a way to make it a vertical menu?

    Thank you very much,

    Matt

Leave a reply

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