Fork me on GitHub

Wordpress Admin bar

In order to have a working admin bar on the wordpress websites that uses Highway, you will have to:

  • Remove Highway's listeners on Wordpress admin bar links
  • Replace every admin bar link's href value on page change

Here is an exemple of how it is possible to achieve this :

// File: main.js
const H = new Highway.Core();

// On load:
// Query admin bar links and detach them from Highway transitions
const adminBarLinks = document.querySelectorAll('#wpadminbar a');

// On page transition:
H.on('NAVIGATE_END', ({ to, from, trigger, location }) => {
  // Query admin bar links, and new page's admin bar links
  const adminBarLinks = document.querySelectorAll('#wpadminbar a');
  const newAdminBarLinks ='#wpadminbar a');

  // Replace every admin bar link's href value with new value
  for (let i = 0; i < newAdminBarLinks.length; i++) {
    adminBarLinks[i].href = newAdminBarLinks[i].href;

  // Detach admin bar links from Highway transitions

Anoter possibility is to only init Highway when the admin bar is not existing (thus the user not being an admin) in the DOM

const adminBar = document.querySelector('#wpadminbar');

if (!adminBar) {
  const H = new Highway.Core();
  // ...