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.

 

3 Comments


  1. Ahhh David, you make it all seem so easy. It looks like Greek to me. Lol. I’m sure your demo page will help a lot of us less experienced get a better understanding. 🙂

    Reply


  2. Thank you for this wonderful post! I actually don’t have any idea what jQuery is but I’ve read from here http://www.lionleaf.com/blog/what-is-jquery/ that it makes every movements of a website like animation and such, easier. And it also works with WordPress, right? But I was wondering would it also work even if I use different web browser like Opera or Safari?

    Oliver

    Reply


    1. Hi Oliver. jQuery is a JavaScript library that lets you do a lot of things, including animations. And yes, it works with WordPress (it actually comes packaged with WordPress). jQuery also supports different browsers: https://jquery.com/browser-support/

      Reply

Leave a Reply

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