wp-barba-page-preloader
Barba.js wrapper for WordPress. Prefetches pages for faster load times. Specify a wrapper around the content that should change; everything outside this wrapper (e.g. your header and footer) stays static between page navigations.
Install
npm install wp-barba-page-preloader
OR
yarn add wp-barba-page-preloader
Usage
In your WordPress template files:
<div id="main-wrapper"><!-- Everything outside this wrapper stays between page navigations. -->
<main class="main"><!-- Is replaced on page navigation with the content from the next page. -->
This content changes on page navigation.
</main>
</div>In your WordPress theme's Javascript:
import initBarba from 'wp-barba-page-preloader';
window.addEventListener('load', () => {
initBarba({
pageloadFunctions: [],
wrapperId: 'main-wrapper',
containerClass: 'main',
navLinkSelector: 'my-nav-links'
});
});
The settings object.
| Key | Type | Required | Description | Default |
|---|---|---|---|---|
| pageloadFunctions | array | false | An array of functions to run after each page navigation. | [] |
| wrapperId | string | true | The ID of an HTML wrapper around our main content area. Everything outside this container will stay static between page navigations. This ID must be in your template files. | main-wrapper |
| containerClass | string | true | A CSS class attached to the HTML element that is replaced on page navigation. The CSS class must be present in your template files. | main |
| navLinkSelector | string | false | A string to select in-site navigation links that exist outside the wrapper. An active CSS class will be added to any selected link corresponding to the current page URL. |
Warnings/Issues/To-Dos
-The Edit Post/Page link in the WP admin bar is not updated when navigating to a new page. One
workaround is to hide that link with the admin_bar_menu hook and place the edit post link in a
prominent position within the post.