WordPress child theme enqueue custom javascript

I’m having some trouble using a custom javascript file in my WP child theme.

What I’ve done in order to try and only make changes to the child theme is create a functions.php in my child theme’s root folder. Like that I believe this functions.php to be prepended to the actual theme’s fucntions.php file.

Read More

Now in this functions.php I want to enqueue my custom javascript file and thats where I get stuck. I’m having some difficulties thoroughly understanding the enqueue function but I have basically grabbed the enqueue function used in the original functions.php and I’ve altered it so it would point towards my child theme’s “js” folder and then to the custom.js file in there.

Here is what my child functions.php looks like:

<?php
define( 'CHILD_DIR', get_stylesheet_directory() );
wp_enqueue_script('responsive-scripts', CHILD_DIR. '/js/custom.js');
?>

It looks like it is properly linking, or at least pointing to the correct file when I check my chrome console but it does say that it’s not found (404) When I check the network tab in chrome it says the custom.js file’s type is text/html (not application/javascript, which is what I see for my other javascript files), also for Time it says “pending”.

Could anyone help me see where I’m going wrong?

Related posts

Leave a Reply

1 comment

  1. The function you want to be using is get_stylesheet_directory_uri().

    This is because get_stylesheet_directory will return the path to the stylesheet directory, which only makes sense in the context of server-side scripts, meaning it is the function you should use for things like includes.

    On the other hand, get_stylesheet_directory_uri() will give you the URI of the stylesheet directory, which can be used in client-side contexts, such as linking scripts or stylesheets.