Wordpress child theme enqueue custom javascript

Question

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.

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?

Can you access the script at the linked URL? Is it's encoding and structure standard? — yelly
– yelly, Commented Oct 8, 2013 at 14:26
@yelly The script (custom.js) is currently nothing more than jQuery(document).ready(function(){ alert('test'); }) Simply to check if it's being reached through my include — Greatmonkey1
– Greatmonkey1, Commented Oct 8, 2013 at 23:11
I mean, when you say it is properly linking, can you access the script through the browser at the linked URL? — yelly
– yelly, Commented Oct 9, 2013 at 13:22
@yelly Ah, Like that. Well it turns out I cant. I now see that the URL returned by get_stylesheet_directory() includes all the directories on the server (like public_html, etc these kind of things). When copying that entire link into my url bar it gives page not found. When taking out all the other directories and just going straight to <home>/wp-content/themes/<mychildtheme>/js/custom.js I get to see the script in text format on my browser.Did that make sense? So I guess there's the issue. I need to find another way of getting the child theme URL so that it doesnt include all that — Greatmonkey1
– Greatmonkey1, Commented Oct 9, 2013 at 14:02

yelly · Accepted Answer · 2013-10-09 15:19:03Z

2

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.

answered Oct 9, 2013 at 15:19

yelly

1613 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Wordpress child theme enqueue custom javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related