Menu

How to use ZURB Foundation for Sites with WordPress jQuery

Foundation FrameworkThe menu toggle in the Top Bar (on small screen sizes) on ZURB’s Foundation Framework for Sites (4, 5 and 6) 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 and 6 use jQuery 2 it is also compatible with jQuery 1.10x upwards as they use the same API’s.

The issue is caused by jQuery.noConflict();

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