Menu icon Foundation
Wordpress + Foundation wp_enqueue issue

Hello all, FlannelBeard here.

I've been using Foundation 5 for about 4 months now. I've recently started integrating Foundation 5.2.3 into Wordpress 3.9, and I am having issues with getting jquery to load via wp_enqueue.

Before I begin, I am trying to learn from others and make my very own theme. I am a front-end developer and am not well versed in writing PHP.

A working example of what I am trying to achieve can be found here (styles & scripts in header.php and footer.php): http://www.elevancement.com/novus-theme/

However, here is the site I am having trouble with (and testing on): http://www.elevancement.com/

functions.php

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

Now in our enqueue-scripts.php

<?php

// wp_enqueue styles
function foundation_styles() {

  // wp_register_styles
  wp_enqueue_style( 'reset', get_stylesheet_uri() . '../../style.css', '', '', 'screen' );
  wp_enqueue_style( 'foundation', get_stylesheet_uri() . '../../css/foundation.css', '', '', 'screen' );
  wp_enqueue_style( 'foundation-icons', get_stylesheet_uri() . '../../css/foundation-icons.css', '', '', 'screen' );
  wp_enqueue_style( 'project.override', get_stylesheet_uri() . '../../css/project.override.css', '', '', 'screen' );
  wp_enqueue_style( 'nprogress', get_stylesheet_uri() . '../../css/nprogress/nprogress.css', '', '', 'screen' );

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

}

// wp_enqueue scripts
function foundation_scripts() {

  // wp_register_scripts (name, get_template, path, jquery array, version, footer)
  wp_register_script( 'modernizr', '../../js/vendor/modernizr-2.5.3.js',array('jquery'),'2.5.3', false );
  wp_register_script( 'scrollReveal', '../../js/foundation/foundation.scrollReveal.js',null,null, false );
  wp_register_script( 'jquery-1-10', '../../js/vendor/jquery-1.10.js',array('jquery'),'1.10.1', true );
  wp_register_script( 'nprogress', '../../js/foundation/foundation.nprogress.js',array('jquery'),null, true );
  wp_register_script( 'foundation', '../../js//foundation/foundation.min.js',array('jquery'),null, true );
  wp_register_script( 'foundation-scripts', get_theme_root() . '/js/foundation/foundation.scripts.js',array('jquery'),null, true );

  // Initialize Scripts
  wp_enqueue_script(array('modernizr','scrollReveal','jquery-1-10','nprogress','foundation','foundation.scripts'));

}

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

// wp_enqueue showcase kitchen-sink.php template
function kitchensink_scripts() {
  if ( is_page_template('kitchen-sink.php') ) {

    wp_enqueue_script( 'kitchen-sink', get_template_directory_uri() . '/js/kitchen-sink.js', array('jquery'), '1.0.0', true );

  }
}

add_action( 'wp_enqueue_scripts', 'kitchensink_scripts' );

?>
            

         

I have my custom script file /js/foundation/foundation.scripts.js initializing the scripts and initializing foundation.

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

Side note: the jquery 1.10 is used only to load nprogress.

Please. I have looked for answers for 5 hours now. Google / git / foundation forum / stacks ... i'm losing my mind. If anyone can work with me to find a solution I believe it would be most helpful for me and others having this issue.

Thank you sincerely,
FlannelBeard

wordpressFoundationintegrationwp_enqueue

Hello all, FlannelBeard here.

I've been using Foundation 5 for about 4 months now. I've recently started integrating Foundation 5.2.3 into Wordpress 3.9, and I am having issues with getting jquery to load via wp_enqueue.

Before I begin, I am trying to learn from others and make my very own theme. I am a front-end developer and am not well versed in writing PHP.

A working example of what I am trying to achieve can be found here (styles & scripts in header.php and footer.php): http://www.elevancement.com/novus-theme/

However, here is the site I am having trouble with (and testing on): http://www.elevancement.com/

functions.php

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

Now in our enqueue-scripts.php

<?php

// wp_enqueue styles
function foundation_styles() {

  // wp_register_styles
  wp_enqueue_style( 'reset', get_stylesheet_uri() . '../../style.css', '', '', 'screen' );
  wp_enqueue_style( 'foundation', get_stylesheet_uri() . '../../css/foundation.css', '', '', 'screen' );
  wp_enqueue_style( 'foundation-icons', get_stylesheet_uri() . '../../css/foundation-icons.css', '', '', 'screen' );
  wp_enqueue_style( 'project.override', get_stylesheet_uri() . '../../css/project.override.css', '', '', 'screen' );
  wp_enqueue_style( 'nprogress', get_stylesheet_uri() . '../../css/nprogress/nprogress.css', '', '', 'screen' );

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

}

// wp_enqueue scripts
function foundation_scripts() {

  // wp_register_scripts (name, get_template, path, jquery array, version, footer)
  wp_register_script( 'modernizr', '../../js/vendor/modernizr-2.5.3.js',array('jquery'),'2.5.3', false );
  wp_register_script( 'scrollReveal', '../../js/foundation/foundation.scrollReveal.js',null,null, false );
  wp_register_script( 'jquery-1-10', '../../js/vendor/jquery-1.10.js',array('jquery'),'1.10.1', true );
  wp_register_script( 'nprogress', '../../js/foundation/foundation.nprogress.js',array('jquery'),null, true );
  wp_register_script( 'foundation', '../../js//foundation/foundation.min.js',array('jquery'),null, true );
  wp_register_script( 'foundation-scripts', get_theme_root() . '/js/foundation/foundation.scripts.js',array('jquery'),null, true );

  // Initialize Scripts
  wp_enqueue_script(array('modernizr','scrollReveal','jquery-1-10','nprogress','foundation','foundation.scripts'));

}

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

// wp_enqueue showcase kitchen-sink.php template
function kitchensink_scripts() {
  if ( is_page_template('kitchen-sink.php') ) {

    wp_enqueue_script( 'kitchen-sink', get_template_directory_uri() . '/js/kitchen-sink.js', array('jquery'), '1.0.0', true );

  }
}

add_action( 'wp_enqueue_scripts', 'kitchensink_scripts' );

?>
            

         

I have my custom script file /js/foundation/foundation.scripts.js initializing the scripts and initializing foundation.

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

Side note: the jquery 1.10 is used only to load nprogress.

Please. I have looked for answers for 5 hours now. Google / git / foundation forum / stacks ... i'm losing my mind. If anyone can work with me to find a solution I believe it would be most helpful for me and others having this issue.

Thank you sincerely,
FlannelBeard