wp_dequeue_script for child theme to replace script

Question

I have a child theme and I am able to add the script I want to use to replace some theme functions and replace the some of the buttons.

But I cannot remove the old button so they are both showing up on top of each other. How can I remove the parent js script?

here is my function.php for the child theme

function replace_scroll(){
    // Remove the Default JavaScript    
    wp_dequeue_script( 'dp-js' );

    // Add your own script  
    $js_url = get_bloginfo('stylesheet_directory') . '/js';
    wp_enqueue_script('dp',"$js_url/dp1.scripts.js"); 
} 
add_action( 'wp_enqueue_scripts', 'replace_scroll' ); 

Answer 1

A few issues here to begin with

• You should be using get_stylesheet_directory_uri() for child themes and get_template_directory_uri() for parent themes instead of the get_bloginfo() functions. Latter is slower and uses the first two functions

• Scripts and styles should be deregistered AND and dequeued to remove them completely from queue

• Priority is important. You need to hook your function later to make sure that the styles and scripts are registered before you deregister them, otherwise it won't work.

Solution:

Copy the parent js file to your child theme and open it up and make the necessary changed. Save the file

Now you need to dequeue AND deregister the parent js file and then enqueue you new child theme js file

Example

/*
 * Use any number above 10 for priority as the default is 10 
 * any number after 10 will load after
 */
add_action( 'wp_enqueue_scripts', 'my_custom_scripts', 100 );
function my_custom_scripts()
{
    wp_dequeue_script( 'parent-script-handle' );
    wp_deregister_script( 'parent-script-handle' );
    // Now the parent script is completely removed

    /*
     * Now enqueue you child js file, no need to register if you are not 
     * doing conditional loading
     */
    wp_enqueue_script( 'child-script-handle', get_stylesheet_directory_uri() . '/child-script.js' );
    //Now we have done it correctly
}

Answer 2

Testing with the parent theme Twenty Fourteen that has this in its functions.php file:

function twentyfourteen_scripts() {
    // other enqueues
    wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20131209', true );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_scripts' );

The action wp_enqueue_scripts does not have a declared priority, so it's using the default 10. To make the dequeue work we have to add a lower priority in our child theme functions.php file:

function remove_twentyfourteen_scripts()
{
    wp_dequeue_script( 'twentyfourteen-script' );
}
add_action( 'wp_enqueue_scripts', 'remove_twentyfourteen_scripts', 11 ); // <-- HERE

Answer 3

You need to figure out where the parent theme is generating the buttons.

If they are being generated by javascript, you can dequeue the script that is creating the buttons. Just be careful, as any other javascript in that file will be removed as well. If this is an issue, the best way to go about it is to copy the js script to your theme folder, remove the part you don't want, dequeue the original, and enqueue your altered script.

How to do this.

To dequeue a script you need to know it's handle. Here's a fantastic tutorial on how to get the handles of scripts, very handy. To sum up in case the link goes dead:

Added to your functions.php file

function wpcustom_inspect_scripts_and_styles() {
    global $wp_scripts;
    global $wp_styles;

    // Runs through the queue scripts
    foreach( $wp_scripts->queue as $handle ) :
        $scripts_list .= $handle . ' | ';
    endforeach;

    // Runs through the queue styles
    foreach( $wp_styles->queue as $handle ) :
        $styles_list .= $handle . ' | ';
    endforeach;

    printf('Scripts: %1$s  Styles: %2$s', 
    $scripts_list, 
    $styles_list);
}

add_action( 'wp_print_scripts', 'wpcustom_inspect_scripts_and_styles' );

This will print a list of all the js and css being loaded to your page at the top. If your'e having trouble working out what's what, you can always use a dom inspector, such as on Chrome or firefox. On chrome- right click - inspect element - Resources- Frames- Your site url - scripts.

This will give you a list of all the scripts and their locations.

Once you've figured out which script you need, copy it to your theme and remove the part that's adding the buttons.

Then dequeue the unwanted script using the handle we found earlier, and enqueue your new one.

function wpcustom_deregister_scripts_and_styles(){

    wp_deregister_script('my-script-handle');
    wp_enqueue_script( 'my-new-script', get_template_directory_uri() . '/js/my-new-script.js', array(), '1.0', true );
}

add_action( 'wp_print_styles', 'wpcustom_deregister_scripts_and_styles', 100 );

If the buttons are being generated by php, you'll need to find the file that's generating the html in your parent theme, copy it to your child theme, and removing the offending lines.

Answer 4

In a typical wordpress flow, plugins are loaded before the theme, and in case of child theme, child theme is loaded before the parent theme, specifically, functions.php file of a child theme is included before the functions.php of a parent. So, wp_enqueue_scripts actions are stacked, and later execution in the that order, unless the priority of actions is defined diferently that default value ( 10 ). The problem here is that you are trying to dequeue script that has not yet been enqueued.

---

To remove the script added by parent, raise the priority of wp_enqueue_scripts action of child theme to value higher than value defined in parent theme action.

// get_template_directory_uri(), if used in child theme, the parent theme directory URI will be returned, 
// use get_stylesheet_directory_uri() to get the child's theme directory uri

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 11 );
function child_theme_enqueue_scripts() 
{
    wp_dequeue_script( 'parent-theme-script' );
    wp_enqueue_script( 'child-theme-script', get_stylesheet_directory_uri() . '/js/script.js' );
}

---

To replace the script, for example, you want to make some changes and leave the existing dependencies and localization there are two ways.

Use wp_enqueue_script with the same handle name, due the fact that if you try to register or enqueue an already registered handle, the new parameters will be ignored, useful if the script is later localized by parent to keep the localized data.

// default priority 10

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts' );
function child_theme_enqueue_scripts() 
{
    wp_enqueue_script( 'parent-theme-script', get_stylesheet_directory_uri() . '/js/script.js' );
}

Use global $wp_scripts object to modify only required properties, for example, change only src property of already enqueued or registered script.

// priority 11

add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 11 );
function child_theme_enqueue_scripts() 
{
    global $wp_scripts; 
    $wp_scripts->registered[ 'parent-theme-script' ]->src = get_stylesheet_directory_uri() . '/js/script.js';
}

---

The fact that child theme is loaded first is quite practical since the use of child theme is not to replace, but more as addition to the main theme.

Answer 5

I want to add that we need to use get_stylesheet_directory_uri() when adding the replacement script because get_template_directory_uri() returns the parent theme directory.

See the WordPress docs here