How to WordPress: Create a One Page WordPress Website from scratch or Premium WP Theme

Hey there, this is our new How to WordPress series. This is the first post on How to Create a One Page WordPress Website with WordPress but in the future, we will add new posts on How to create something useful in WordPress.

In this post, we will look in-depth how to create a useful One Page Website in WordPress. This article is organized in 3 parts. First, we will learn how to add One Page functionality to a WordPress Theme from scratch. Second, we will look a popular WordPress Theme and learn how to create a One Page Website with a Popular WordPress Theme. In the third part, we will learn, which is the best way to design a One Page Website. Ok, now take a coffee and start together to learn something new.

Add One Page functionality to WordPress

First, install your new WordPress Website with a simple theme or the default WordPress Theme, or start to modify your existing WordPress site. You need to download and set-up a OnePage Scroller javascript. You can find a lot of them in Github. My prefer script is jQuery-One-Page-Nav. It’s a lightweight jQuery plugin for the navigation on one-page sites. Ok, now I will list to you what you have to do:

• Get the jquery.nav.js file from Github and upload it in JS folder of theme that you use.
• Go to functions.php file of theme and add this lines at the end:

add_action('wp_enqueue_scripts', 'codeless_one_page');

/*
* Enqueue a script
*/

function codeless_one_page() {
  wp_enqueue_script(
    'codeless_one_page',
    get_template_directory_uri() . '/js/jquery.nav.js',
    array('jquery')
  );
}

•  Now go to the main JS file of your theme. At the end, add these lines

$(document).ready(function () {
     if(window.location.hash)
       $('nav .menu li a:not([href="'+window.location+'"])').parent().removeClass('current-menu-item');
     $('nav .menu').onePageNav({
      currentClass: 'current-menu-item',
      changeHash: false,
      scrollSpeed: 750,
      scrollThreshold: 0.5,
     });
});

• Now that you have configured the One Page WordPress functionality all you have to do is to go to Menu Settings and add a link like this to your custom menu: #features

• Now your One Page WordPress menu is ready, go to the content that you have created and organize it with HTML DIVs, for example:

<div id="#features">{YOUR CONTENT}</div>
<div id="#portfolio">{YOUR CONTENT}</div>

How to use a Premium One Page WordPress Theme

On the internet, you can find a lot of premium One Page WordPress Themes that you can use. A lot of them are with Page Builders like Visual Composer, that is the most popular one. In the next video, you can learn how to set up a One Page website with a Premium Popular WordPress Theme like Specular Theme

Design Trends & Best Selling One Page WordPress Themes

The purpose of a One Page is to show all the necessary content  for a customer on one page. In this way, the customer can view more easily all features and available needed information on a page. So, you need to organize it in that way that it stay simple in the same time. The modern one page, well organized, is composed in this way:

• One Large Slider (fullscreen in some case)
• 3-4 core features of product
• A brief introduction with image or video too.
• Some use cases of your product
• Your Staff
• Clients
• Call-To-Action

This is not so standard because it’s vary from the type of the web.

Look at this article for more information on trends and best themes: Best Selling and Top Rated One Page WordPress Themes