Video tutorial: How to create a single page WordPress website

Video tutorial: How to create a single page WordPress website 2

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).

We’ve just released a plugin called ‘The One Pager’. This makes it super easy to create smooth scrolling one page WordPress websites in minutes. Click here to read more about The One Pager plugin for WordPress.

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

wordpress Single pager screenshot

What we used for this tutorial…

What the tutorial will cover

  1. Installation of the Page scroll to id plugin
  2. How to set up your menus so they link to a specific area on the page
  3. How to define the area on the page where the menus link to
  4. How to create ‘back to top’ links

Video tutorial

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’)


Menus ‹ Socialpress — WordPress 2

[hr]How to add the target link in your page

Edit Page ‹ Socialpress — WordPress

[hr] Step 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>

Edit Page ‹ Socialpress — WordPress 2

Add the target div to your header

Copy the code below into your header to get the Back to top links to work

<div id=”section_top”></div>

Hook Manager ‹ Socialpress — WordPress

50 thoughts on “Video tutorial: How to create a single page WordPress website”

  1. Great tutorial!

    Would you be able to describe how Canvas can achieve a fixed menu like Coker (SCRN theme)? I found a tutorial on bootstrapping Canvas, but am wondering if there is a simpler way to just fix the menu to the top of a page without all the extras of bootstrap?


  2. Thank you Greg,

    I wasted hours trying to get that blasted plugin to work properly. The documentation on the developer’s website never ever addresses the one golden nugget that you revealed, “Link Relationship (XFN)” under the screen options tab.

    I am so elated and annoyed at the same time…. Thank you! :-)

  3. Hi there,

    Is it possible to make Step 2 work on an anchor point on an external/different page? That is, instead of linking to #anchor, can we link to /page#anchor? (assuming the destination page has the correct javascript/javascript plugins?)

  4. Firstly, thanks for writing this up. As Jordan said above, it’s a hug improvement on the “documentation” associated with the Page Scroll to id plugin.

    My only big issue here is that I’m not using the themes you suggest (can’t afford it at present!), and instead I’m building my own theme using _s ( as a starting point.

    And I have absolutely no idea whatsoever how to display all my pages (or specific pages) on my home page (i.e. “single page”). Can anyone show me / send me the actual code we’re supposed to use within the index.php to be to do this?

    I’d be eternally grateful! :/

    1. DId you ever figure this out? I am in the same place as you. I’m using _s underscores and trying to figure out the code to put into the index.php page, or home page to get all posts on the same page.

  5. Thanks so much for this tutorial Jamie.

    It found it at a very timely moment, thanks to Jordan (above) who left me a link here in a comment on the Page Scroll to ID developer’s site.

    I have just used the methods you describe and Page Scroll to ID to help build the homepage at which I have just started.

    One thing I have done on that site ~ which you might like to think about ~ I didn’t like the ‘back to the top’ links, so I created a sticky menu (or fixed header). Now the header scrolls too, when you scroll to the ID link, so there’s no need to have a ‘back to the top’ link at each location.

    AND, what’s even better, is that the links in the sticky menu take you exactly to the location you want to visit. So you don’t have to go back to the top and then scroll down again.

    I used Genesis 2.0 for this site which it makes it easy to create a stick menu with just a few lines of CSS. But if you’re not using Genesis I noticed there are plugins out now that will do the same or similar.

    Again, many thanks.


  6. Thank you Jamie! Half the time I left the “m_PageScroll2id” in the “Title Attribute” field and almost pulled out all my hair. Your post saved the day!

    I posted your link on the WP plugin forum as there are a few others inquiring about this.

  7. Hey everyone. Great tutorial but it’s not working for me. I’ve done everything you’ve said. I added the to the top of each page. Still, there’s nothing any help you could give would be greatly appreciated. Here’s a link to what I’m working on.

    1. Hi.

      I noticed that your site is quite image-heavy. This may influence how the jQuery works (or not). I would also guess that other processing-intensive factors may influence the outcome.

      I am sure you have already tested with all other plugins deactivated?

      Best regards,

  8. Hi! Great tutorial!

    I am struggling with the following problem:

    When linking to the page with the anchor from an external page (menu), the link does not work.

    It seems that the Link Relationship stops it in some way.

    Same problem when the plugin is deactivated – the Link Relationship is still defined and the link is unresponsive.

    Thank you for all input.

    Best regards,

    1. Great tutorial, thank you!

      However, I’m having the same issue.

      I dig the one page concept but I still want another page(s) for my blog, services, ect.

      How do the links need to be structured in order to function from another page within the site (or externally for that matter)?

      1. Jamie Marsland

        Hi Dave,

        You should just be able to add them as normal menu items. They’ll link to those pages as normal.


  9. Hello,
    in the “Getting your menus to link to specific places in your page” tutorial, you write the link in the url section , but in my side there is no url section in menu. i activate all option in the sceen option

    Do you have any issue ?
    thank you for helping :)

  10. Pingback: Multiple content backgrounds on a Wordpress site?

  11. Pingback: Ask Experts » a couple of content material backgrounds on a WordPress site?

  12. A bit dated. Since WP 3.8 – as of today 3.8.1 – You can NO LONGER set URL in the Nav Menu as your Step 2 video indicates….with WP 3.5. Still good information, but anyone on a newer version of WP will have no clue how to make implement this.

  13. Hello everyone,
    I try to use the plugin fpr my self-build wordpress theme – it doesn’t work properly.

    This is what I did: I installed the plugin, then changed menu as shown in the video tutorial.

    But when I click an item of my fixed navigation, it jumps to the target, without any scroll animation.

    Can anyone help me?

  14. Great tutorial for a great plugin!

    You are using just one page for all the content or you have separate pages for each menu item?

  15. Hi,

    Thank you very much for this tutorial. I was spinning my wheels for some time. It is working fine, but I have one more puzzle piece I can not figure out. I am trying to get the home link in my navigation to return to the top of the page. (navigation is fixed). I am working in the Divi theme and there is no place for me to put code in the header area, only css ID or css classes and no txt – I tried to drop it into the .php file but no luck. Any help would be appreciated!

  16. Dear Jamie,

    thank you for the detailed videos! I have tried to use the plugin in my website, but isn’t working. I also need to admit that I am new in the world of wordpress and this is what I have produced after 24h:
    My idea is to connect or merge all pages until “contact” into one single-page website and additionally using the page to scroll id plugin.
    How can I do that? I’ve enabled the relationship field and copied m_PageScroll2id into it.

    Any hint appreciated!

  17. Hi, I am using a different theme to set up my site. How can I add all the pages to one page such as you have done? Currently I do not have About Me, Contact, etc scrollable on the same page but would like to achieve this with your help.



  18. hey guys i have used the scroll2 plugin along with the sticker header plugin. all works great except that the scroll2 is scrolling to high and sitting behind the sticky menu. can you advise how i could adjust this so the scroll2 adds some padding to anchor the hook in a better position?


  19. how do i control the hieght of the auto scroll? i am using this with your sticky header plugin and the page scroll to id is scrolling to far and hiding the anchor point under the sticky menu. can you please advise how i can fix this?

  20. Hie,

    I am using Page Scroll to id but it directly jumps to the section that I defined. I want it to scroll to that part not to jump directly. What should I do for this.


  21. Let’s try this again. Thanks for this tutorial. It is exactly what I needed. Out of the blue two clients each wanted a one page website and now I can offer them something made from Canvas. That this can work for any theme, bonus!

  22. Hi Jamie,

    I was just looking for a tutorial on one page WP sites. I’m amazed it so easy to do! I was preparing myself for at least a week of struggle. Can I show you later my result?

    Many thanks,

    Julia from Sweden

    1. Jamie Marsland

      Hi Julia,

      That’s great – I’m really pleased you found the tutorial useful.

      Yes please, share the link once done :)


  23. hi Jamie, I am just creating my portfolio website with wordpress and I have choosen the theme parallax made by cyberchimps (lite version). I was trying to apply your tutorial (it was really instructive and I was looking for one of this for ages!) but I couldn’t manage to make the menu works. None of the items of my menu links to anything. Is it possible that this plugging works only with onepage themes? If true, could you reccomend me a free onepage theme? I can’t afford to buy one for a while. Many many thanks!!!

  24. Hi Jamie,

    I’ve followed your tutorial, made all settings but when I how to my home page I see just my home page content not all page contents like on your example. My actually nav menu is Home, About Us, Ingredients, Contact Us.

    Can you please tell me what can I do in order to have all pages on the front page (Home)?


  25. sorry but with this tutorial you have all in one page from back-end, so can’t be SEO each page separately. i looking for some better solution. can you help please? using loops maybe…

  26. Hi,

    This looks great, but how are you seperating the content for each section?
    Are these seperate pages in the backend that you are then pulling out onto the homepage?

    Would appreciate any more details.

  27. Hey Jamie,

    Instead of using a menu item, is there a way to use a png image as the trigger – I’ve a png down arrow in a slider which has the option to link to a url, however I’d like to figure a way to scroll down to a section as you’ve shown

    Hope all is well


  28. Hi, i’m trying to put the back to top target div in header.php as i don’t have theme customizer like the one woo offer in my theme.

    I can’t get it to work, can anyone shine a light on where it goes or if i’m doing it right, i’m putting it after the main body tag as per what is indicated above.

  29. hi.!
    i don’t know if somebody already asked that,.. but is it possible to mantain the menu allways visible ?


Comments are closed.

Scroll to Top