title: Wordpress: Loading custom.js in a childtheme with multiple dependencies
body: <p>i have a website that is running the Master Slider Pro wordpress plugin and the iLightBox plugin. I am running a custom script in a custom.js file in wordpress child theme:</p>
  
  <pre><code>/* Link JavaScript file */
  function custom_scripts() {
      wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery') , false, true );
      wp_enqueue_script( 'custom-script' );
  }
  </code></pre>
  
  <p>I am calling the custom file as per the below in my functions.php file:</p>
  
  <pre><code>jQuery(document).ready(function(){
  
      (function(){
        var groupsArr = [];
        jQuery('[rel^="ilightbox["]').each(function () {
          var group = this.getAttribute("rel");
          jQuery.inArray(group, groupsArr) === -1 &amp;&amp; groupsArr.push(group);
        });
        jQuery.each(groupsArr, function (i, groupName) {
          jQuery('[rel="' + groupName + '"]').iLightBox({ /* options */ });
        });
      })();
  
    });
  </code></pre>
  
  <p>The issue i am having is that sometimes it loads the custom script (i assume in the correct order) and my slider loads and the lightbox displays when i click the image... other times the slider gets stuck in a loading state and shows the errors:</p>
  
  <pre><code>Uncaught TypeError: jQuery(...).iLightBox is not a function
  </code></pre>
  
  <p>I believe i am loading the custom.js file after the jQuery file has loaded... what i am assuming is, that the lighbox plugin is sometimes loading after the jQuery and therefore loading after custom.js file which is why it cannot find the ilightbox function ?</p>
  
  <p>Anyway i can prevent this ?</p>
  
  <hr>
  
  <p>I have been doing some reading and spoke to my theme author (who has integrated the ilightbox function).</p>
  
  <p>My code now looks like the below:</p>
  
  <pre><code>/* register script that defines ilightbox (in parent theme) */
  wp_register_script( 'ilightbox_script', get_stylesheet_directory . '/includes/class-avada-scripts.php' );
  
  /* Link JavaScript file */
  function custom_scripts() {
      wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js', array('jquery', 'ilightbox_script') , false, true );
      wp_enqueue_script( 'custom-script' );
  }
  
  add_action( 'wp_enqueue_scripts', 'custom_scripts', 99 );
  </code></pre>
  
  <p>I believe i have now registered the script that contains the ilightbox function (stored in my parent theme). I then called the custom.js file after jQuery and the registered script has loaded. However it still is not working. I also get the following error from the file i am now trying to register:</p>
  
  <pre><code>Uncaught SyntaxError: Unexpected token &lt;
  </code></pre>
  
  <p>Maybe i have misunderstood everything, so i have copied what the theme author has said to me when i asked which fine defines the ilightbox function.. what do you think?</p>
  
  <blockquote>
    <p>These scripts are enqueued in class-avada-scripts.php available in
    following directory</p>
    
    <p>/wp-content/themes/avada/includes</p>
    
    <p>and all JS code is in main.min.js available in following directory</p>
    
    <p>/wp-content/themes/avada/assets/js</p>
    
    <p>However if you enable developer mode from </p>
    
    <p>Wp admin -> appearance -> theme options -> advanced</p>
    
    <p>then you can modify code in avada-lightbox.js and lightbox.js
    available in same directory.</p>
  </blockquote>
  
  <hr>
  
  <p>UPDATE (22/11/2015):</p>
  
  <p>Latest update has me using:</p>
  
  <pre><code>/* Ensure jquery loads before iLightBox */
  add_action( 'wp_enqueue_scripts', 'add_my_script' );
  
  function add_my_script() {
                  wp_register_script( 'ilightbox_script', get_theme_root_uri() . '/Avada/includes/class-avada-scripts.php', array( 'jquery' ) );
                  wp_register_script( 'custom-script', get_stylesheet_directory_uri() . '/assets/js/custom.js' ); 
  
                  wp_enqueue_script('ilightbox_script');
                  wp_enqueue_script('custom-script');
  }
  </code></pre>
  
  <p>Still same error :(</p>