top menu

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

m_PageScroll2id

And don’t forget you will need to add a url following this convention (replacing the word ‘about’)

#section_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

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

 

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

  1. mark phillips February 23, 2013 at 2:12 pm #

    http://www.cokerbranddesign.com/ 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
    Mark

  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?

    Cheers!
    Greg

  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 (underscores.me) 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! :/

  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 QloudPress.com 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.

    Terence.

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

      Jamie

  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.

    http://hannacarmon.yourpagehost.com/

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

      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,
      Tord

  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

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

        Jamie

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

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

  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

    https://vimeo.com/user8529687/review/90715206/342f12f458

    Jamie

  16. verolavero April 3, 2014 at 10:28 am #

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

  17. Kostas Ramone April 5, 2014 at 11:25 am #

    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?

  18. Jennifer April 6, 2014 at 1:34 am #

    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!

  19. Tash April 10, 2014 at 3:03 pm #

    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: http://multilingualsynergies.com/
    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!
    Best
    Tash

  20. Kato April 12, 2014 at 1:40 pm #

    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.

    Thanks,

    Kato

  21. 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?

    thanks

  22. 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?

  23. Ajay April 17, 2014 at 9:56 pm #

    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.

    Thanks

  24. Ajay April 17, 2014 at 10:13 pm #

    I added this Plugin but its jumping to that section I defined. How to put scroll thing?

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

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

      Jamie

  27. Julia Rietveld May 7, 2014 at 5:36 pm #

    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

    • Jamie Marsland May 8, 2014 at 2:50 am #

      Hi Julia,

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

      Yes please, share the link once done :)

      Jamie

  28. Fernanda May 9, 2014 at 4:52 pm #

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

  29. Andrei May 24, 2014 at 9:09 am #

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

    Thanks,
    Andrei

  30. Stefani June 10, 2014 at 8:18 pm #

    OMG!! This is soooooo awesome!! Thank you for this extremely easy to follow tutorial!!!

    • Jamie Marsland June 11, 2014 at 5:41 am #

      Thanks Stefani :)

  31. Mike July 3, 2014 at 4:27 pm #

    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…

    • Nick Burne July 21, 2014 at 9:20 am #

      Hi Mike, interested if you have any more thoughts on this…

  32. Andy July 14, 2014 at 7:10 pm #

    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.

  33. Darron September 13, 2014 at 4:46 pm #

    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

    Darron

  34. Mark September 16, 2014 at 3:29 pm #

    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.

Trackbacks/Pingbacks

  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