01/23/2026
https://clickfoundry.co/blog/adding-barba-js-to-the-wordpress-framework/
🚀 Adding Barba.js to a Custom WordPress Theme
I’ve rebuilt WordPress base theme and and integrated Barba.js for smooth, app-like page transitions.
Barba is easy on static HTML sites. WordPress? Not so much 😅
The challenge is getting Barba to play nicely with WordPress’s dynamic templates, plugins, and script loading—without breaking transitions or double-initializing JS.
In this post I walk through:
• How WordPress templates actually map to Barba’s wrapper vs container model
• Where Barba belongs in header.php, index.php, page.php, etc.
• Enqueuing Barba + GSAP the “WordPress way” (no package manager rage)
• Using namespaces to control transitions cleanly
• A simple GSAP transition demo (ketchup & mustard vibes 🌭)
• Real-world issues: plugin re-initialization, script lifecycle problems, and why things like Contact Form 7 silently break if you’re not careful
This setup powers page-to-page transitions on humnlab.com, including homepage → project animations, and it’s now my go-to foundation for high-end client builds.
If you’re building custom WordPress themes and want SPA-style transitions without ditching WordPress, this one’s for you.
👉 Full walkthrough + code samples on the blog
(And if you’ve fought Barba + WP before, drop your pain points in the comments—I’m collecting them.)
Learn how to integrate Barba.js with WordPress for smooth page transitions. Complete tutorial with code examples, template structure, and GSAP animations.