How to Properly Modify JavaScript Files in a Parent Theme

I recently needed to modify a JavaScript file in a WordPress parent theme. The script was doing almost what I wanted, but not quite, so I wanted to make minor changes. In your case, you might want to entirely override a parent theme JavaScript file in your child theme, or even deactivate a parent theme JavaScript file altogether.

What Not to Do: Edit Parent Theme JavaScript Directly

The correct way to change a parent-theme JavaScript file is not to modify that file itself. The reason is simple: if your parent theme ever updates, you’ll lose all your changes. This is the whole point of WordPress child themes, and it’s as true for JavaScript as for anything else.

So all your changes will need to be in your child theme. If you’re making changes in your parent theme, you’re doing it wrong.

What to Do: Dequeue Parent Theme Script, then Enqueue Child Theme Script

You don’t edit or override parent theme JavaScript files. You stop the parent theme scripts from running, and replace them with similar scripts in the child theme.

Here’s the catch: WordPress doesn’t have a “template hierarchy” for JavaScript files, the way it does for PHP ones. In WordPress, there’s no such thing as “overriding JavaScript”—in a child theme, or anywhere else.

Instead, JavaScript files are enqueued using wp_enqueue_script(). Any enqueued script will run, whether it’s in the parent theme or child theme.

So how do you edit or override parent theme scripts? You don’t. You stop the parent theme scripts from running, and then replace them with similar scripts in the child theme.

In other words, you follow these steps:

1. Copy the JavaScript file from your parent theme into your child theme and make the necessary changes.
2. Dequeue the parent theme JavaScript file.
3. Enqueue the child theme JavaScript file.

The video guide below shows you how to follow those three steps to modify parent theme JavaScript files in a child theme:

Modifying JavaScript Files in a WordPress Parent Theme: Code Analysis

The important code from the video guide is as follows:

/* Put this in the functions.php of your child theme */

add_action( 'wp_enqueue_scripts', 'wpshout_dequeue_and_then_enqueue', 100 );

function wpshout_dequeue_and_then_enqueue() {
    // Dequeue (remove) parent theme script
    wp_dequeue_script( 'parent-script-to-modify' );

    // Enqueue replacement child theme script
    wp_enqueue_script(
        'modified-child-script',
        get_stylesheet_directory_uri() . '/js/modified-child-script.js',
        array( 'jquery' )
    );
}

The important thing to understand in the call to wp_dequeue_script() is the handle of the original script that we want to remove—in this case, parent-script-to-modify.

You’ll most easily find this handle in the call to wp_enqueue_script() that originally enqueued that script. (So when we set 'modified-child-script' as the first argument of our own wp_enqueue_script(), we’re setting that script’s handle equal to modified-child-script, and that’s the handle we’d use to dequeue that script as well.)

If you can’t find that wp_enqueue_script() call, you may have to find the handle a “harder” way, which I outline in this article.

This Works on Plugin Scripts, Too

This isn’t just for themes. The basic mechanism of wp_dequeue_script() for unwanted and untouchable JS code, plus wp_enqueue_script() for the code you do want, works for modifying plugin scripts as well. And you follow almost the same process for CSS stylesheets, except with wp_dequeue_style() and wp_enqueue_style() instead of _script().

Happy dequeueing, and if you want to better understand wp_enqueue_script(), wp_dequeue_script(), parent and child themes, plugins, and lots more, check out our “learn WordPress development” course Up and Running:

Serious About Learning WordPress Development?

Get Up and Running Today

Up and Running is our complete “learn WordPress development” course. Now in its updated and expanded Third Edition, it’s helped hundreds of happy buyers learn WordPress development the fast, smart, and thorough way.

 

“I think anyone interested in learning WordPress development NEEDS this course.

Before I purchased Up and Running, I had taught myself some WordPress code, but lacked direction. Watching the course’s videos was like a bunch of lights being turned on.

I went from being vaguely familiar with how themes, functions and WordPress itself worked to mastering these. Everything became much clearer.

I very happily recommend this course to anyone willing to listen.”

–Jason Robie, WordPress developer

Take the next step in your WordPress development journey!

Get Up and Running Now