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.

Answer 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!