Video tutorial: How to create a single page WordPress website

Single page WordPress websitessuch as this one we built for Coker Brand Design – 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

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

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

How to add the target link in your page

Edit Page ‹ Socialpress — WordPress

Step 3: Getting the ‘Back to Top’ links to work

Adding to Back to top link in your page

Edit Page ‹ Socialpress — WordPress 2


Add the target div to your header

Hook Manager ‹ Socialpress — WordPress


30 Responses to Video tutorial: How to create a single page WordPress website

  1. mark phillips February 23, 2013 at 2:12 pm # is a great example of this design concept.

    Regarding hosting, does it work in much the same way i.e. purchase domain, hosting, install wordpress, install theme, populate, test and set live?

    Thanks Jamie

  2. Adrian Beckett February 27, 2013 at 9:37 pm #

    Great post Jamie. I couldn’t for the life of me figure how you did that Coker website so this is super handy.

  3. Greg March 11, 2013 at 8:47 pm #

    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?


  4. Jordan May 17, 2013 at 2:29 am #

    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! :-)

  5. Gareth June 16, 2013 at 6:16 am #

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

  6. Anir July 15, 2013 at 12:58 pm #

    great post, thanks it helps a lot.

  7. Nick A July 18, 2013 at 7:49 pm #

    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! :/

    • Chad September 28, 2013 at 1:14 pm #

      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.

  8. Terence August 15, 2013 at 2:44 pm #

    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.


    • Jamie Marsland April 2, 2014 at 2:17 am #

      Great stuff , tks Terence :)

  9. Marilynwo November 5, 2013 at 9:05 am #

    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.

    • Jamie Marsland April 2, 2014 at 2:40 am #

      Great stuff tks :)


  10. Jimmy November 5, 2013 at 2:12 pm #

    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.

    • Tord November 12, 2013 at 1:17 am #


      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,

  11. Tord November 12, 2013 at 1:13 am #

    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,

    • Tord November 12, 2013 at 1:59 am #

      Edit: This happens with the link in general, regardless of anchor.

    • dave November 16, 2013 at 8:25 pm #

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

      • Jamie Marsland April 2, 2014 at 2:31 am #

        Hi Dave,

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


  12. emmanuel December 23, 2013 at 2:47 pm #

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

  13. Construire sa maison March 25, 2014 at 10:40 am #

    Thanks. I believe that this one page trend is really not SEO efficient… The best think would be to have different url per section for google

  14. Tom Townsend April 1, 2014 at 10:12 pm #

    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.

  15. Jamie Marsland April 2, 2014 at 2:34 am #

    Hi Tom,

    Actually you can still set the url in the Nav menu in version 3.8.1. Just add your menu item as a link. Found in menus on the left. Here’s a little video to show you the One Pager working in WordPress 3.8.1


  16. tim April 13, 2014 at 2:22 pm #

    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?


  17. tim April 13, 2014 at 11:20 pm #

    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?

  18. Dave LeBlanc April 22, 2014 at 2:00 pm #

    Thank for this. This is exactly what I what I needed. Out of the blue I had two clients who wanted a single page site.

  19. Dave LeBlanc April 22, 2014 at 2:13 pm #

    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!

    • Jamie Marsland April 22, 2014 at 3:55 pm #

      Great stuff, tks Dave glad you found it useful :)



  1. Multiple content backgrounds on a Wordpress site? - March 24, 2014

    […] page and the menu buttons merely point to different locations on the page by the way of divs. See this tutorial for a better […]

  2. Ask Experts » a couple of content material backgrounds on a WordPress site? - March 24, 2014

    […] page and the menu buttons merely level to different locations on the page through the way of divs. See this tutorial for a better […]

Leave a Reply