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

I just want to add a custom JS file in WordPress Child Theme underneath the parent script JS without using wp_dequeue_script() or wp_deregister_script().

I just Want to use the latest function get_theme_file_uri().

Child theme functions.php code is:

<?php
/**
 * Child Theme Functions
 *
 * @package Anyname
 * @subpackage Anyname Child
 * @since 1.0.0 
 */

if( ! function_exists( 'anyname_child_theme_setup' ) ) :

    // Child Theme Setup 
    function anyname_child_theme_setup() {

        load_child_theme_textdomain( 'anyname-child', get_theme_file_path( '/languages' ) );

    }
endif;
add_action( 'after_setup_theme', 'anyname_child_theme_setup' );

if( ! function_exists( 'anyname_child_enqueue_scripts' ) ) :

    // Child Enqueue Scripts
    function anyname_child_enqueue_scripts() {

        $anyname_parent_theme_style = 'parent-anyname-style';
        $anyname_parent_theme_script = 'parent-anyname-script'; 

        wp_enqueue_style( $anyname_parent_theme_script, get_parent_theme_file_uri( '/style.css' ) );

        wp_enqueue_style( 'anyname-child-style',
            get_theme_file_uri( '/style.css' ),
            array( $anyname_parent_theme_style ),
            wp_get_theme()->get('Version')
        );

        // wp_enqueue_script( $anyname_parent_theme_script, get_parent_theme_file_uri( '/anyname.js' ) );

        // wp_enqueue_script( 'anyname-child-script',
        //     get_theme_file_uri( '/js/script.js' ),
        //     array( $anyname_parent_theme_script ),
        //     wp_get_theme()->get('Version')
        // );

         wp_enqueue_script( 'anyname-child-script',
            get_theme_file_uri( '/js/child-script.js' ),
            array(), filemtime( get_theme_file_path( '/js/child-script.js' ) ), true );

    }

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

I just want to add a custom JS file in WordPress Child Theme underneath the parent script JS without using wp_dequeue_script() or wp_deregister_script().

I just Want to use the latest function get_theme_file_uri().

Child theme functions.php code is:

<?php
/**
 * Child Theme Functions
 *
 * @package Anyname
 * @subpackage Anyname Child
 * @since 1.0.0 
 */

if( ! function_exists( 'anyname_child_theme_setup' ) ) :

    // Child Theme Setup 
    function anyname_child_theme_setup() {

        load_child_theme_textdomain( 'anyname-child', get_theme_file_path( '/languages' ) );

    }
endif;
add_action( 'after_setup_theme', 'anyname_child_theme_setup' );

if( ! function_exists( 'anyname_child_enqueue_scripts' ) ) :

    // Child Enqueue Scripts
    function anyname_child_enqueue_scripts() {

        $anyname_parent_theme_style = 'parent-anyname-style';
        $anyname_parent_theme_script = 'parent-anyname-script'; 

        wp_enqueue_style( $anyname_parent_theme_script, get_parent_theme_file_uri( '/style.css' ) );

        wp_enqueue_style( 'anyname-child-style',
            get_theme_file_uri( '/style.css' ),
            array( $anyname_parent_theme_style ),
            wp_get_theme()->get('Version')
        );

        // wp_enqueue_script( $anyname_parent_theme_script, get_parent_theme_file_uri( '/anyname.js' ) );

        // wp_enqueue_script( 'anyname-child-script',
        //     get_theme_file_uri( '/js/script.js' ),
        //     array( $anyname_parent_theme_script ),
        //     wp_get_theme()->get('Version')
        // );

         wp_enqueue_script( 'anyname-child-script',
            get_theme_file_uri( '/js/child-script.js' ),
            array(), filemtime( get_theme_file_path( '/js/child-script.js' ) ), true );

    }

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

• themes
• child-theme

Share Improve this question edited Feb 21, 2019 at 6:11 Mehadi Hasan Juber asked Feb 20, 2019 at 20:53 Mehadi Hasan JuberMehadi Hasan Juber 451010 bronze badges 4

• What part are you having trouble with? Have you enqueued the script without that function? – Jacob Peattie Commented Feb 21, 2019 at 0:05
• hi, the child theme custom script file is showing the top of all script files. but is it possible to transfer it underneath the bottom of all script files like child style sheet? Thanks In Advanced. – Mehadi Hasan Juber Commented Feb 21, 2019 at 5:49
• Can you include the current code you're using in the question? – Jacob Peattie Commented Feb 21, 2019 at 5:52
• The question is edited and I've added the code. Please, check it. – Mehadi Hasan Juber Commented Feb 21, 2019 at 6:06

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

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.