How to override Js file in the child theme?

Actually there are two things about overriding js files into the child theme or we can say it WordPress override function in the child theme.

1. Parent theme js files
2. Plugin js files

So, let’s discuss both points one by one.

I think you must have heard about template hierarchy in the WordPress. I heard it when I was starting to learn WordPress.

So, we all know that there is no such thing for JavaScript and style sheets. We cannot create these files in the same directory structure with a child theme to override the parent theme or plugins.

Template hierarchy is only for PHP files.

Solved : How to override parent theme js files in the child theme?

We just need to follow below steps:

1. Go to your parent theme, copy the required js file and paste into your child theme
2. Make the required changes and save it.
3. Open the function.php file of your child theme
4. Dequeue the parent theme JavaScript file.
5. Enqueue js file in child theme

Before anything else, you can define a Constant of MY_CHILD_URI in the beginning of the function.php. This will help us to use the child theme path.

define( 'MY_CHILD_URI', get_stylesheet_directory_uri().'/' );

Now add the below hook with required priority.

<?php
add_action('wp_enqueue_scripts', 'child_theme_34543_js', 98);
function child_theme_34543_js()
{
    wp_dequeue_script(‘theme-name-custom-js’);
    wp_enqueue_script(‘child-theme-custom-js’, MY_CHILD_URI.’scripts/custom.js', array('jquery'));
}

Okay, add this action hook with higher priority than your old enqueued script is using, which you want to override.

Let’s suppose you want to override your parent theme js file i.e. custom.js, so, wait until it successfully enqueues then add this hook and dequeue the script. And enqueue your customized script.

What if your hook will add before the parent theme’s hook?

Your hook will add your script file but after that your parent theme hook will also add it’s file because it is not added when you try to dequeue it. 

Hope you got my point.

Solved : How to override plugin js files in the child theme?

To override the plugin js files in the child theme you can follow the same process as described in the above step.

But we can use one another way to achieve this that is to deregister the old script and then enqueue new one with the same handler. 

I have tried this thing with an enquiry plugin js files.

add_action('wp_enqueue_scripts', 'enquiry_cart_scripts');

function enquiry_cart_scripts() {
  wp_dequeue_script( 'gmwqp-script' );
  wp_deregister_script( 'gmwqp-script' );
  wp_enqueue_script( 'gmwqp-script',  MY_CHILD_URI . 'assets/js/enquiry.js', array('jquery'), '', true );
}

Solved : How to override CSS files in the child theme?

Some people ask me “WordPress child theme style CSS not overriding”. They mean they want to override CSS files in the child theme.

So, You can follow almost the same process for CSS style sheets, but with wp_dequeue_style() and wp_enqueue_style() instead of _script().

Hope you find this article useful.

See you in the next learning chapter.