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.