Single page WordPress websites are growing in popularity because they work beautifully on desktops, phones and tablets.
This tutorial will teach you how to create a single page website with any theme (the theme we used in the video is Canvas from Woothemes).
You will learn how to create animated ‘super smooth scrolling’ from your menu items to specific areas within your home page – and ‘back to top‘ links so that your readers can easily navigate through all your single page content.
Example Single Page WordPress website
What we used for this tutorial…
- The Page scroll to id plugin
- The Canvas theme from WooThemes
- The Pootlepress menu pack for WooThemes Canvas
What the tutorial will cover
- Installation of the Page scroll to id plugin
- How to set up your menus so they link to a specific area on the page
- How to define the area on the page where the menus link to
- How to create ‘back to top’ links
Step 1: Introduction
[hr] Step 2: Getting your menus to link to specific places in your page
How to set up your menus
Below is the text you will need to put into link relationship field in your menu item
And don’t forget you will need to add a url following this convention (replacing the word ‘about’)
#section_aboutStep 3: Getting the ‘Back to Top’ links to work
Adding to Back to top link in your page
Copy the code below to add the Back to top link
<a href=”#section_top” rel=”m_PageScroll2id”>Back to top</a>
Add the target div to your header
Copy the code below into your header to get the Back to top links to work