Menu icon Foundation
WP + foundation (dropdown won't work)

Hello,

I have got the functionality worked with wp_enqueue_script, but I want to use the drop down functionality,

foundation.dropdown.js

I can't get it work it loks like it won't load the javascript. Can someone please help?

Regards,
Hugo

wp_register_script('foundation.dropdown', get_template_directory_uri()."/js/foundation/foundation.dropdown.js", array(),'5.1.1',false);

<?php

function register_my_scripts() {
  wp_deregister_script('jquery');  
  wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", array(),'2.1.0',false);
  wp_register_script('modernizer', get_template_directory_uri()."/js/modernizr.js",array(),'2.7.1', false);
  wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'5.1.1',true);
  wp_register_script('foundation.dropdown', get_template_directory_uri()."/js/foundation/foundation.dropdown.js", array(),'5.1.1',false);



  wp_enqueue_script(array('jquery','modernizer','foundation.dropdown'));
}

function register_my_styles(){
  wp_register_style('reset', get_template_directory_uri()."/css/normalize.css",array(),'5.1.1','screen');
  wp_register_style('main', get_template_directory_uri()."/style.css",array(),'2.7','all');  
  wp_register_style('foundation', get_template_directory_uri()."/css/foundation.min.css",array('main'),'5.1.1','screen');

  wp_enqueue_style(array('reset','main','foundation'));
}

add_action('wp_print_scripts','register_my_scripts');
add_action('wp_print_styles', 'register_my_styles');

?>
            

         

wordpresswpdropdown

Hello,

I have got the functionality worked with wp_enqueue_script, but I want to use the drop down functionality,

foundation.dropdown.js

I can't get it work it loks like it won't load the javascript. Can someone please help?

Regards,
Hugo

wp_register_script('foundation.dropdown', get_template_directory_uri()."/js/foundation/foundation.dropdown.js", array(),'5.1.1',false);

<?php

function register_my_scripts() {
  wp_deregister_script('jquery');  
  wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", array(),'2.1.0',false);
  wp_register_script('modernizer', get_template_directory_uri()."/js/modernizr.js",array(),'2.7.1', false);
  wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'5.1.1',true);
  wp_register_script('foundation.dropdown', get_template_directory_uri()."/js/foundation/foundation.dropdown.js", array(),'5.1.1',false);



  wp_enqueue_script(array('jquery','modernizer','foundation.dropdown'));
}

function register_my_styles(){
  wp_register_style('reset', get_template_directory_uri()."/css/normalize.css",array(),'5.1.1','screen');
  wp_register_style('main', get_template_directory_uri()."/style.css",array(),'2.7','all');  
  wp_register_style('foundation', get_template_directory_uri()."/css/foundation.min.css",array('main'),'5.1.1','screen');

  wp_enqueue_style(array('reset','main','foundation'));
}

add_action('wp_print_scripts','register_my_scripts');
add_action('wp_print_styles', 'register_my_styles');

?>
            

         

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

James Gehring over 5 years ago

if you are using foundation.min.js you don't need to call any of the others. They are included.

Oloeg over 5 years ago

@James, as you see Im using this but without luck, or is this loaded not right on the wp_enqueue_script ?

Oloeg over 5 years ago

Hello ,

Does somebody knows this??

Regards,
Hugo

Steve King over 5 years ago

Hi Hugo,

I was wondering why you are using a function to register your files in a theme instead of just loading them as you would do a standard html page? Always seems the safest bet in my eyes?

Oloeg over 5 years ago

@Steve king If you see the most WP + foundation themes they all register, I don't know exactly why they do it but I think to hold it clean.

Regards,

Steve King over 5 years ago

@Hugo I have no idea why they do that, personally when creating a wordpress theme and using something like JavaScript files or CSS they are typically used globally. Why then create a function to be called when required? It is much easier to include these scripts/stylesheets in both header and footer. The only time I created a function was to use font-awesome and this is because it gave me the option to then use the WYSIWYG editor and enter an icon when required. With something like a drop down and only being used on navigation you would not require this.

Also I just noticed you are using jQuery 2.10? have you checked there are no JavaScript errors? I recently found one when using the reveal plugin and jQuery 1.9. It uses the live.() call which is depreciated in newer versions and needs changing to on.()

Hope this helps? If not I will dig in a little more.

James Gehring over 5 years ago

when working with wordpress it always best practice to use your scripts in the functions file. If using foundation min you need to remove the dropdown js because it could be conflicting with foundation min. You only need to use min, have you used a debugging tool like firebug to see if your js is loading?

//register script

wp_register_script( 'foundation', get_template_directory_uri() . '/js/foundation.min.js', array( 'jquery' ), '', true );

// enqueue scripts
    wp_enqueue_script( 'foundation' );

Put this in the footer.

<script>
(function($) {
$(document).foundation();
})(jQuery);
</script>

Also if you have a live link I can take a look at it.

Oloeg over 5 years ago

@james, I have installed firebug and tried what you say.

•delete the dropdown js script so I enqueue the foundation.min.js.
•add the code in footer.

the following error is thrown by firebug:

TypeError: $(...).foundation is not a function
$(document).foundation();

  </footer>


    <?php wp_footer();?>

<script>
(function($) {
$(document).foundation();
})(jQuery);
</script>

  </body>
</html>
<?php

function register_my_scripts() {
  wp_deregister_script('jquery');  
  wp_register_script('jquery', "http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js", array(),'2.1.0',false);
  wp_register_script('modernizer', get_template_directory_uri()."/js/vendor/modernizr.js",array(),'2.7.1', false);
  wp_register_script('foundation', get_template_directory_uri()."/js/foundation.min.js", array('jquery'),'5.1.1',true);

  wp_enqueue_script(array('jquery','modernizer'));
}

function register_my_styles(){
  wp_register_style('reset', get_template_directory_uri()."/css/normalize.css",array(),'5.1.1','screen');
  wp_register_style('main', get_template_directory_uri()."/style.css",array(),'2.7','all');  
  wp_register_style('foundation', get_template_directory_uri()."/css/foundation.min.css",array('main'),'5.1.1','screen');

  wp_enqueue_style(array('reset','main','foundation'));
}

add_action('wp_print_scripts','register_my_scripts');
add_action('wp_print_styles', 'register_my_styles');

?>

Regards,

James Gehring over 5 years ago

Sorry for late reply, but it doesn't show that you have enqueued foundation.

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

you are getting the error because foundation.min is not loaded.

Oloeg over 5 years ago

@James, Thanks now it loads fine! that I did'nt see that earlyer.

Many thanks now my theme is working and the js is loaded.

Regards,
Hugo