Javascript and Wordpress: Functions.php for a child theme to change a value on a JS file

Question

In wordpress...I created a child theme. Now I want to edit/change a value in main.js file. This file is part of the parent theme.

As far as my research goes, I need to copy the file main.js into the child theme, folder js/main.js, and make the change there. Then, I need to add a file "functions.php" with code that deregister's the original main.js file in the parent theme, and redirect it to my main.js in the child theme's js folder. correct?

Every website I found online explaining this situation, was showing a very short description of the code for the php to deregister/dequeue and then register/enqueue the new file. Could anyone please write down the simplest functions.php file I need in order to have this done?

From the parent functions.php

wp_register_script('main', JS_URI . '/main.js', 'jquery', false, true);

wp_enqueue_script('main');

From js/main.js

I'm only looking to change "play: 10000" for "play:1000

$(function() {
$('#slides').superslides({
  animation: "fade",
  play: 10000,
  slide_easing: 'easeInOutCubic',
  slide_speed: 800,
  pagination: true,
  hashchange: false,
  scrollable: true
});  });

Thank you in advance!

Answer 1

Try this in your functions.php file:

<?php

wp_dequeue_script('main');
wp_deregister_script('main');

wp_register_script('main', YOUR_CHILD_THEME_JS_URI . '/main.js', 'jquery', false, true);
wp_enqueue_script('main');

Make sure to change YOUR_CHILD_THEME_JS_URI to your child theme's JS path.

You can use get_stylesheet_directory() to get the path to your child theme folder since get_template_directory() would return the path to the parent theme, and not your child theme.