为什么在WP主题中，如果我从functions.php加载它，那么SlideShow（JQuery FlexSlider）无法工作，但是如果我从footer.php文件加载它就可以工作？

Question

I have the following situation:

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 SlideShow in the header (made using the flexslider JQuery plugin) is not shown.

I have do the following operations:

1) In my footer.php file I have disabled the JavaScript loading commenting them and I call wp_footer(), 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>
    -->
    <?php wp_footer(); ?>
</body>

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 FlexSlider JavaScript
    wp_enqueue_script('flexSlider-js', get_template_directory_uri() . '/assets/plugins/flexslider/jquery.flexslider.js', array('jquery'), 'v2.1', true);
    // Load bootstrap.min.js:
    wp_enqueue_script('bootstrap.min-js', get_template_directory_uri() . '/assets/bootstrap/js/bootstrap.min.js', array('jquery'), 'v3.0.3', true);

    // Load FancyBox:
    wp_enqueue_script('fancy-js', get_template_directory_uri() . '/assets/plugins/fancybox/jquery.fancybox.pack.js', array('jquery'), 'v2.1.5', true);
    // Load scripts.js:
    wp_enqueue_script('myScripts-js', get_template_directory_uri() . '/assets/js/scripts.js', array('jquery'), '1.0', true);
    // Load Modernizer:
    wp_enqueue_script('myodernizer-js', get_template_directory_uri() . '/assets/js/modernizr.custom.js', array('jquery'), '2.6.2', true);

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

As you can see I set all scripts depend on JQuery so JQuery is loaded first.

But as you can see the jquery and\or the jquery.flexslider.js can't work.

The strange thing is that I change the end of my footer.php file in this way the SlideShow is correctly shown:

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="/wordpress/wp-content/themes/AsperTheme/assets/plugins/flexslider/jquery.flexslider.js"></script>

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

So what am I missing? What could be the problem?

Looking at the source code of my website (into FireFox) it seems to me that all the JavaScript is loaded but can't work, the SlideShow not appear.

What is the difference?

Answer 1

WordPress runs jQuery in nonConflict mode, you'll have to replace all $ by jQuery.

Example:

$('.flexslider').height();

Becomes

jQuery('.flexslider').height();

WordPress codex: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers