Using ZURB’s Foundation Framework 4 and 5 with WordPress jQuery

Foundation FrameworkThe menu toggle in the Top Bar (on small screen sizes) on ZURB’s Foundation Framework 4 and 5 doesn’t work when you use the default jQuery that comes with WordPress, however it works when you use the standard jQuery from Google’s CDN.

You shouldn’t load a different jQuery in WordPress otherwise you could break some plugins. The Zepto library that comes with Foundation 4 doesn’t support Internet Explorer so it’s best to just use jQuery and not load Zepto. Whilst Foundation 5 comes with jQuery 2 it is compatible with jQuery 1.10x upwards as they use the same API’s.

The issue is caused by jQuery.noConflict();

The solution I found was to wrap the foundation.min.js inside:

(function($) {
// the original content of foundation.min.js
}(jQuery));

and then initialize with: jQuery(document).foundation(); instead of $(document).foundation();

Update (10 October 2013):

In your initialization script just above your </body> tag, instead of:

<script>
$(document).foundation();
</script>

Change to

<script>
jQuery.noConflict();
jQuery(document).foundation();
</script>

If you’re using wp_enqueue_script to load foundation.min.js then I recommend you move the initialization script to a separate file and wp_enqueue_script this as well to ensure it’s loaded after foundation.min.js has loaded.

I’ve created a responsive starter theme based on Foundation Framework that uses this method. It can be found at https://github.com/thewirelessguy/cornerstone

  • http://lkb.cc/ Leonard Bogdonoff

    Thank you good sir.

    • http://twitter.com/wirelessguyuk Stephen Mullen

      You’re welcome.

  • Christopher Vaught

    Sadly Zurb does not support IE.

    • http://twitter.com/maietta Nicholas Maietta

      Sadly? Not sad at all… what’s sad is people still using it. Today, i just read that Microsoft publicly announced a major security flaw in IE 8 and advising people to upgrade their browser to either IE 10, (or 9) or use alternative browsers such as Chrome, Firefox or Opera. It is a serious flaw they are not rolling out a fix for just yet.

      As a web developer and the author of my own content management system with it’s own unique approach to the user interface, that trying to make things work for IE is a joke that just isn’t laughable anymore. I force chrome frame prompts and messages alerting IE6/7/8/9 users to do something. You don’t have to upgrade your machine to use a “modern” browser, you have options. If you are using proprietary systems that use IE8 internally, well then you don’t need to surf the web on the same browser. I’m sorry, but i’ve been done with the IE vs everything else argument for many years. I saw this dead a long time ago, but for some reason, it just won’t die.

      I applaud Zurb for providing making this move. Those who don’t like it, don’t have to use the framework. It’s pretty simple. It’s about choice, be glad you have the choice. If it’s really a concern, you can keep coding CSS and JS the old ways. Even jQuery has dumped support for IE 6/7/8.

  • Adal Bermann

    Thank you so much! I was wondering why only the CSS was working for a few minutes till I read this post. You could also specify that it’s best to remove the zepto option script and instead load jquery 1.9.1 from the Google CDN in the footer above foundation.js

    • http://twitter.com/wirelessguyuk Stephen Mullen

      I’ve updated the post to mention Zepto. The reason not to use jQuery from the Google CDN is that it may break plugins.

      • Adal Bermann

        Awesome. I usually drop in a little re-registration of jQuery using the CDN to override all others because I hate when scripts load several times (like when using plugins). But it’s true that it requires some extra attention and can cause a headache here and there.

        wp_deregister_script(‘jquery’);
        wp_register_script(‘jquery’, ‘http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js’, ”, ’1.9.1′, true );
        wp_enqueue_script(‘jquery’);

  • Jeremy

    Thanks for the fix! I experienced this issue while using Foundation for WordPress starter theme. http://fwp.drewsymo.com/. On top of doing what you suggested I also had to upgrade the foundation.min.js to version 4.3.1 (previously version 4.0 I believe).

    I will consider trying you cornerstone starter theme in the future. :

  • Andrew Brown

    Does this work with Foundation 5 – to resolve the conflict between the version of jQuery loaded by WP and the 2.0 version that Foundation uses?

    • thewirelessguy

      Yes. This site uses this method and uses Foundation 5.

      • Andrew Brown

        So do I have it right that the way you load this means that wordpress and plugins use the WP core shipped version of jQuery (1.10. I think?) but Foundation only has access to JQuery 2.0. Is that correct?

        • thewirelessguy

          jQuery 2.0 is API-compatible with 1.9 upwards. jQuery 2 just removes support for older browsers to reduce the size. WordPress loads jQuery in No Conflict Mode, however the jQuery that gets bundled with the Foundation 5 download or loaded from Google’s CDN doesn’t. This is why the jQuery.noConflict(); is needed.

          • Andrew Brown

            Thanks – so the top and bottom of it is that I can safely take care of it in the way suggested here?

            Wonder why this hadn’t been addressed by the folks at Zurb?

          • thewirelessguy

            They built it for their client work, but decided to open source it. I think they’re Ruby developers (not WordPress developers). Most likely they only ever use the standard jQuery as it comes from the jQuery website. This is more of a WordPress issue. It’s set this way to reduce conflicts with plugins. In a non WordPress environment this feature may not be needed.

          • Andrew Brown

            What I still don’t understand here is where/how the 2.0 version of jQuery is being called. I’ve looked in your cornerstone theme too – and can only see the shipped version of jQuery being called.

            And pointers would be greatly appreciated.

          • thewirelessguy

            jQuery 2 isn’t been called. Cornerstone uses the version of jQuery that comes with WordPress. At the moment that’s jQuery v1.10.2 with noConflict enabled (so that it plays nice with other JavaScript libraries that developers may use in plugins). Foundation ships with jQuery 2, but works perfectly fine on jQuery 1.10.x as you can see on this website.

          • Andrew Brown

            Hey thanks again for reply. Yeah I have some features working in the WP core version of jquery, but there must be a possibility that I could stumble on some feature of Foundation 5 which needs me to have jQuery 2.

            I’m looking for a way to load Foundation jQuery 2 but so that it causes no conflict with the version already loaded in WP – just in case I guess.

            I’m coming from Bootstrap to try out Foundation (I really like the look of it) so sorry for the questions. I really appreciate the help.

          • thewirelessguy

            The API calls are the same in 1.10.x and 2.x. jQuery 2 just drops support for older browsers like IE7 & IE8. Foundation 4 onwards dropped support for IE8 so it makes no sense to include jQuery 1.10.x in the download on their website since their main aim with v5 is to reduce bloat. In terms of WordPress development it’s easier to let WordPress do the job of updating jQuery so that there’s less maintenance to do on your theme and less chance of a plugin breaking because you haven’t updated in a while. The Cornerstone theme includes a CSS file to add support for IE8, though I’ve not fully tested it on v5.

          • Andrew Brown

            Thanks again for your response. It’s not that I want to support IE8 with this – this experiment with Foundation is for sites that don’t need those browsers. I just thought there was a need for 2.x jQuery with this version of Foundation – but I’m hearing from you that this is not the case at all, for any of the features? Have I understood correctly now?

            Thanks again for your time on this.

  • ExlAdm

    Hello thewirelessguy,

    I just want to say A MILLION ZILLION THANKS !
    I’m developing a WP theme using Foundation 5 and was having this particular issue.

    Your sublime idea of jQuery.noConflict(); solve my BIGGEST ISSUE ;) LOL

    I want to say that i promise you to have an in depth look at your beautiful theme,

    i just saw how YOUR CODE IS CLEAN :)

    I’ll tell you when my theme is done.

    Bookmarking your site !

    Just a quick question,

    Why does they ask us to load before on Foundation ? http://foundation.zurb.com/docs/javascript.html

    I found that loading it causes conflict issues for the js of Foundation plugins !

  • Jared

    Thank you, thank you!

  • opencodez

    Thanks you. Worked for me.

  • Justin

    Two words: Thank You! [fist bump]