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 three Javascript script that I need to load -

  • imagesLoaded.js
  • lazyload-1.8.4.js
  • and cd.js

cd.js contains my functions that use imagesLoaded.js and lazyload-1.8.4.js.

Do load them altogether or separately?

function add_my_script() {
  wp_enqueue_script(
    'imagesLoaded',
    get_template_directory_uri() . '/js/imagesLoaded.js', 
    array('jquery'),
    'lazyload',
    get_template_directory_uri() . '/js/lazyload-1.8.4.js',
    array('jquery'),
    'cd',
    get_template_directory_uri() . '/js/cd.js',
    array('jquery')                     
  );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Code that Worked

            add_action( 'wp_enqueue_scripts', 'add_my_script' );

            function add_my_script() {
                wp_register_script('imagesLoaded',get_template_directory_uri() . '/js/imagesLoaded.js', array('jquery'),true);
                wp_register_script('lazyload',get_template_directory_uri() . '/js/lazyload-1.8.4.js', array('jquery'),true);
                wp_register_script('cd',get_template_directory_uri() . '/js/cd.js', array('jquery','imagesLoaded','lazyload'),true);
                wp_enqueue_script('imagesLoaded');
                wp_enqueue_script('lazyload');
                wp_enqueue_script('cd');
            }
share|improve this question
    
You can remove the two enqueues before cd because they are registered dependancies for that enqueue. Also, are you intending for these scripts to be loaded for every page? –  t31os May 8 '13 at 16:55
add comment

2 Answers 2

up vote 6 down vote accepted

I formatted that code as best I could, and once formatted it is obviously very broken. wp_enqueue_script takes 5 parameters. You have 9. And several of the first five are wrong. I expect that you would see errors if you had debugging enabled.

You seem to be trying to enqueue all of your scripts in the same wp_enqueue_script. You can't do that. Perhaps that is what you are asking, but the question isn't terribly clear.

function add_my_script() {
  wp_enqueue_script(
    'imagesLoaded',
    get_template_directory_uri() . '/js/imagesLoaded.js', 
    array('jquery')
  );
  wp_enqueue_script(
    'lazyload',
    get_template_directory_uri() . '/js/lazyload-1.8.4.js',
    array('jquery')
  );
  wp_enqueue_script(
    'cd',
    get_template_directory_uri() . '/js/cd.js',
    array('jquery','imagesLoaded','lazyload')                     
  );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

I also added imagesloaded and lazyload as dependencies for cd, which I think is correct. I don't know if imagesloaded is dependent upon lazyload or the other way around but if you are going to register/enqueue (as you should) then make proper use of the dependency juggling. That is one of the best things about the system.

share|improve this answer
    
s_ha_dum thanks for your reply, my first attempt was a disaster. Your code broke my page but I got it working with the update - Code that Worked in a first post –  Simon Cooper May 8 '13 at 15:51
    
Syntax error. Fixed it. Sorry about that. –  s_ha_dum May 8 '13 at 15:54
    
Sorry still broken for me. Is there anything wrong with the way i got it working? –  Simon Cooper May 8 '13 at 16:04
    
Ok... one of your scripts had a camel-case name so the dependency didn't work. Camel-case === horrific idea (imho) especially with letters like L and especially when not used consistently. Tested, the scripts do load. –  s_ha_dum May 8 '13 at 16:11
1  
@t3los : If you look at the source, wp_enqueue_script runs $wp_scripts->add just like wp_register_script does. They should be equivalent as far as dependency handling goes (as best I can tell). –  s_ha_dum May 8 '13 at 17:28
show 1 more comment

As a corollary to @s_ha_dum's answer, you could also register scripts with hierarchically declared dependencies, and then just enqueue your ultimate script. Something like so:

function add_my_script() {

    // Register first script, dependent on jQuery
     wp_register_script(
         'imagesLoaded',
         get_template_directory_uri() . '/js/imagesLoaded.js', 
         array( 'jquery' )
     );

    // Register second script, dependent on first script
     wp_register_script(
         'lazyload',
         get_template_directory_uri() . '/js/lazyload-1.8.4.js',
         array( 'imagesLoaded' )
      );

    // Enqueue third script, dependent on second script
     wp_enqueue_script(
         'cd',
         get_template_directory_uri() . '/js/cd.js',
         array( 'lazyload' )                     
     );
}   
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Functionally, it really makes no difference; it's mostly a matter of preference. I like to declare all dependencies explicitly for each script, but this method is a bit more shorthand.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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