0

After hours and hours of trying i can't get my head around it, I'm trying to wp_enqueue_script my custom js but WordPress is always looking for it in the parent theme folder, here is what i have tried lately without any success.

My parent theme is Twentysixteen,

Directly wp_enqueue_script:

function assets() {
         wp_enqueue_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true);
         wp_localize_script( 'ajax_filter', 'mdu', array(
             'nonce'    => wp_create_nonce( 'mdu' ),
             'ajax_url' => admin_url( 'admin-ajax.php' )
         ));
    }
    add_action('wp_enqueue_scripts', 'assets', 100 );

Register the wp_register_script before wp_enqueue_script:

 function assets() {
     wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true);
     wp_enqueue_script('ajax_filter');
     wp_localize_script( 'ajax_filter', 'mdu', array(
         'nonce'    => wp_create_nonce( 'mdu' ),
         'ajax_url' => admin_url( 'admin-ajax.php' )
     ));
}
add_action('wp_enqueue_scripts', 'assets', 100 );

And also this solution, where I wp_deregister_script the parent theme scripts,

function assets() {
     wp_deregister_script('parent-script-handle');
     wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true);
     wp_enqueue_script('ajax_filter');
     wp_localize_script( 'ajax_filter', 'mdu', array(
         'nonce'    => wp_create_nonce( 'mdu' ),
         'ajax_url' => admin_url( 'admin-ajax.php' )
     ));
}
add_action('wp_enqueue_scripts', 'assets', 100 );

And i'm following up the recommandations form WordPress:

https://developer.wordpress.org/themes/advanced-topics/child-themes/#enqueueing-styles-and-scripts

EDIT: fixed some coding errors Here is my full functions.php content

<?php
/**
 *
 * Functions and definitions.
 *
 */

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {

            $parent_style = 'twentysixteen-style'; // This is 'twentysixteen-style' for the Twenty Sixteen theme.

                wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
                wp_enqueue_style( 'child-style',
                                get_stylesheet_directory_uri() . '/style.css',
                                        array( $parent_style ),
                                                wp_get_theme()->get('Version')
                                                    );
}


//enqueue and localizing the Javascript.
 function assets() {
     //wp_deregister_script('parent-script-handle');
     wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true);
     wp_enqueue_script('ajax_filter');
     wp_localize_script( 'ajax_filter', 'mdu', array(
         'nonce'    => wp_create_nonce( 'mdu' ),
         'ajax_url' => admin_url( 'admin-ajax.php' )
     ));
}
add_action('wp_enqueue_scripts', 'assets', 100 );

Finally here is the error in my console:

GET http://192.168.33.10/wp-content/themes/twentysixteen/js/ajax-filter-posts.js?ver=4.7.2 404 (Not Found)

My JS files is in the twentysixteen-child/js/ folder.

I'm really confused on how this work, and what i'm doing wrong to have this js not being loaded and WP pointing to the parent theme…

Thanks for any help and clarification !

kindly.

Matth.

  • I hope your child theme is activated and function.php listed above is in /twentysixteen-child/function.php – KAGG Design Feb 4 '17 at 8:54
  • @KAGGDesign, I confirm this is the case, and if my understanding is correct I wouldn't have the error message in the console if the theme was not activated and as well as the functions.php not set at the proper place. – Matthieu Ducorps Feb 4 '17 at 9:00
  • BTW, you have some errors in code, but they should not affect. 1. $parent_style = 'twentysixteen-style'; // as your theme uses it 2. wp_deregister_script('parent-script-handle'); // has no effect. no such script 'parent-script-handle' exists in twentysixteen theme 3. in add_action priority 100 has no effect in your case – KAGG Design Feb 4 '17 at 9:01
  • Ah ok, didn't got that i though it was a generic string to call the parents styles and scripts… Fixing this now. – Matthieu Ducorps Feb 4 '17 at 9:05
  • The problem could be in caching. Your code wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], null, true); uses null as 4th parameter. In this case, WP does not add any version number to the end of js path. However, in your console we see ?ver=4.7.2 Try to register script with default parameters, like that: wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery']); – KAGG Design Feb 4 '17 at 9:13
2

This is the proper way to load a custom javascript in your child theme, wp_localize_script is only necessary if you need to exchange data between JS and PHP (Client and server).

function assets() {
     wp_register_script('ajax_filter', get_stylesheet_directory_uri() . '/js/ajax-filter-posts.js', ['jquery'], '1.0', false);
     wp_enqueue_script('ajax_filter');
     wp_localize_script( 'ajax_filter', 'mdu', array(
         'nonce'    => wp_create_nonce( 'mdu' ),
         'ajax_url' => admin_url( 'admin-ajax.php' )
     ));
}
add_action('wp_enqueue_scripts', 'assets');

So my issue as noticed by @KAGG was that i was loading this JS from another file…

Thanks for his help !

Matth

1

It seems you have the same code in parent theme: /twentysixteen/functions.php This is the only explanation why get_stylesheet_directory_uri() returns /wp-content/themes/twentysixteen but not /wp-content/themes/twentysixteen-child

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.