0

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' );

  • What part are you having trouble with? Have you enqueued the script without that function? – Jacob Peattie Feb 21 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. – Mahadi Hasan Juber Feb 21 at 5:49
  • Can you include the current code you're using in the question? – Jacob Peattie Feb 21 at 5:52
  • The question is edited and I've added the code. Please, check it. – Mahadi Hasan Juber Feb 21 at 6:06
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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