foundation javascript for a wordpress theme

Question

I am trying to create a theme from scratch using the foundation framework which it works great out of the box, but when I need to include the foundation JavaScript scripts, it shows as if they've been loaded, but nothing working, first the top bar doesn't work, I have tried to unregister the jquery which comes pre-loaded with WordPress and use the one from Google cdn as I have read that's a sure way for the top-bar and other scripts to work, but nothing so far works

here is my code in the functions.php

 // Enqueue scripts essential for foundation framework to act responsive

function responsive_scripts_basic()  
{  
    //register scripts for our theme  
    wp_deregister_script('jquery');

    wp_register_script('foundation-mod',  get_template_directory_uri() . '/javascripts/vendor/custom.modernizer.js',    
true );  
     wp_register_script('foundation-topbar', get_template_directory_uri() . '/javascripts/foundation/foundation.topbar.js',
 true );  
    wp_register_script('foundation-main', get_template_directory_uri() . '/javascripts/foundation/foundation.js', 
true );  
    wp_register_script('zepto', get_template_directory_uri() . '/javascripts/vendor/zepto.js', 

true );
     wp_register_script('jquery','http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', 
 true );


    //enqueue scripts for our theme
    wp_enqueue_script( 'foundation-mod' );  
    wp_enqueue_script( 'foundation-topbar' );  
    wp_enqueue_script( 'foundation-main' );  
    wp_enqueue_script( 'zepto');
    wp_enqueue_script( 'jquery');
}  
add_action( 'wp_enqueue_scripts', 'responsive_scripts_basic' );

I have used the same method for the stylesheets, and no problem at all, any experience on this? I thought it was going to be easy to build a theme with this framework, but it's getting rather complicated to be fair.

what says your client debug console? most likely [you must first include jQuery or zepto](http://foundation.zurb.com/docs/javascript.html) and then the foundation's js files. this said, you should [choose between them](http://stackoverflow.com/questions/14830334/what-is-the-difference-between-zepto-and-jquery-2), they are doing the same/similar things. if you're unsure, use jQuery — metadings, Jul 24 '13 at 00:00
[01:10:42.619] ReferenceError: Foundation is not defined @ http://localhost:8888/wordpress/wp-content/themes/test/javascripts/foundation/foundation.topbar.js?ver=3.5.2:297 — Alex, Jul 24 '13 at 00:11

metadings · Accepted Answer · 2013-07-24T00:29:12.210

1

Well the order in which the js files are "enqueued" is very important.

First you do "enqueue" the modernizer, then jQuery/zepto, then Foundation.min.js and then the topbar extension:

//enqueue scripts for our theme
wp_enqueue_script( 'foundation-mod' );  
wp_enqueue_script( 'jquery');
wp_enqueue_script( 'foundation-main' );  
wp_enqueue_script( 'foundation-topbar' );

Please see the zurb Foundation Installation docs, with the order of the scripts in mind.

Also to get the foundation thing started, you need a script element most likely at the very end of your PHP produced HTML:

<script type="text/javascript">
    $(document).foundation();
</script>

As wordpress is (as I know) pushing jQuery into noConflict mode, you may have to write this like

<script type="text/javascript">
    jQuery(document).foundation();
</script>

EDIT: Zepto has no noConflict function, leaving $ being jQuery or whatever it was set. To keep it simple, choose jQuery and use the fully qualified jQuery(document).foundation() syntax!

edited Jul 24 '13 at 00:29

answered Jul 24 '13 at 00:18

metadings

3,798
2
28
37

I changed the order as you suggested, also included the call at the end of the body tag $(document).foundation(); that's what the docs in foundation say, now it works, is the best way to add the code in wordpress? hard coded in the index.php... thanks a million – Alex Jul 24 '13 at 00:27
"is the best way" - yes I believe so. ps. welcome to stackoverflow! please let me have your points, by accepting the answer ;) – metadings Jul 24 '13 at 00:31
that was the best answer, how do I give you my points? thanks again – Alex Jul 24 '13 at 00:35

foundation javascript for a wordpress theme

1 Answers1