Grow your CSS skills. Land your dream job.

Problems getting Foundation 4 JS to work in WP

  • # March 2, 2013 at 5:40 pm

    I’m merging [Foundation 4](http://foundation.zurb.com/ “”) with [Bones](http://themble.com/bones/ “”) to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I’m trying to implement the Foundation 4 JS I’m running into some issues.

    I followed the steps found in the [Foundation 4 JS Documentation](http://foundation.zurb.com/docs/javascript.html “”), but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):


    + ('__proto__' in {} ? 'zepto' : 'jquery')
    + '.js>');

    I’m attempting to open a modal on [this page,](http://mcfaddengavender.net/jeremy/?page_id=2# “”) but as you can see, the modal never fires when you click the link. I notice some errors in the Javascript console, but I’m still new to JS so they are a bit over my head.

    As I mentioned before, things were working fine with the Foundation 3 JS, which didn’t require the call to initialize the function – it just seemed to work. Not sure if that makes a huge difference, but it’s something I noticed that was different about the documentation for Foundation 4 JS compared to Foundation 3 JS.

    Can anyone get me pointed in the right direction?

    # March 2, 2013 at 8:17 pm

    Looks like you need to drop in some php to point to the correct directory. For example, putting:
    < ?php echo get_template_directory_uri(); ?>
    in front of /library/…

    # March 2, 2013 at 10:43 pm

    @qbattersby That seemed like part of the problem, so I made the paths absolute to try to cut down on the issue. However, there seems to be another issue causing the modal not to launch.

    Thanks for getting me going in the right direction! Anyone notice anything else?

    # March 3, 2013 at 4:14 pm

    Just as an update, I tried moving all of the code to the Head (just to see if I had any luck), but the issue still remained. Everything seems to be in place correctly, which really has me banging my head over this one.

    # March 3, 2013 at 9:16 pm

    I was having a similar problem creating a WordPress theme with Foundation 4 and the Top-Bar

    I solved it by forcing it to use jQuery not Zepto (to make sure all other plugins were ok).

    Then included all the js files one by one instead of the foundation.min.js

    And debugged each.

    There is an error “Cannot read property ‘fn’ undefined” somewhere in the foundation.min.js file that might be causing the issue.

    # March 4, 2013 at 11:26 pm

    @mtedwards

    I actually really like the idea of using each file separately so I could just delete the plugins I don’t need on a project by project basis.

    How did you force the plugins to use jQuery instead of Zepto?

    # March 5, 2013 at 12:07 pm

    Just tried it Modal seems to be working fine now. Not sure if you changed anything. I am using Chrome atm.

    # March 9, 2013 at 7:34 pm

    Sorry, I temporarily switched it back to Foundation 3 for a Demo. It’s now back to Foundation 4 while I work on fixing this issue.

    # January 29, 2014 at 2:46 pm

    Hi

    If you are upgrading now to foundation 5 ive got a great way of getting it to work no conflict. see tutorial here

    http://naileditdesign.com/making-foundation-5-framework-no-conflict-in-wordpress/

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".