Revision 385 is a pre-publication revision. (Viewing current revision instead.)

Creating a Foundation 4 WordPress theme

In the first version of Foundation 4 I found a JQuery conflict when creating a WordPress theme. This fix resolved me issue. Note the later releases of Foundation 4 may not require this fix. Kudos to Radek Stangel. Menu toggle in top-bar (on small screen size) doesn't work when you use default WordPres jQuery (version 1.8.3), however it works when you use standart 1.8.3 jQuery (tried the CloudFlare CDN one). I can't find out why? I've compared both jquery.js versions and the only difference is that the WP one has jQuery.noConflict(); at the end. I think this is it. Now just have to found how to solve it. Ok, problem solved. The issue was caused by jQuery.noConflict(); I've just wrapped the foundation.min.js inside:   [php] (function($) { // the original content of foundation.min.js }(jQuery)); [/php]   and than initialize with: jQuery(document).foundation();  

Revisions

  • March 12, 2013 @ 00:49:30 [Current Revision] by PeterLugg
  • March 12, 2013 @ 00:45:47 by PeterLugg

Revision Differences

March 12, 2013 @ 00:45:47Current Revision
Content
 Added: In the first version of Foundation 4 I found a JQuery conflict when creating a WordPress theme. This fix resolved me issue. Note the later releases of Foundation 4 may not require this fix. Kudos to <a href="https:/ /groups.google.com/forum/ ?fromgroups=#!searchin/foundation- framework-/foundation.min.js/ foundation-framework-/Aat3bxJ- 6Bs/Vo0lyVKz5HAJ" target="_blank">Radek Stangel</a>.
 Added: Menu toggle in top-bar (on small screen size) doesn't work when you use default WordPres jQuery (version 1.8.3), however it works when you use standart 1.8.3 jQuery (tried the CloudFlare CDN one). I can't find out why?
 Added: I've compared both jquery.js versions and the only difference is that the WP one has jQuery.noConflict(); at the end. I think this is it. Now just have to found how to solve it.
 Added: Ok, problem solved. The issue was caused by jQuery.noConflict(); I've just wrapped the foundation.min.js inside:
 Added: &nbsp;
Deleted: Added: [php]
 Added: (function($) {
 Added: // the original content of foundation.min.js
 Added: }(jQuery));
 Added: [/php]
 Added: &nbsp;
 Added: and than initialize with: jQuery(document) .foundation();
 Added: &nbsp;

Note: Spaces may be added to comparison text to allow better line wrapping.

Tags: , ,

No comments yet.

Leave a Reply