How to add custom JS file in Wordpress Child theme with get_theme_file_uri

If you want your script to load after a specific script, you need to set it as a dependency. You set the dependency of scripts by using the 3rd argument of wp_enqueue_script().

In your case it appears that you want to enqueue anyname-child-script after parent-anyname-script. To do that you need to enqueue the child theme script like this:

wp_enqueue_script( 
    'anyname-child-script',
    get_theme_file_uri( '/js/child-script.js' ),
    array( 'parent-anyname-script' ), // The line that has changed.
    filemtime( get_theme_file_path( '/js/child-script.js' ) ),
    true
);

You’ll notice that to do this properly you need to know the handle used for the parent theme’s script.

If you don’t know the name, then you can cause your scripts to load later by using a larger number for priority when hooking into wp_enqueue_scripts:

add_action( 'wp_enqueue_scripts', 'anyname_child_enqueue_scripts', 50 );

The 50 there means that your scripts will be enqueued after any scripts that are enqueued at a number lower than 50 (the default is 10).

This is not a very reliable method though, as things like dependencies can cause scripts to load later than their priority. The only truly reliable way to make sure your script loads after another script is to make it a dependency.

Related Posts: