Creating a One–Page Style Website

In this article we’re looking to create a One Page Website where the menu navigates through each subpage. Further is an example of One Page Demo using Rosa.

Step 1 — Creating the pages’ structure

We need to have a top level Parent Page with a list of Child Pages that we will link through our system. We will create this structure easily, following the Creating the “Home” Page (Front Page) article.

As a result, the structure will look similar to:

  • Parent Page (Welcome)
    • Sub Page 1 (Menu)
    • Sub Page 2 (Reservation)

In order to create the menu links, we will:

  1. Go to WordPress Dashboard → Appearance → click on Menus.
  2. Add a new Menu and assign it to the “Main Menu” location.
  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 structure:
    • URL: #post‐id‐title where “id” is the Page ID that you can find by going in WordPress Dashboard → click on Pages and select a page to edit and look at the browser URL bar (see screenshot below)
      *Note: You can skip the “-title” if you want to link directly to the content or if you don’t have a featured image.
    • Link Text: the name that will appear on the menu (Eg: Reservations).

Below is an illustration to help you better understand how the menu items are linked to pages (click to zoom):

Zoom

This is it. Quite simple right? We hope you enjoy this witty logic we have envisioned to help you create beautifully one–page websites in no time.

Updated on April 20, 2017

Was this article helpful?