Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Maja B.
Maja B.
12,984 Points
Posted by Maja B.
Maja B.
12,984 Points

WordPress - How to enqueue script to child theme

Please help me enqueue custom.js to my pho-child theme:

Here is how I successfully enqueue all the CSS styles:

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'pho', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'pho-child', get_stylesheet_uri(), array('pho')  );
    wp_enqueue_style( 'grid', get_stylesheet_directory_uri() . '/css/grid.css');
}

When I try to enqueue also a JS file I write this:

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'pho', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'pho-child', get_stylesheet_uri(), array('pho')  );
    wp_enqueue_style( 'grid', get_stylesheet_directory_uri() . '/css/grid.css');
}
function wp_enqueue_scripts() {
    wp_enqueue_script( 'pho-child-custom-script', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}

and get the error :(

So how should I do it?

The JS file I'm trying to enqueue lives in themes/pho-child/js/custom.js

Please help.

1 Answer

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Hi Maja,

Try this please

function theme_js() {
    wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}

add_action('wp_enqueue_scripts', 'theme_js');
Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Hugo,

if I do what you suggest I get custom.js enqued in the DOM now (Chrome - Inspect element) - but strangely as if it was situated in the themes/pho/js/custom.js folder.

But it is not there. It is in the child theme themes/pho-child/js/custom.js

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

If its in the child theme directory you can try:

function theme_js() {
    wp_enqueue_script( 'theme_js', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ), '1.0', true );
}

add_action('wp_enqueue_scripts', 'theme_js');
Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Now it looks better. In the Chrome inspector it is listed as:

<script type="text/javascript" src="http://localhost/ajp/wp-content/themes/pho-child/js/custom.js?ver=1.0"></script>

THANKS!

Now I need to get that custom.js working.

May I send you the code (very simple, just a simple alert when I click on something) which I have written inside to test if its working. Namely, its not. Or do you thing it is better to open a new forum question?

I would be very happy if I can ask you already know the whole story :)

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Please open a new thread so the community can learn and contribute.

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

ok and many thanks for helping me with this one, Maja

Maja B.
Maja B.
12,984 Points
Maja B.
Maja B.
12,984 Points

Hi, Hugo,

There is one more thing I'd like to ask you - it is very probable that my question has to do directly with enqueueing JS file to a child theme so I guess its ok if I post my question here.

The custom.js file that you've helped me enqueue works only if I use jQuery symbol, so like this:

jQuery("#imageGallery a").click(function(){
        alert ('hello');
    });

But it does not work if I write a $ sign for jQuery, like this:

$("#imageGallery a").click(function(){
        alert ('hello');
    });

Could that have anything to do with the way we've enqueued custom.js? You know those jQuery dependencies etc.

If you can help me with this one, too - it would be great,

Maja

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Wordpress uses jQuery in noConflict mode by default. That is why you reference it using jQuery as the variable name, not $.

If you want to use $ in your code, there are a couple of functions you can use depending where you are loading your jQuery.

Have a look here