Implement barba v2 with WordPress

In this tutorial, I am explaining how to implement Barba.js. in WordPress project. At the time of writing this post, the current version of Barba is 2.9.7. I already explained how to implement the v1 of Barba in a previous tutorial. Here I will just mention the key difference.

Structuring Barba v2 in WordPress

According to Barba.js documentation, we should include two HTML elements to make it works.

Required tags for barba.js
<body data-barba="wrapper">
    <main data-barba="container" data-barba-namespace="home">
        ... content to be changed
    </main>
</body>

You can use alternative tags, they both can be div for example

As our example in the previous tutorial, I am assuming that we want to update the menu as well

header.php template
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="barba-wrapper">
footer.php template
</div>
<?php wp_footer(); ?>
</body>
</html>

Note that the #barba-wrapper element is opened in the header.php template and closed in the footer.php template

Also, note that the wp_footer() function has been called after closing #barba-wrapper which means that if you are calling your scripts in footer, they will not be reloaded on navigating to a new page. This will make your page transition much faster than the regular navigation.

Now, let us create our top menu template and include it in (for example) single.php template

topmenu.php template
<header>
    <nav>
        <!-- Setup your top menu here //-->
    </nav>
</header>
single.php template
<main data-barba="container" data-barba-namespace="single">
    <?php get_template_part('topmenu'); ?>
    <!-- The rest of your single.php content //-->
</div>

Now coming to the main difference between barba v1 and barba v2, here we are using ES6 and the version 2 of barba came with different hooks and features

app.js
import barba from '@barba/core';
barba.init({
});

In my website for example and on every page transition, there is a green rectangle that covers the screen then disappears after loading the new page. This animation takes 600ms so I had to delay switching to the new page until my custom animation ends. The Barba set up in my website became like this:

Using “leave” hook with delay
barba.init({
    transitions: [{
        name: 'transition-name',
        leave({ current, next, trigger }) {
		const done = this.async();
		setTimeout(() => {
			 done();
		}, 600);
	},
    }]
});

I am using the after hook, which enables me to access the new page HTML code, calling the argument as “data” for example, you can access the HTML code in data.next.html. After that, I am applying some filters to get the new body tag classes (which my CSS rules rely on) then firing the scripts that will be used in the new page and finally remove the green and show the new page

Using after hook
barba.init({
    transitions: [{
        name: 'transition-name',
		leave({ current, next, trigger }) {
			const done = this.async();
			setTimeout(() => {
			  done();
			}, 600);
		},
		after(data) {
			let parser = new DOMParser();
			let htmlDoc = parser.parseFromString(data.next.html.replace(/(<\/?)body( .+?)?>/gi, '$1notbody$2>', data.next.html), 'text/html');
			let bodyClasses = htmlDoc.querySelector('notbody').getAttribute('class');
			body.setAttribute('class', bodyClasses);
			scripts.init();
		}
    }]
});

Latest Comments

Jonny

Hi Feras,

Thanks for the article, very helpful. Would you be open to releasing a github with the source like you have for the barba v1 example?

Thanks 🙂

Reply
Alfred Marshall

Hi Feras thank you for the response and I solved the issue of the dashboard edit post issue but now the problem is I cannot have the classes that WP throws on the body when changing from one page to another. How can I do that?
Please your answer will be highly appreciated.

Reply
Alfred Marshall

When logged in, clicking on customizer and edit page on WP Dashboard it is not letting me go to that URL instead that redirects again me to the same page why is that? Does anyone have any idea? Is it only me who is facing these issues while you use Barba js, gap and WordPress together?

Please your answer will be highly appreciated.

Reply
Feras

Hi Alfred, so this happens only in the dashboard/customizer? I suggest you to load a script (only in the customizer) that disables Barba there. Check this action customize_controls_enqueue_scripts

tarzane

Thank you for that article it helped me a lot 👍🐱‍🚀

Reply
David Beecher

Hello,

I am just playing around with barba2.js and WordPress.

Can I just ask what does scripts.init(); relate to? The problem I’m having is that my script files that load in the footer arn’t being refreshed so things like sliders on internal pages break.

Thanks

DAvid

Reply
dotaled

Hi there and thanks for your tutorial!
I have the problem that the page always resets to the original page after a page change. If I’m coming from domain.com/contact and switch to domain.com/team, it would bring me back to domain.com/contact after a second or so.
Uncommenting body.setAttribute(‘class’, bodyClasses); stops this behaviour. Any idea what’s happening? 🙂

Reply
Feras

Hi dotaled
You can try enabling debug in Barba and check the console, make sure that the body variable is defined

Chai

Barba needs to be included on each page, it’s most likely not initiating on the next page load and goes back to the original page that was loaded the first time. According to this video. the author did it intentionally. (not wordpress oriented) but gives some insight. Hope this helps.
https://youtu.be/2AG4YwicMcI?t=460

Leave a Reply

Your email address will not be published. Required fields are marked *