How to integrate Swup in Wordpress?

See original GitHub issue

Guys, I need help integrating swup to my wordpress site. I try everything, put <main id="swup" class="transition-fade"> around content in my index.php, page.php, single.php, archive.php, search.php…

Create function in my function.php

 function pro_adding_scripts() {
	 wp_register_script('swup-pro-script', get_template_directory_uri() . '/swup.min.js', array('jquery'), '1.2', false);
	 wp_enqueue_script( 'swup-pro-script');
	 
	 wp_register_script('swup-pro-script2', get_template_directory_uri() . '/script.js', array('jquery'), '1.2', false);
	 wp_enqueue_script( 'swup-pro-script2');
}
add_action( 'wp_enqueue_scripts', 'pro_adding_scripts' );

import script in header.php

<script src="/swup.min.js"></script>
<script src="/script.js"></script>

Use this in my script.js file:

import Swup from 'swup';

const swup = new Swup({
 		LINK_SELECTOR: `a[href*="${domain}"]:not([data-no-swup]), a[href^="/"]:not([data-no-swup]), a[href^="#"]:not([data-no-swup]), a[xlink\\:href]`,
 	});

and add this css:

.transition-fade {
  transition: 0.4s;
  opacity: 1;
}

html.is-animating .transition-fade {
  opacity: 0;
}

Nothing happened… when press any link page just reloads normal. I’m not sure what I doing wrong.

Issue Analytics

State:
Created 4 years ago
Comments:17 (2 by maintainers)

Top GitHub Comments

2reactions

QuirkyWallacecommented, Jul 29, 2020

Hello,

I resolved the plugin not defined error by making sure I enqueue the plugin scripts before the Swup library and my JS script So the the order of scripts to be enqueued is:

Swup plugin scripts
Swup.js library
My Swup.js

I made sure the scripts are enqueued in this order by having cascading dependencies (second script has the first script as its dependency, third script has second, and so on and so on…) as well as giving priorities to my three enqueue functions.

Now all Swup scripts are enqueued and Swup is enabled on my website! …Although it looks like I still have to fix the theme loading styles after each page loads.

For anyone curious, I am using X Theme Pro and running a child theme. Thanks for all the help @nateads!

2reactions

nateadscommented, Jun 15, 2020

@CFMazzarago I’m running it on a local build right now, hope the below info helps. Inside functions.php where you enqueue your css and js files… wp_enqueue_script( 'swupjs', 'https://unpkg.com/swup@latest/dist/swup.min.js', array(), _S_VERSION, true);

Also anything relating to swup goes into a separate js file named “swup.js” wp_enqueue_script( 'swup', get_template_directory_uri() . '/js/swup.js', array(), _S_VERSION, true);

My swup.js file only contains… //Swup const swup = new Swup( { plugins: [ new SwupBodyClassPlugin(), new SwupScriptsPlugin(), new SwupScrollPlugin() ], });

Then add this just below your wp_enqueue_scripts so that your swup.js file is ignored on page load and you don’t get multiple instances… add_filter( 'script_loader_tag', 'my_script_loader_tag', 10 ,2 ); function my_script_loader_tag( $tag, $handle ) { if ( $handle == 'swup' ) { return str_replace( '<script', '<script data-swup-ignore-script', $tag ); } return $tag; }

It’s running for me with only a little bug of some of my carousel js isn’t loading on page transitions, but it does load on refresh. But hopefully the above info will get you a running version of swup to work with.

Top Results From Across the Web

Integrating Swup JavaScript with Wordpress Theme

First thing is that you should have tag inside body tag where you need transition to work. <body> <div id="swup"> {All content} </ ......

Body Class Plugin - Swup

import SwupBodyClassPlugin from '@swup/body-class-plugin'; ... To run this plugin, include an instance in the swup options. const swup = new Swup({ plugins: ...

Introducing Swup v2. It's been some time since we talked…

This story is about swup, its new features, and the motivation behind it. ... plugins for easy integration with WordPress in general, ...

Not compatible with swup - WordPress.org

On a new project I wanted to make use of swup (https://swup.js.org) which is a client side page transition engine. The header keeps...

How to integrate swup.js, animsition and barba.js in the bricks ...

Can someone guide me how to integrate these js libraries properly in the bricks child theme? I was trying to edit header.php with...