Member Avatar for kimmi_baby

Hi there,

I'm interested in creating a one page website with wordpress (the one with multiple pages in one with the scrollbar). I was curious whether anyone knows of a great website that has tutorials for this or someone that can give me a bit of information on how to make one.

Thanks!

  • 3 Contributors
  • 2 Replies
  • 123 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by bestwsd

Dani AI

Generated

Three practical routes for a WordPress one‑page (scrolling/sectioned) site, tied to the suggestions already posted by , and :

  • Use a ready-made one‑page theme or a page builder (Elementor, Beaver Builder, block patterns) for the fastest, least‑technical path — this matches ’s “use themes/widgets” suggestion.
  • Use a focused scrolling library (for example fullPage.js) when you want tight, animated full‑screen sections and built‑in navigation.
  • Build a custom front‑page template and anchor navigation if you want full control. ’s demo is a good concept for swapping content, but for a full scrolling front page the modern approach is to give each section a stable ID, connect menu links to those anchors, and manage highlighting/URLs with IntersectionObserver and the History API.

Minimal, practical steps for the DIY approach:

  1. Create a Page and design the sections (each with id="…") and set it as the static front page (Settings → Reading).
  2. Build a menu with Custom Links pointing to #section-id.
  3. Use CSS for full‑height sections, smooth scrolling and reduced‑motion safety:
html { scroll-behavior: smooth; }
main { scroll-snap-type: y mandatory; }
section { min-height: 100vh; scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
  1. Use IntersectionObserver to update the active nav item and history.replaceState to keep section URLs shareable (and call section.focus() or set tabindex="-1" on targets for keyboard/screen‑reader focus).

Accessibility, SEO and performance notes: ensure clear heading structure (one H1), landmark roles/aria labels for regions, respect users’ “reduced motion” preference, lazy‑load heavy images, and remember single‑page sites can limit separate meta pages — use pushState/fragment URLs and structured data where needed.

Further reading: IntersectionObserver and CSS scroll behavior on MDN, and libraries such as fullPage.js for ready scroll effects.

Recommended Answers

All 2 Replies

Member Avatar for gon1387

What you need to learn is some CSS, and jQuery. Although jQuery's optional, if you're not that familiar with vanilla javascript, then it's a good choice to use.

If you need your content to be fetch from the server, AJAX's needed.
Here's a simple code I made to give you some headsup: JS Fiddle Example <- Check this link

HTML:

<div id="wrapper">
  <div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  <div class="contents showCont">This is content one</div>
  <div class="contents">This is content two</div>
  <div class="contents">This is content three</div>
</div>

JAVASCRIPT:

$(document).ready(function(){
  $("div span").on('click',function(){
    var $this = $(this),
        targetContent = parseInt($this.html())-1;

    //remove the corrent content from view
    $("div .showCont").removeClass("showCont");

    //show the selected content
    $(".contents:eq("+targetContent+")").addClass("showCont");

  });
});

CSS:

.contents{
  display:none;
}
.showCont{
  display:block;
}

/* Nothing important */
div span{
  border: black solid 1px;
}
Edited by gon1387
Member Avatar for bestwsd

in wordpress you can control this setting with widgets....... as per your need you need two col website ......... search google you can find many free wordpress theme as per your choice.

here you can find theme.

wordpress.org/extend/themes/browse/popular/

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.