Does ZURB Foundation Work With WordPress jQuery?

If you’ve ever used ZURB Foundation with WordPress, you’ll likely run into a jQuery version problem. Foundation 5 uses jQuery 2, but WordPress, as of version 4.1, loads jQuery 1.11.1. If you’re tempted to dequeue WordPress’ jQuery, be careful. Since WordPress loads its own jQuery in no-conflict mode, removing it may create a chain of problems. So what are we to do if we want to use Foundation with WordPress? Luckily, we have a few options.

Use the WordPress Core jQuery

Most of the Foundation framework works quite well with older versions of jQuery. For my own work, I have been using the WordPress core jQuery with Foundation with few problems. But to be sure, I put together a quick page for users to test different versions of jQuery against different versions of Foundation using the Foundation kitchen sink. You can test Foundation versions as far back as 4.0.4 and jQuery versions back to 1.2.3. From my own tests with the page, Foundation works up to jQuery 1.7.0. Anything earlier than 1.7.0 is incompatible with Foundation 5. The test can be found at:

http://davidsutoyo.com/labs/foundation-tests

As a bonus, I added another page to test the base styles for each version of Foundation. Go ahead and give it a spin!

Load jQuery 2 in No-Conflict Mode

Before we dive into the code, I would recommend reading this writeup about how no-conflict works. Basically, jQuery.noConflict() allows you to load different versions of jQuery without, well, conflict. What’s important to keep in mind is how you call no-conflict mode. Based on the recommendations of the linked article, here are the steps you can take:

1. Load your Foundation jQuery after the WordPress jQuery call. For the most part, the standard call to wp_enqueue_script should to the trick.
2. Load other necessary Foundation javascript files
3. Call no-conflict mode on your Foundation jQuery, and assign it to your very own special variable: var jQuery_F = jQuery.noConflict(true);
4. You can then initialize and call Foundation functions using your special variable, for example: jQuery_F(document).foundation().foundation('joyride', 'start');

Remember to use the special variable whenever you’re dealing with Foundation elements. That’s it!

For your convenience I’ve also put together a demo page that loads Foundation’s jQuery in no-conflict mode concurrently with the WordPress version of jQuery: http://davidsutoyo.com/labs/foundation-tests/noconflict

That’s pretty much all there is to it. However, if you’re looking for a WordPress starter theme that integrates Foundation, consider looking at my own Hybrid Foundation.