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.
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.
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.
Pros of One Page Websites
Now that you know how to create a one page website, let’s go over the pros of using a one page website.
One page websites provide better mobile user experience
One page websites consist of a single, long-scrolling page that’s perfect for mobile viewing. Think about Facebook and its News Feed. You can’t help but to keep on scrolling further down the rabbit hole. A one page website is designed to do just that and the continuous scrolling lends itself perfectly to mobile devices.
Given the limited amount of screen real estate on mobile devices, it’s a lot easier to keep scrolling down than to figure out where the menu is hiding and then clicking the correct link to get to the next page of your website. In other words, a one page website will provide a great user experience for anyone who visits your website on their mobile device.
One page websites require less text
A traditional, multi-page website requires a lot of text so it doesn’t look too empty or, worse, unfinished. Contrast that to one page websites that will look cluttered and overwhelming if you have too much content. As such, you’ll want to keep your copy to a minimum and use short sentences and paragraphs to convey the most important information.
Another benefit of this approach is the fact that writing copy can be one of the more daunting tasks associated with launching a website. A one page website could be a great choice if you don’t have your website copy fully fleshed out.
One page websites work well with images
Images can do wonders for any type of website, one page websites included. In fact, when you use images paired with the parallax effect, you can produce a visually appealing effect on your website.
Even if you decide not to use the parallax effect, you can still use images effectively on a one-page website. You can use them to differentiate between different sections, not to mention share photo galleries or portfolio images.
You can also take advantage of images to boost your website SEO since images tend to appear in search engine results when optimized correctly. As such, be sure to add name your images using descriptive titles and add alt tags to each image you add to your site.
One page websites can boost user engagement and conversions
According to one study, a one page website can lead to higher conversions compared to its multipage counterpart. The reason behind this is simple: a one page website is usually very focused and designed to get visitors to take action.
It has a more focused message and it’s easier to understand for your visitors what you want them to do when they reach the end of the page.
When you only have one choice, it’s easy click that button or call to action rather than go from page to page wondering what you should do next.
One page websites are easier to navigate
It’s also worth mentioning that one page websites are easier to navigate. Since everything is on one page, it’s very hard to get lost and find your way back to the beginning, especially on mobile devices.
While you can use anchor links to jump to different sections of the page (as shown in this article), it’s just as easy to scroll back up or down and find the section you want.
In addition to that, a well-designed one page websites leads the visitor on a journey that tells the story of your business or brand in a logical manner.
One page websites make it easier to target a specific audience
As mentioned earlier, single page websites are designed to get visitors to take action. You can use this to your advantage and target a very specific audience that’s ready to take the next step. By leading them through the different sections of your website, you can present your product or service, show them how it solves their problem, and offer them the solution in the form of a call to action.
This approach works great when you’re targeting a very specific keyword or audience that already knows they have a particular problem and are looking for the solution.
Cons of Using a One Page Website
With pros out of the way, let’s take a look at some of the disadvantages of using a one page website.
It will be harder to analyze Google Analytics data
By now, you probably know that Google Analytics can give you heaps of useful information about your website visitors. Once installed on your site, you can see which pages are popular, which posts are bringing in new visitors, and which pages need optimizing to get people to stay longer on your site.
With a one page website, you are limited to one page alone. Your visitors are landing on the same page and dropping off on the same page which makes it harder to know what parts of your website need to be improved. If you decide to go the one page website route, be sure to sign up for a tool like Hotjar to get a visual heatmap of how people are using your website.
Sharing your website on social media is trickier
With a one page website, you only have one URL to share on social media. This can quickly get repetitive, not to mention it doesn’t provide a lot of opportunities for sending people to different parts of your website to find answers to their problem. Once you share your main URL, your entire website is shared instead of a particular page or section like you can do with a multipage website.
An easy workaround would be to incorporate a blog on your website where you can share useful and helpful content that will draw your audience in. This makes it easier to share your website on social media while still keeping the majority of the information condensed to one page.
One page website might take longer to load
Depending on the size of your one page website and the type of content you share, be aware of the fact that it might take longer for your website to load.
Generally speaking, one page websites tend to be pretty light, however if you have a lot of images that aren’t optimized for the web, you will experience slow loading times. The same applies if you have a lot of video content on your site.
As such, it’s important to save your images in the appropriate format as well as to compress their size before adding them to your site. Another thing to consider is using lazy loading for images and videos to make them load when the user scrolls down to that particular section of your site instead of loading them immediately.
You are limited with keyword targeting
A one page website won’t provide you with many opportunities for targeting multiple keywords. With a multipage website, you can have a separate page for each keyword you’re trying to target. A one page website doesn’t work the same way.
One page websites, as mentioned in the pros section, are designed with a specific purpose and audience in mind. That usually translates into targeting a specific keyword and its variations which means you’re better off creating a multipage website if you need to target multiple, distinct keywords.
While there is no rule that says you can’t incorporate more than one distinct keyword per page, you won’t be able to optimize your page adequately, especially when you take into consideration that light copy works better with one-page websites.
You can’t use advanced SEO tactics
Speaking of SEO, a one page website doesn’t allow you to use advanced SEO tactics known as siloing. Siloing refers to the practice of structuring your website into main areas of interest so you can demonstrate your authority in those areas. In layman’s terms, it’s the practice of creating categories and subcategories to organize your content.
The main benefit of siloing is that it opens up possibilities for ranking for a multitude of keywords and keyword phrases that cover almost all questions an interested visitor might have, as well as cover all possible objections.
While multi-page websites excel at this, one page websites would quickly become too overwhelming and cluttered, leaving your audience frustrated.
One page websites can lack in providing details
Lastly, due to short and concise copy and messaging, one page websites may lack in providing your visitors with all the necessary details. This can then lead to an increased number of emails asking for clarifications or leaving your visitors confused.
You can overcome this problem by adding a blog to your one page website and providing visitors with more in-depth content and answering questions as they arise.
Should You Use a One-Page Website?
As you can see, there are certainly advantages and disadvantages to using a one-page website. So how do you know if a one-page website is the right choice for your business?
If you’re just getting started with your business and generate a lot of business through word of mouth, a one-page website allows you to put your business online without spending too much time on design and development.
If, on the other hand, you’d like to focus on getting more organic traffic by focusing on SEO and if you are expanding your business operations, then a multipage website would be better suited for you.
In the end, it’s a matter of personal preference and your business goals. Evaluate where you are with your business and take note of what you’re trying to accomplish. Then, consider the pros and cons mentioned above before making the final decision.
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. We’ve also covered the pros and cons of one-page websites and shared how to decide if this is the right choice for your website.
Let me know if the article helped you understand one page websites better and leave me a comment if you have any additional questions.
