In this tutorial, we’ll cover how to create the infamous “one page” website. The end result is that we want to setup a single homepage, and have the site’s main menu link through the sections of this single page of the website. When clicking the links on the main menu, we want to see the window scroll to that section of the current page.
From the User Side of Things in Your Admin
Setup a Custom Layout
For your site’s homepage, we’re going to setup a custom layout. If you’re unfamiliar with how to do this, see this video.
Now, in our custom layout, we’re going to setup our elements within sections, and then give those sections labels. Later, we’ll take advantage of these labels to link to the sections. So make sure you set them in a format that can be used as an HTML ID like, about or contact-us, with all lowercase letters and no spaces.
Apply Page as Your Front Page
As with any website, remember to apply this page as your static front page, so WordPress uses it as the homepage of your website. Go to Settings > Reading > Front page displays, and select the page you just created.
Setting up Your Main Menu
In our site’s main menu, applied to the “Primary Navigation” theme location at Appearance > Menus, we’re going to link to these different sections of our custom layout, to match the labels we setup.
For each menu item use the “Link” section to add in a custom link. For each URL we want to link to the ID prefixed with a hashtag #. So, for example, when linking to the section with ID about we’ll use the URL #about.
After we’ve added all the menu items in this way, we should end up with something like this for our main menu.
Child Theme Customizations
Filter HTML ID’s of Sections to Use Labels
The first step is to tweak the Layout Builder plugin to output the sections using HTML ID’s that match what we setup for labels in our custom layout, because this isn’t done by default.
/**
* Filter HTML ID's for sections in custom layout to
* use labels set in Builder user interface.
*/
function my_section_html_id( $section_id, $layout_name, $layout_id, $data ) {
if ( is_front_page() ) {
$section_id = $data['label'];
}
return $section_id;
}
add_filter( 'themeblvd_section_html_id', 'my_section_html_id', 10, 4 );
At this point, everything should be working. We’re just using the basics of HTML, in linking to the ID’s. When we click a link on the main navigation, the window should immediately jump down to the section.
However, most people want to see a little extra javascript animation here, with an animated scroll to the different sections. This adds a little more flare to the whole concept, and typically what you’d see in the modern one-page website. So, read on!
Add a JavaScript File (If You Don’t Have One)
If you’re not doing any JavaScript customizations yet from your child theme, you need to add a JavaScript file. So first, in your child theme’s root directory just create an empty file named theme.js.
Then, in your child theme’s functions.php, we need to tell WordPress to include this JavaScript file, which is known as enqueuing the JavaScript file.
/**
* Include JavaScript file.
*
* This example assumes you have a theme.js file
* in the root directory of your child theme.
*/
function my_scripts() {
wp_enqueue_script(
'my-script',
esc_url( get_stylesheet_directory_uri() . '/theme.js' ),
array( 'themeblvd' )
);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
Add the Animation in Your Javascript File
In our javascript file, we’re going to be utilizing the jQuery library, which your theme has already included, like most WordPress themes.
We’re just going to bind our animation to the click action of top-level items of the main menu.
jQuery( document ).ready( function( $ ){
/*
* Target links in the 1st level of the primary navigation
* and sticky menu navigation to animate to their hashtags.
*/
$( '.header-nav, .menu-sticky' ).on( 'click', '.tb-primary-menu > li > a', function( event ) {
event.preventDefault();
$( 'html, body' ).animate( {
scrollTop: $( this.hash ).offset().top
}, 1000 );
} );
// Close mobile menu, when navigating to link.
$( '.tb-mobile-menu > li > a' ).on( 'click', function() {
$( 'body' )
.removeClass( 'mobile-menu-' + themeblvd.mobile_menu_location + '-on' )
.addClass( 'mobile-menu-' + themeblvd.mobile_menu_location + '-off' );
$( '.tb-nav-trigger' ).removeClass( 'collapse' );
} );
} );