How to create one page website with any WordPress theme

We get a lot of questions about how to make one page website or if we sell one page WordPress themes. Let me answer both of these questions right at the beginning. Every WordPress theme can be a one page website and I will show you just how simple it is.

What Is a One Page Website?

One page website is nothing more than a website with all the essential content on a single page, usually homepage.

It’s mostly used by businesses that want to promote a single product or a service in a clear and direct way. Some examples are showcasing a portfolio to your clients, organizing an event, or starting a new business.

When on a one page website, a click on navigation links won’t send you to a new page but it will jump or scroll down on the same page to the content section connected with the link. This can make the user experience much better and increases user engagement.

There are many one page WordPress themes available online but like I’ve already said, we can turn any theme to a one pager with just a little bit of work.

How to Create One Page Website With WordPress?

Anchor links

For a basic one page website, all we need is a menu, content and anchor links. I believe you all know what menu and content do, so let’s talk a bit about anchor links. Anchor links are made from a normal link, which is pointing to the anchor and the anchor itself. Links pointing to the anchor are normal links, which start with the # character. And anchor itself is a specific place somewhere on your page. Let’s take a look at a simple example.

This is our link in the menu which is pointing to the anchor:

<a href="#middle">Go to the middle</a>

And this is our content with the anchor itself:

<h1>Learning about anchor links</h1>
<p> Some lorem ipsum content ….</p>
<h2 id="middle">Middle of the page</h2>
<p> Some lorem ipsum content ….</p>

In this case, #middle is our anchor link and id=”middle” is our anchor. When we click on the link “Go to the middle” we will jump to our anchor with the “Middle of the page” title. That’s it! This is how we can make the most basic one page website. You can add as many anchors as you want on your website. Let’s take our newly acquired knowledge and use it on a WordPress site.

Create Anchor Links With the WordPress Menu

Just for this purpose, I’ve already made a simple one page website with our GrowthPress theme, which will be our practical example. Firstly, I’ve created a new page and added some content. Content consists just of some paragraphs and titles. We can add anchors on almost any HTML element, but in our case, we will add it to all titles in the content.

Anchor for one page WordPress website

You can see from the screenshot, that in order to edit HTML of the content, we will need to change editor from Visual to Text. We can now see all the HTML tags in our content. In our case, all the titles use <h2> tag and we will use them for adding anchors. Just like in the screenshot above, you will need to add id with the anchor on those tags. For example: <h2 id=”our-anchor”>Some Title</h2>. Note that anchors are written without #, but all the anchor links must start with the #. Once we added all the anchors in our content we can connect them with anchor links.

If you are familiar with WordPress, you will know that we can change menu links in the wp-admin -> Appearance -> Menus and this is exactly where we create our anchor links.

Anchor links for one page WordPress website

From the screenshot, you can see that I’ve selected Custom Links and instead of classical URL, I added #about-us anchor link. A click on that link will now jump to our anchor id=”about-us” in the content. Once we added all the anchor links, our simple one page website is finished. Click on the newly created links and see it for yourself!

Smooth Scrolling

Yes, I totally agree, the one page website we did until now is great, but those instant jumps are not as awesome as smooth scrolling, right? To achieve smooth scrolling, we will need to add a little bit of javascript code to our website.

Most of the premium themes have some kind of field for adding custom code. For example, in our themes you can go to the wp-admin -> Customizer -> Theme Options -> Custom Code, where you will find the fields which you can use for adding some custom code like we will do now.

If your theme doesn’t have a place for the custom code you can use a suitable plugin. I would recommend Insert Headers and Footers plugin from WPBeginner. Once you activated the plugin, you will find fields for adding custom code in the wp-admin -> Settings -> Insert Headers and Footers.

Paste the code below in one of the fields (we recommend to use scripts in footer setting) and now you have smooth scrolling on your anchor links. Congratulations! You just made one page website with any WordPress theme!

<script>
( function( $ ) {
  $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) {
    if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) {
      var hashStr = this.hash.slice(1);
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + hashStr +']');
      if (target.length) {
        $('html, body').animate({ scrollTop: target.offset().top }, 1000);
        window.location.hash = hashStr;
        return false;
        e.preventDefault();
      }
    }
  });
}(jQuery));
</script>

The code above will animate the scrolling effect when you click on an anchor link and it will also update the current browser URL to reflect the clicked anchor link. Check our end result on finished one page website.

How to Set Offset for Smooth Scrolling?

In case you have fixed sticky menu I would recommend to also set offset, so the start of the content starts below your sticky menu. To achieve that you will need to edit this line of code:

$('html, body').animate({ scrollTop: target.offset().top}, 1000);

The only thing we need to do here is to add a value of our offset. It should be at least as big as the height of your fixed sticky menu.

$('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

With that, we will avoid a problem where the start of your content hides behind the menu.

Conclusion

We really get a lot of questions, asking if we have some kind of one page themes and I believe the situation is the same with other theme authors. This article should make it clear, that all WordPress themes can also be used as one page websites and if you want, you can change your current website to a one pager in no time. Although, the question, if it is better to use single page or multi page website, is so extensive that it deserves its own article.

Let me know if the article helped you understand one page websites better and leave me a comment if you have any additional questions.

Take a Look at Our WordPress Themes

Choose from a wide range of beautiful niche designs that you can try for free.

View All WordPress Themes
About the Author
I started working on the web in primary school. Since then, I have accumulated a lot of experience and always strive to write simple and efficient code. When I am not coding, you will find me in nature or sitting comfortably in front of a good movie.