Menu icon Foundation
JQuery version conflict with Wordpress

Hi guys. I'm concerned that Foundation requires jQuery 2.0, whereas Wordpress is using 1.10.

Wordpress advises that we use the version of jQuery that ships with it - so isn't Foundation going to cause issues?

Hope someone can help.

wordpress

Hi guys. I'm concerned that Foundation requires jQuery 2.0, whereas Wordpress is using 1.10.

Wordpress advises that we use the version of jQuery that ships with it - so isn't Foundation going to cause issues?

Hope someone can help.

Sam Jones over 5 years ago

Hi Andrew,

I guess it depends on the situation.

My reasoning for WordPress advising the use of the shipped jQuery is to provide a level playing field for plugins and themes to work with - this would apply for non-developer types throwing up a theme and plugins to suit their needs - I also don't think WordPress will upgrade the jQuery 2.x.x anytime soon and risk dropping IE8 support they are too big for that.

If you are using Foundation in WordPress development I would take a guess you a building something custom? In which case you know what jQuery functions you will be using for your theme so you can choose to use which ever version of jQuery you need (by using wp_deregister_script, wp_register_script and wp_enqueue_script if you are familiar?).

The only issue with the above is some WordPress plugins may not work as they are expecting and using an older version of jQuery. I think the chances of this happing being quite slim but it is a risk not 100% sure but the main difference between jQuery 1.x.x and 2.x.x is the browser support don't think they changed much else (don't hold me to that though!).

Hope that helps a little?
Cheers
Sam

Andrew Brown over 5 years ago

Thanks for the reply Sam.

I need to try and maintain no conflicts between the version of jQuery being loaded with Foundation and the WP Core version, mainly because of plugins. I create themes for clients but some then go off and add their own plugins at times - not to mention that some of the plugins I use may need to reference the WP Core version.

I'm familiar with wp_deregister_script, wp_register_script and wp_enqueue_script, but also I think it's just good practice to not load additional versions to avoid potential issues ( see for example this from Pippin: http://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/ ).

I'm just looking for a good and reliable way to make sure that there are no conflicts - but I'm struggling to find it.

Any further help from anyone would be greatly appreciated.

Best wishes, Andrew.

Sam Jones over 5 years ago

Hi Andrew,

Yeah I understand, I think there will be no perfect solution here as we are both trying to shoe horn a forward thinking framework into a 'for-all' CMS (and thats not a dig at WordPress).

I had a quick read of the article you supplied I understand what is being said BUT to be forward thinking like Foundation you have to break things sometimes. With this being said I understand your pain, I to do a lot of client work and they can be buggars! I always try to use as few external plugins as possible whilst building on WP as I like to know exactly what the code is doing and to prevent things breaking out of my control as such - I have my exceptions though. Each developer has their own way of doing things I guess.

Looking at the jQuery site, they are saying there is no difference in the API between the current 1.10.2 (ironically this is the library included in current WordPress 3.7.1) and 2.0.3 the only difference is the browser support. So working backwards I don't see a reason why Foundation wouldn't work with the current jQuery bundled with WP. Have you found any specific issues? I thought they just updated to 2.x.x to fall in line with the drop of IE8 support that came with Foundation 4?

I haven't played around with Foundation 5 and an older version of jQuery so not sure if there are specific issues.

Cheers
Sam

Andrew Brown over 5 years ago

Hey Sam. Yeah I seem to be discovering that the only difference with the jQuery versions is the legacy browser support, so I may not even need to call jQuery 2.0 in any case. Have opened another thread in the hope that I'll get some confirmation on that, but it seems ti be so.

I've not found any issues, just wanted to avoid running into them if they were known :)

Stef Serafin over 5 years ago

We work in WordPress everyday and use F5 for our framework and haven't had any issues. The only one that I'm staring at right now is for some reason there is a margin-top being added and hiding the top bar and off canvas menus. Other than that jQuery has been perfect.

Dan Hansen over 5 years ago

Hey Stef, I'm just starting to integrate Foundation with my WordPress sites. I've been having some issues getting the Foundation 5 jQuery/javascript files to work in no conflict mode. Would you care to share how you've set it up? I'm sure there are many folks who would be interested too!

Jade over 5 years ago

I'm interested too, I'm new to using Foundation and I've built a custom WP theme and so far it was working fine until we installed 2 plugins that are causing conflicts. I believe it's the jquery issue, because when I have those 2 plugins activated, the dropdowns and accordion menus stop working.

Chris Promotional over 5 years ago

Here's what you want to do - enable no conflict mode. I have this in my footer.php file:

jQuery.noConflict();
jQuery(document).foundation();

Don't forget to add the php tag that references your theme directory before the /js in the URL. Once you do that, that should solve your problem. :)

Ethan Hackett over 5 years ago

::Weeps tears of pure joy::
Thanks this just solved my DNN skinning issue.

Ziad Rahhal over 5 years ago

I just tested jquery-1.10.2 with the latest Wordpress version 3.8 and it seems Foundation 5.0 works fine using interchange, orbit and accordion. So far these are the only foundation-JS features I am using.

You need to be careful how you initialize foundation though:

 // works only with jQuery 2.0..
$(function( $ ) {
  $(document).foundation();
})( jQuery ); 
 // works with both jQuery 1.10.2 and 2.0...
jQuery.noConflict();
jQuery(document).foundation();

Rafi Benkual over 5 years ago

Chris is right,
to clarify

Add: jQuery.noConflict(); jQuery(document).foundation();

instead of: $(document).foundation()

Thomas E. Vasquez over 5 years ago

Actually you can use this:

 (function($) {
jQuery(document).foundation()

})(jQuery);

works well with no errors

Raphael Suzuki over 5 years ago

I never had a problem with Foundation and Wordpress' jQuery until version 5.2.x. All Foundation's plugins work fine, but they seems to slow down jQuery performance considerably, to the point of crashing it and prompting the browser to stop the script. It doesn't return any error, though.

Jade over 5 years ago

I'm back, still having conflict issues.

I tried adding the following:

 <script>
(function($) {
  jQuery(document).foundation() } )
  (jQuery);

</script>

and also tried replacing the default footer line with:

``` jQuery.noConflict(); jQuery(document).foundation();

but still no luck.

All this is because of a plugin the client needs to use, which calls jquery from within the plugin files. When I remove the link to js/vendor/jquery.js the gallery works, but then the mobile menu stops working.  So I thought that by adding code to use "no-conflict" it would fix the issue, but it's not doing anything.

Anyone else have this situation and/or know of another solution?

Thanks!

Jade over 5 years ago

Never mind, I found the code I needed - forgot to deregister jquery then enqueue the jquery script in foundation.