Building a One-Page WordPress Website

A one-page site is a single scrolling page where the navigation jumps to sections instead of loading new URLs. It is a legitimate and often excellent choice — and it caps what the site can ever rank for. Decide with that trade-off in view rather than discovering it in six months.

When it is the right choice

• One offer, one audience. A single product, an app, a service, an event.
• A campaign or launch page with a single action to take.
• A personal or portfolio site where the work is the content.
• A holding page for a business whose real presence is elsewhere.
• A conversion path you want to control, because there is nowhere else to go but down the page to the call to action.

When it is the wrong choice

• You want to rank for several different things. One page, one title, one meta description. A site targeting "wedding photographer manchester" and "family portrait pricing" needs two pages.
• You publish regularly. A blog is many URLs by definition — adding a blog covers grafting one on.
• You sell more than one product. A store needs product URLs.
• The content is long. Ten sections on one page is not a one-page site, it is a long page nobody finishes.
• Different audiences need different entry points. Search sends people to a page, not to a section.

The honest framing: a one-page site optimises for the visitor who arrives at the top and reads down. It de-optimises for the visitor who arrives from a search for something specific.

Building it

1. Use a full-width page template. Set it as the front page in Settings → Reading. A template with no sidebar gives sections the full viewport — templates and themes covers where that option lives in each theme family.

2. Build sections as blocks or rows, each one a full-width group with its own background and generous vertical padding. Sections should be visually distinct enough that scrolling past one registers as a transition.

3. Give every section an id so the menu can target it. In the block editor, select the outer group and set the HTML anchor field in Advanced. Then link to #about from the menu.

4. Build the menu from custom links. In Appearance → Menus, add Custom Links with #about, #services, #contact as the URLs. If the menu must also work from another page, use the full path: /#services. Menu mechanics are in how to create a WordPress menu.

5. Add smooth scrolling with CSS, not a plugin:

html {
    scroll-behavior: smooth;
}

/* Stop a sticky header from covering the section heading. */
:target,
[id] {
    scroll-margin-top: 6rem;
}

scroll-margin-top is the line everyone omits, and its absence is why anchor links on sites with sticky headers land on the wrong place. Where to put this CSS is covered in how to add custom CSS.

6. Respect reduced motion. Smooth scrolling can be unpleasant for some visitors:

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

Get the SEO you can get

You cannot target ten queries, but you can do the single page properly:

• One clear h1 naming what this is. Section headings are h2.
• A title and meta description written for the one query you want.
• Real headings, not images of text, in every section.
• Fast loading, because everything is on one page — see performance below.
• Structured data for the organisation, and for the event or product if there is one.
• Anchor links in the sitemap do not create pages. /#services is the same URL as /. Search engines index one page, however many anchors it has.

If you later need to rank for a second topic, that is a second page. The wider checklist is in the WordPress SEO checklist.

Performance matters more than usual

Everything loads at once: every section's images, every background, every script. A one-page site with six full-width photo backgrounds is a slow site by construction.

• Optimise and correctly size every image — image optimisation.
• Lazy-load everything below the fold, but never the hero image, which is almost always the largest contentful paint.
• Reserve space for images and embeds to avoid layout shift as the page fills in.
• Be sparing with sliders and video backgrounds. They are the two heaviest things people put on one-page sites.
• Measure the whole page, not the top of it — how to speed up a WordPress site.

Plan the exit before you need it

Most one-page sites eventually grow. Make that cheap:

• Keep each section's copy self-contained, so it can become a page with minimal rewriting.
• Do not hardcode #anchor links in body content; they break when a section becomes a page.
• When a section does become a page, keep a short summary in place on the front page and link to the full version.
• Add redirects only if a URL actually changes — moving a section to a new page creates a URL rather than changing one.

Common mistakes

• A sticky header with no scroll-margin-top, hiding every heading you jump to.
• Ten sections. If it needs ten, it needs pages.
• No visible way back to the top on a long page.
• Anchor links that break when a section is renamed or removed.
• Treating it as permanent. Most one-page sites are a stage, not a destination.
• Six full-screen background images, which is the most common cause of a one-page site being slow.

Verify

On a phone, on real network conditions: every menu link lands on the right section with the heading visible, the page is usable while images are still loading, the call to action is reachable without scrolling the whole page twice, and the page passes your performance targets as a whole document. Then check it with a keyboard alone — anchor navigation is easy to build in a way that keyboard users cannot follow.