Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question

closed as off-topic by Chip Bennett, t f, s_ha_dum, ialocin, kaiser Jan 23 at 21:31

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions that are too localized (such as syntax errors, code with restricted access, hacked sites, hosting or support issues) are not in scope. See how do I ask a good question?" – Chip Bennett, t f, s_ha_dum, ialocin, kaiser
If this question can be reworded to fit the rules in the help center, please edit the question.

1 Answer 1

up vote 1 down vote accepted

As @Milo said , WP loads jQuery in no conflict mode so shortcut $ is not available for jQuery to use .You should not use the $ variable for jQuery within WordPress.As you said you are not into jQuery i'm just giving the code below..Try it.

jQuery(function ($) {
        $(window).load(function() { 
              $('#main-slider').flexslider({
                 animation: "slide",
                 useCSS: false, 
                 pauseOnHover: true 
                }); 
          });

    })

When you put script in the footer.php , you loaded jQuery from cdn .so $ is available and that's why it worked.

Update: What i mean is when you used

<script src="http://code.jquery.com/jquery.js"></script>

your source for jQuery.js is different that WP.

When you use

  // Load JQuery:
    wp_enqueue_script('jquery');

jQuery is loaded from WP bundle.

share|improve this answer
    
now all is clear. My last doubt is: "what do you exactly mean when you say to me that: "you loaded jQuery from cdn"?" –  AndreaNobili Jan 23 at 15:29
    
I meant you loaded jquery.js from a different source not from WordPress.<script src="code.jquery.com/jquery.js"></script>;. –  bravokeyl Jan 23 at 16:34
    
@AndreaNobili I updated the answer .you can check –  bravokeyl Jan 23 at 16:49

Not the answer you're looking for? Browse other questions tagged or ask your own question.