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
0 Comments