Menu icon Foundation
Adding JS Enabled Effects

I am developing a website in Wordpress, I am trying to add an alert box as well as an accordion in wordpress, and I have properly enqueued the files in the correct way. However, I am unable to make it work.

/*Foundation 5 Dependencies*/
    wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/fastclick.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/modernizr.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/placeholder.js', array('jquery'), '20152103', true);

/**
    * Foundation 5 Accordion
	*/	
wp_enqueue_script('f551bethel-accordion', get_template_directory_uri() . '/js/foundation/foundation.accordion.js', array('jquery'), '20152104', true);

/**
    * Foundation 5 Alerts
    */	
wp_enqueue_script('f551bethel-accordion', get_template_directory_uri() . '/js/foundation/foundation.alert.js', array('jquery'), '20152104', true);

wordpressjavascript

I am developing a website in Wordpress, I am trying to add an alert box as well as an accordion in wordpress, and I have properly enqueued the files in the correct way. However, I am unable to make it work.

/*Foundation 5 Dependencies*/
    wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/fastclick.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/modernizr.js', array('jquery'), '20152103', true);
	wp_enqueue_script('f551bethel-navigation', get_template_directory_uri() . '/js/vendor/placeholder.js', array('jquery'), '20152103', true);

/**
    * Foundation 5 Accordion
	*/	
wp_enqueue_script('f551bethel-accordion', get_template_directory_uri() . '/js/foundation/foundation.accordion.js', array('jquery'), '20152104', true);

/**
    * Foundation 5 Alerts
    */	
wp_enqueue_script('f551bethel-accordion', get_template_directory_uri() . '/js/foundation/foundation.alert.js', array('jquery'), '20152104', true);

This post has been closed. No new replies can be added.

Esa Rantanen over 4 years ago

Hello James,

check your Javascript setup:
http://foundation.zurb.com/docs/javascript.html

There's no need to load Foundation components separately if you are using foundation.min.js
Modernizr should be loaded in the head using 'false' instead of 'true'
To clarify things, you could name your enqueues with script names.
Initialize Foundation JS in your footer.php

James Van Waza over 4 years ago

Hi, Esa. I followed your instructions and changed the names of the scripts,

/Foundation 5 Dependencies/
wp_enqueue_script('f554bethel-foundationmin', get_template_directory_uri() . '/js/foundation.min.js', array('jquery'), '20152103', true);
wp_enqueue_script('f554bethel-fastclick', get_template_directory_uri() . '/js/vendor/fastclick.js', array('jquery'), '20152103', true);
wp_enqueue_script('f554bethel-modernizr', get_template_directory_uri() . '/js/vendor/modernizr.js', array('jquery'), '20152103', FALSE);
wp_enqueue_script('f554bethel-placeholder', get_template_directory_uri() . '/js/vendor/placeholder.js', array('jquery'), '20152103', true);

Is this the correct procedure, and if I want to put an alert at the top of the page, should I also initalize at the header.php page?

Esa Rantanen over 4 years ago

James,

next, just look at your source code.

You should see jquery and modernizr loaded in <head> .

foundation.min.js, fastclick.js and placeholder.js should be loaded before closing body tag.
Be sure you initialize Foundation JS after these scripts, just put this into your footer.php, after
<?php wp_footer(); ?>

<script>
  jQuery(document).foundation();
</script> 

Note that WordPress includes jQuery 1.11.2
Foundation comes with jQuery 2.1.3
Maybe you need to dequeue WP jQuery and enqueue the version that came with Foundation.

James Van Waza over 4 years ago

Thanks Esa, I reivewed the code and saw what was going wrong, now all my files are loading properly.

Thanks Again.

Esa Rantanen over 4 years ago

Hey I'm glad you got it going!