I've recently started integrating Foundation 5.2.3 into Wordpress 3.9, and I am having issues with getting jquery to initialize via wp_enqueue. The styles load just fine, though.

A working example of what I am trying to achieve can be found here (styles & scripts in header.php and footer.php)

functions.php

// Enqueue scripts
require_once('library/enqueue-scripts.php');

Now in my enqueue-scripts.php

<?php

// wp_enqueue foundation_styles
function foundation_styles() {

  // wp_enqueue style, as you do not need to register style links. 
  wp_enqueue_style( 'reset', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css' );
  wp_enqueue_style( 'icons', get_template_directory_uri() . '/font-files/font-icons/foundation-icons.css' );
  wp_enqueue_style( 'nprogress', get_template_directory_uri() . '/css/nprogress/nprogress.css' );
  wp_enqueue_style( 'override', get_template_directory_uri() . '/css/project.override.css' );

}

// wp_enqueue foundation_scripts
function foundation_scripts() {

  // wp_enqueue jqeury 
  wp_enqueue_script('jquery');

  // wp_enqueue scripts 
  wp_enqueue_script( 'modernizer', get_template_directory_uri() . '/js/modernizr-2.5.3.js',null,null, false );
  wp_enqueue_script( 'scrollreveal', get_template_directory_uri() . '/js/foundation/foundation.scrollReveal.js',null,null, false );
  wp_enqueue_script( 'jquery110', get_template_directory_uri() . '/js/vendor/jquery-1.10.js',null,null, true );
  wp_enqueue_script( 'nprogress', get_template_directory_uri() . '/js/foundation/foundation.nprogress.js',null,null, true );
  wp_enqueue_script( 'foundationmin', get_template_directory_uri() . '/js/foundation/foundation.min.js',null,null, true );
  wp_enqueue_script( 'foundationscripts', get_template_directory_uri() . '/js/foundation/foundation.scripts.js',null,null, true );

}

add_action( 'wp_enqueue_scripts', 'foundation_styles' );
add_action( 'wp_enqueue_scripts', 'foundation_scripts' );

?>

I have my custom script file /js/foundation/foundation.scripts.js initializing foundation via:

jQuery(document).foundation(($);

In my header.php I have my title functions, basic meta, and the wp_head. Im really lost as to why my jquery isn't loading.

Side note: the jquery 1.10 is used ONLY to help nprogress.js work.

I've recently started integrating Foundation 5.2.3 into Wordpress 3.9, and I am having issues with getting jquery to initialize via wp_enqueue. The styles load just fine, though.

A working example of what I am trying to achieve can be found here (styles & scripts in header.php and footer.php)

functions.php

// Enqueue scripts
require_once('library/enqueue-scripts.php');

Now in my enqueue-scripts.php

<?php

// wp_enqueue foundation_styles
function foundation_styles() {

  // wp_enqueue style, as you do not need to register style links. 
  wp_enqueue_style( 'reset', get_template_directory_uri() . '/style.css' );
  wp_enqueue_style( 'foundation', get_template_directory_uri() . '/css/foundation.css' );
  wp_enqueue_style( 'icons', get_template_directory_uri() . '/font-files/font-icons/foundation-icons.css' );
  wp_enqueue_style( 'nprogress', get_template_directory_uri() . '/css/nprogress/nprogress.css' );
  wp_enqueue_style( 'override', get_template_directory_uri() . '/css/project.override.css' );

}

// wp_enqueue foundation_scripts
function foundation_scripts() {

  // wp_enqueue jqeury 
  wp_enqueue_script('jquery');

  // wp_enqueue scripts 
  wp_enqueue_script( 'modernizer', get_template_directory_uri() . '/js/modernizr-2.5.3.js',null,null, false );
  wp_enqueue_script( 'scrollreveal', get_template_directory_uri() . '/js/foundation/foundation.scrollReveal.js',null,null, false );
  wp_enqueue_script( 'jquery110', get_template_directory_uri() . '/js/vendor/jquery-1.10.js',null,null, true );
  wp_enqueue_script( 'nprogress', get_template_directory_uri() . '/js/foundation/foundation.nprogress.js',null,null, true );
  wp_enqueue_script( 'foundationmin', get_template_directory_uri() . '/js/foundation/foundation.min.js',null,null, true );
  wp_enqueue_script( 'foundationscripts', get_template_directory_uri() . '/js/foundation/foundation.scripts.js',null,null, true );

}

add_action( 'wp_enqueue_scripts', 'foundation_styles' );
add_action( 'wp_enqueue_scripts', 'foundation_scripts' );

?>

I have my custom script file /js/foundation/foundation.scripts.js initializing foundation via:

jQuery(document).foundation(($);

In my header.php I have my title functions, basic meta, and the wp_head. Im really lost as to why my jquery isn't loading.

Side note: the jquery 1.10 is used ONLY to help nprogress.js work.

• jquery
• scripts

2 Answers 2

EDIT: I'm coming back to correct this post, having successfully wp_enqueue'd Foundation 5.3 for Sites to Wordpress 3.9. This code below is for anyone who has struggled to WP_ENQUEUE Foundation. The code below works perfectly.

UPDATES: I will continue to update this post with the newest version of Wordpress and Foundation to give you all the best WP_ENQUEUE code possible :) youre welcome!

Foundation 5.3 for Sites

Code below has been updated as of 6/24/14

add_action('init', 'styleEnqueue');
add_action('init', 'foundationEnqueue');

// ----------------------------------------------------------------------------
// register and enqueue styles
// ----------------------------------------------------------------------------

function styleEnqueue() {
  if (!is_admin()) {

// enqueue theme styles
wp_enqueue_style('css', get_template_directory_uri()."/css/YOUR_STYLESHEET_FILE_PATH_HERE_FROM_ROOT",array(),'','screen');
// enqueue foundation.min
wp_enqueue_style('css', get_template_directory_uri()."/css/foundation.min.css",array(),'5.1.1','screen');
// enqueue font icons
wp_enqueue_style('icons', get_template_directory_uri()."/css/foundation-icons.css",array(),'5.1.1','screen');
  }
}

// ----------------------------------------------------------------------------
// register and enqueue scripts
// ----------------------------------------------------------------------------

function foundationEnqueue() {
  if (!is_admin()) {

// deregister core jquery
wp_deregister_script('jquery');
// reregister jquery 2.1.0
wp_register_script('jquery', get_template_directory_uri()."/js/vendor/jquery.js", array(),'2.1.0',false);
// register modernizr
wp_register_script('modernizer', get_template_directory_uri()."/js/vendor/modernizr.js",array(jquery),'2.1.0', false);
// register foundation.min
wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'2.1.0',true); 
// register YOUR_JS_FILE_HERE
wp_register_script('customjs', get_template_directory_uri()."/js/YOUR_JS_FILE_HERE.js", array('jquery'),'2.1.0',true);

wp_enqueue_script(array('jquery','modernizer','foundation','customjs'));

  }
}

There are a couple of problems here, and some other things that I would do diffirently.

Lets start with wp_enqueue_style(). The first parameter here is $handle

$handle

(string) (required) Name used as a handle for the stylesheet. As a special case, if the string contains a '?' character, the preceding part of the string refers to the registered handle, and the succeeding part is appended to the URL as a query string.

As you can see here, this parameter only takes a string, not an array. So this won't work

wp_enqueue_style(array(
      'reset','foundation','foundation-icons','project.override','nprogress')
  );

There is also no need to register the stylesheet first then enqueueing it. You can just enqueue the stylesheet. The reason being that you are not enqueueing the stylesheet more than once conditionally. So you can simply just do the following

 wp_enqueueu_style( 'foundation', get_template_directory_uri() . '/css/foundation.css' );

You should also be using: get_template_directory_uri() instead of get_stylesheet_uri()

Now, the same would apply to wp_enqueue_script(). Also the $handle parameter doesn't accept an array.

The important parameter here though is $in_footer

$in_footer

(boolean) (optional) Normally, scripts are placed in of the HTML document. If this parameter is true, the script is placed before the end tag. This requires the theme to have the wp_footer() template tag in the appropriate place.

Default: false

If you need to load scripts in the footer, this parameter should be set to true

To move on, the same conditions would apply to wp_enqueue_script() as for wp_enqueue_style() regarding the fact that you don't need to register and enqueue, you can just enqueue, and the use of get_template_directory_uri().

So you would do something like this to enqueue your script

 wp_enqueue_script( 'scrollReveal', get_template_directory_uri() . '/js/foundation/foundation.scrollReveal.js',array(),false, false );