Lately, on the world wide web, there is a new trend when it comes to landing pages. More and more often we can see “one page” websites that look just like a very long slideshow. To be able to view different parts of the page the only thing you have to do is to scroll up and down. If the web page has a lot of content, endless scrolling can become very irritating for the web page visitor. In conclusion, having a menu in this cases becomes a necessity. This is why we will show you in this article how to create One Page menu in WordPress.
For what are One Page websites used
From own experience, One Page landing pages are mostly used for events (business conferences, weddings, workshops etc.). I also saw them implemented for small businesses, hotels or beauty centers. As a general rule, on websites that don’t have the need for multiple pages, as the information presented is limited.
Why should you use a One Page website
I can think of 3 reasons to use this kind of pages:
- They look cool – great design, structured information, easy to navigate
- Easy to build – working only on one page it’s definitely much easier than working on a website with dozens of pages
- Better ranking by search engines – this is probably the most important reason. You can present more content while making fewer HTTP requests to the server. As a consequence, the website will load much faster. It is a known fact that speed is one of the important facts when it comes to ranking.
How to create One Page menu in WordPress
The One Page menu helps you jump to a specific area of the page without being forced to scroll till you get there. To do this you need to use anchors. These are HTML tags used since the made of HTML language. After declaring these tags you need to create links in your menu pointing to those anchors.
We can declare these anchors with the following syntaxes (you achieve the same thing no matter which one you use):
- Using the anchor tag with name attribute:
- Assign an ID to any HTML tag with id attribute:
<h2 id="section_one">The first section</h2>
To declare any of these you need to be in the text mode of the WordPress page editor. After you set the anchors wherever you see fit in your web page, go to Appearance -> Menus. Create a new menu and save it. Instead of adding pages to the menu, you will have to add Custom Links. In the URL section put #<name of the anchor> while in the Link Text field put the text for the menu button. Have a look at the below picture:
How to set a page as front page / landing page
After completely building your page you have to set it as a front page/landing page in order for the website to become One Page. For this go to Settings -> Reading. In the Front Page Display section select A static page (select below) and chose the page you just created for this.
How to create One Page menu in WordPress – video tutorial
For a better understanding of how to create One Page menu in WordPress watch a specific implementation of it in the next tutorial.
Let us know in the comment area if you face any problems or if you need other advice regarding WordPress features. Thanks!
Tip: make your life easier with these “must have” plugins for WordPress.