Creating a One–Page Style Website

In this arti­cle we’re look­ing to cre­ate a One Page Web­site where the menu nav­i­gates through each sub­page. Fur­ther is an exam­ple of One Page Demo using Rosa.

Step 1 — Creating the pages’ structure

We need to have a top lev­el Par­ent Page with a list of Child Pages that we will link through our sys­tem. We will cre­ate this struc­ture eas­i­ly, fol­low­ing the Cre­at­ing the “Home” Page (Front Page) arti­cle.

As a result, the struc­ture will look sim­i­lar to:

  • Par­ent Page (Wel­come)
    • Sub Page 1 (Menu)
    • Sub Page 2 (Reser­va­tion)

In order to cre­ate the menu links, we will:

  1. Go to Word­Press Dash­board → Appear­ance → click on Menus.
  2. Add a new Menu and assign it to the “Main Menu” loca­tion.
  3. Add a menu item for each page/subpage that you want to scroll to. We will use the “Links” type and each item will have this struc­ture:
    • URL: #post-id-title where “id” is the Page ID that you can find by going in Word­Press Dash­board → click on Pages and select a page to edit and look at the brows­er URL bar (see screen­shot below)
      *Note: You can skip the “-title” if you want to link direct­ly to the con­tent or if you don’t have a fea­tured image.
    • Link Text: the name that will appear on the menu (Eg: Reser­va­tions).

Below is an illus­tra­tion to help you bet­ter under­stand how the menu items are linked to pages (click to zoom):


This is it. Quite sim­ple right? We hope you enjoy this wit­ty log­ic we have envi­sioned to help you cre­ate beau­ti­ful­ly one–page web­sites in no time.

This article applies to Rosa, as they share the same underlying structure.

Updated on April 20, 2017

Was this article helpful?