How to edit Js files in Wordpress Child theme.

Hi Trent,

First of all I'm so sorry for not replying sooner, I had a literal moment just then that I forgot to reply to someone and indeed I did.

I do not have the function.php or js files.

In your child theme you can simply create a new functions.php file and place your script registration code there, make sure you add in the opening PHP tag <?php.

Next simply copy the JS files you need from the parent theme and change the PHP I posted above so it points to the correct folder, for example if you have a file called theme.js in a scripts folder the code would be as follows.

wp_register_script('my_script_name', get_template_directory_uri() . '/scripts/theme.js');

For any other subsequent script you need simply copy and paste the wp_deregister_script and wp_register_script lines and change the handle and path to the new script.

btw all i'm doing it editing the color. So basically if you hover over a picture, there is a color overlay that appears. All I want to do is change that color.

Is it a CSS colour? If so then you can overwrite it using the child theme's CSS but without seeing the theme it's hard to say if it's that simple.

That actually be might fault, it's been a while since I really got dug into WordPress so naturally I've forgotten some code, below should solve it.

<?php

function custom_scripts() {
    wp_deregister_script('hover.zoom');
    wp_register_script('hover.zoom', get_template_directory_uri() . '/js/hover.zoom.js', false, false, true);
    wp_enqueue_script('hover.zoom');
}

add_action('wp_enqueue_scripts', 'custom_scripts');

The link just provided some clarity on the situation, the file you want to copy and work with is main.js, simply copy this to the child theme, update the overlay colour's.

One thing you will need to check first is the script enqueue function in the parent theme as you'll need to dequeue the same script name that main.js is queued as.

So this thread doesn't get too long could you please press the "Add Comment" button under your post body above =)

The functions.php file will be in the parent theme that you've based your child off.

Yep np. So I know where the file is, but don;t know exactly what i'm looking for

I also saw another folder called functions. Could it be in that?

One of the below files will have the same wp_enqueue_script function like we talked above, once you find the one for main.js copy it out and paste it in your child functions.php file.

require_once( get_template_directory() .'/functions/functions.php' );
require_once( get_template_directory() .'/functions/hooks.php' );
require_once( get_template_directory() .'/functions/function-extras.php' );
require_once( get_template_directory() .'/functions/custom-css.php' );
require_once( get_template_directory() .'/functions/tracking.php' );
require_once( get_template_directory() .'/functions/comments-layout.php' );

Ok great I think I found It. It was in a folder called functions. And in that folder that was a file called functions-extra. php. This what some of the code looks like.

<?php
function bootstrap_scripts()
{
    // Register the scripts for this theme:
    wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
    wp_register_script( 'hover-script', get_template_directory_uri() . '/js/hover.zoom.js', array( 'jquery' ) );
    wp_register_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ) );

    //  enqueue the script:
    wp_enqueue_script( 'bootstrap-script' );
    wp_enqueue_script( 'hover-script' );
    wp_enqueue_script( 'main-script' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

so I took the correct code and put it in my functions.php file like so...

<?php 

    function custom_scripts()
{
    // Register the scripts for this theme:
    wp_register_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.js', array( 'jquery' ) );
    wp_register_script( 'hover-script', get_template_directory_uri() . '/js/hover.zoom.js', array( 'jquery' ) );
    wp_register_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ) );

    //  enqueue the script:
    wp_enqueue_script( 'bootstrap-script' );
    wp_enqueue_script( 'hover-script' );
    wp_enqueue_script( 'main-script' );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

?>

But when I use that code I just get a blank page for my website. Though I think I have made some progress.

And I apologize that this is going so slow :(

Thank you!

It's not a problem, different time zones don't help either =)

Try the below, I've removed the other scripts which aren't needed.

function custom_scripts() {
    // De-register the old scripts
    wp_deregister_script('main-script');

    // Register the scripts for this theme
    wp_register_script('main-script', get_template_directory_uri() . '/js/main.js', array('jquery'));

    // Enqueue the scripts
    wp_enqueue_script('main-script');
}

add_action('wp_enqueue_scripts', 'custom_scripts');

Well I can see my site again. But its still not editing the overlay effect. The only thing I can think of is maybe I am not edit the js files properly? Are you sure that the main.js file is the correct file? This is what is looks like.

/*!
 * JS Scripts
 */
// Placeholder
jQuery(function(){

      //Shortcode Popover
     jQuery("a[rel=popover]").popover()
      .click(function(e) {
        e.preventDefault()
      });

      //Shortcode Tooltip
      jQuery("a[rel=tooltip]").tooltip();

      //Data Tooltip
      jQuery("[data-toggle='tooltip']").tooltip();


       jQuery('.blue').hoverZoom({
                overlayColor: '#10547d',
                zoom: 0
            });

            jQuery('.green').hoverZoom({
                overlayColor: '#10547d',
                zoom: 0
            });

            jQuery('.pink').hoverZoom({
                overlayColor: '#bd2e75',
                zoom: 0
            });

            jQuery('.black').hoverZoom({
                overlayColor: '#2f2f2f',
                zoom: 0
            });

            jQuery('.alizarin').hoverZoom({
                overlayColor: '#10547d',
                zoom: 0
            });


});

I assume I was supposed to change the hexadecimal colors.

thanks!

Yep, change those values and you should start to see magic happen

well I am about to toss my computer out the window, because I am not getting any results. I have no idea what could be the problem. I tired clearing the cache, because wordpress can sometimes have that issue, but still nothing. :(

Please don't do that, we're going to go for gold now, if the below doesn't work the next step would be getting a copy of the theme.

function custom_scripts() {
    wp_dequeue_script('main-script');
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/main.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'custom_scripts', 11);

thanks Chris, you are really going beyond the call of duty!

But I tried out your code, but still no success. I guess you need a copy. What is the best way to go about this? Its a free template called Stanleywp. Should I send you the project files?

Hold fast, when I get home tonight I will mess around with it and find out why it's been so stubborn.

No rush man! Ill keep looking around the internet for solutions. Once again thank you very much!

Ok, got the child theme setup, debugged it and got it to work as expected using the previous two attempts. I've added a link below so you can compare what I have to what you have.

https://www.dropbox.com/s/35egqcklm2k1qnj/stanleywp-child.zip?dl=0

YES! Great job Chris! I see what I did wrong. I added a closing php tag at the end of my code. So here is your correct code

<?php

function custom_scripts() {
    wp_deregister_script('main-script');
    wp_register_script('main-script', get_stylesheet_directory_uri() . '/js/main.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'custom_scripts');

And this is my code.

<?php 

    function custom_scripts() {
    wp_dequeue_script('main-script');
    wp_enqueue_script('main-script', get_template_directory_uri() . '/js/main.js', array('jquery'));
}

add_action('wp_enqueue_scripts', 'custom_scripts', 11);

?>

its always something small like that! So are you not supposed to close the php code, in functions,php?

Thank You so much Chris, I truly appreciate the time you put in to help me. Have wonderful day!

The closing tag isn't required and it's recommend that you leave it off now days to avoid white space errors when the compiler is parsing the file, the main difference is instead of wp_dequeue_script, wp_enqueue_script I used wp_deregister_script, wp_register_script as I did in an earlier post above.

I also used get_stylesheet_directory_uri instead of get_template_directory_uri but I didn't see a difference with them either way.

Ok so what I learn from the issue. It is good practice to not close the php code in the functions.php file. And I need to do some research on wp_dequeue_script, and wp_deregister_script because I do not know the difference lol. And I remember seeing post about people using get_stylesheet rather then get_template.