Title: How to enqueue a script depending on another script ?
Last modified: October 22, 2018

---

# How to enqueue a script depending on another script ?

 *  [Nox](https://wordpress.org/support/users/profnox/)
 * (@profnox)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/)
 * Hi,
 * I created a librarie that I’m trying to load before loading a specific page script
   which will use functions of this librarie :
 * I tried some ways.
    First I tried to pass the second script in footer and add
   the handle of the first script in its dependencies :
 *     ```
       add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
       function add_theme_scripts() {
           wp_enqueue_script( 'from-side', get_template_directory_uri() . '/libs/gway/from-side.js', array( 'jquery' ), null );
           if ( is_page_template( 'page-projects.php' ) ) {
               wp_enqueue_script( 'gw_projects', get_template_directory_uri() . '/libs/gway/gw_projects.js', array( 'jquery', 'from-side' ), null, true );
           }
       }
       ```
   
 * But I got the error : Uncaught ReferenceError: fs_init is not defined
    So here,
   the gw_projects.js script is still loaded before from-side.js (where the function
   fs_init is declared).
 * I tried to call two add_action() functions with priorities :
 *     ```
       add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );
       function add_theme_scripts() {
           wp_enqueue_script( 'from-side', get_template_directory_uri() . '/libs/gway/from-side.js', array( 'jquery' ), null );
       }
   
       add_action( 'wp_enqueue_scripts', 'add_theme_script_after', 100);
       function add_theme_script_after(){
           if ( is_page_template( 'page-projects.php' ) ) {
               wp_enqueue_script( 'gw_projects', get_template_directory_uri() . '/libs/gway/gw_projects.js', array( 'jquery', 'from-side' ), null, true );
           }
       }
       ```
   
 * But I still get the same error.
    Is there a solution to force the ‘from-side.
   js’ script to be loaded before ‘gw_projects.js” ?
 * Thank you in advance,
 * N.

Viewing 5 replies - 1 through 5 (of 5 total)

 *  [HudsonValleyWebDesign](https://wordpress.org/support/users/jaycbrf/)
 * (@jaycbrf)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10803893)
 * Create a function to enqueue the scripts, they load in the order you place them:
 *     ```
       // enqueue styles and scripts
       function theme-name_scripts_styles() {
         wp_enqueue_script('name', get_template_directory_uri() . '/library/js/script.min.js', array('jquery'),'1.0', true );
         wp_enqueue_script('script2', get_template_directory_uri() . '/library/js/2.js', array('jquery'),'', true );
   
         // Loads theme JavaScript file LAST.
         wp_enqueue_script('themejs', get_template_directory_uri() . '/library/js/theme.js', array('jquery'),'0', true );
   
       }
       add_action('wp_enqueue_scripts', 'theme-name_scripts_styles');
       ```
   
 *  Thread Starter [Nox](https://wordpress.org/support/users/profnox/)
 * (@profnox)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10803997)
 * [@jaycbrf](https://wordpress.org/support/users/jaycbrf/) this is exactly what
   I tried in the first example.
    It didn’t work. :/
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10804831)
 * The order enqueued does not necessarily relate to the order listed on the page.
   WP rearranges the output references based on the dependency arguments. Include
   the script handle in the dependency array of any scripts the current script is
   dependent on. I see you’ve done that, which is correct. Check your page source
   to verify the proper loading order. As one is footer loaded and the other not,
   the file references are most likely in the correct order.
 * If the order on the page is correct, the not defined error is due to something
   in the script files causing scripts to run in the wrong order. For example, perhaps
   a dependency is wrapped in a .ready() function but the referencing script is 
   not. This will cause the referencing script to run before .ready() runs.
 *  Thread Starter [Nox](https://wordpress.org/support/users/profnox/)
 * (@profnox)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10806650)
 * Hi [@bcworkz](https://wordpress.org/support/users/bcworkz/),
 * Sadly, it’s actually the opposite.
 * The script that I tried to pass in first posisition (the library) contains only
   functions which are not declared in a “on document ready” like method. They’re
   only surrounded with the jQuery handle function
 * `(function($) { ... })( jQuery );`
 * The second one is used for the treatment of animations on this specific “projects
   page”, and calls function of my lib : here the entiere script is surrounded in
   a ready function :
 * `(function($) { $('document').ready(function(){ ... }) })( jQuery );`
 * So its content should normaly be loaded after the first script (even after the
   entier DOM initialization).
    -  This reply was modified 7 years, 6 months ago by [Nox](https://wordpress.org/support/users/profnox/).
 *  Thread Starter [Nox](https://wordpress.org/support/users/profnox/)
 * (@profnox)
 * [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10806804)
 * My own response make me figure out that the problem came from the jQuery handle
   function. I presume that all the function called inside it aren’t considered 
   as declared.
 * I removed it, and transform all $ symbols in my script into ‘jQuery’.
    And it
   worked…
 * Maybe it exists a more correct alternative to use the $ symbol ?

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘How to enqueue a script depending on another script ?’ is closed to new
replies.

 * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/)
 * 5 replies
 * 3 participants
 * Last reply from: [Nox](https://wordpress.org/support/users/profnox/)
 * Last activity: [7 years, 6 months ago](https://wordpress.org/support/topic/how-to-enqueue-a-script-depending-on-another-script/#post-10806804)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics