Why I can't load my JavaScripts using an hook inside my functions.php file?

Question

I am pretty new in WP (I came from Joomla) and I have the following problem:

I am carrying this pure HTML theme (that use BootStrap CSS framework) into a WordPress theme.

This is the original pure HTML demo theme (I have the entire source code because it is a downlodable example): http://www.html.it/guide/img/bootstrap/demo/home.html

And this is my personal WP theme on wich I am working on: http://onofri.org/WP_BootStrap/

As you can see the only difference from the original demo website and my personal WP theme is that in the second one the JavaScript is not loaded (so the upper horizontal main menu can't work well and the header SlideShow is fixed on a single immage)

I have do the following operations:

1) In my footer.php file I have disabled the JavaScript loading commenting them, in this way:

        <!--
        <script src="http://code.jquery.com/jquery.js"></script>
        <script src="/wordpress/wp-content/themes/AsperTheme/assets/bootstrap/js/bootstrap.min.js"></script>
        <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>
        <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/fancybox/jquery.fancybox.pack.js"></script>
        <script src="/wordpress/wp-content/themes/AsperTheme/assets/js/scripts.js"></script>
        -->

2)I have insert the following code into my functions.php file to load all the previous JavaScript using the WP standard way:

/* Function automatically executed by the hook 'load_java_scripts':
 * 1) Load all my JavaScripts
 */
function load_java_scripts() {

    // Load JQuery:
    wp_enqueue_script('jquery');
    // Load bootstrap.min.js:
    wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array(), 'v3.0.3', true);
    // Load FlexSlider JavaScript
    wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array(), 'v2.1', true);
    // Load FancyBox:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array(), 'v2.1.5', true);
    // Load scripts.js:
    wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array(), '1.0', true);
    // Load Modernizer:
    wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array(), '2.6.2', true);

}
add_action('wp_enqueue_scripts', 'load_java_scripts');

But as you can see seem that the JavaScript is not loaded and can't work. If I enamble the JavaScript loading inside my footer.php file (deleting the comments) it work well but I think that in WP this is not a good way to use.

What am I missing? What is it wrong?

Answer 1

The simplest and most-common cause for this issue is that you have failed to fire wp_footer() immediately before the closing </body> tag in your footer.php file:

    <?php wp_footer(); ?>
</body>

Answer 2

for your FlexSlider use following part:

wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);

This will add jquery.flexslider.js right after jquery.js... So dependency problem will disappear....