jquery script not enqueued in child theme

Question

I need a little bit of insight here with the following problem? I've created a child theme called 'test_child' which I am trying to extend in the following way:

This is the test_child/functions.php file:

<?php

function load_flaticon() {
    wp_enqueue_script(
            'flaticon', get_stylesheet_directory_uri() . '/js/flaticon.js', array('jquery')
    );
}
add_action( 'wp_enqueue_script', 'load_flaticon' );

?>

Then, this is the test_child/js/flaticon.js file:

jQuery(document).ready(function($) {
    $("a[href$='.pdf']").addClass('flaticon-pdf19');
    $("a[href$='.ppt']").addClass('flaticon-ppt');
    $("a[href$='.pptx']").addClass('flaticon-pptx2');
    $("a[href$='.doc']").addClass('flaticon-doc2'); 
    $("a[href$='.docx']").addClass('flaticon-docx'); 
    $("a[href$='.xls']").addClass('flaticon-xls1');
    $("a[href$='.xlsx']").addClass('flaticon-xlsx');  
});
// by the way have already tried the " .ready(function() { " version

Inside the test_child/header.php I can see somewhere the line:

<!-- wp_head() -->
<?php wp_head();?>

I believe I'm doing it 'by the book' (and I have studied other similar questions), but then again, there must be something I miss, because the script is not enqueued after all...

Could you please lend a fresh pair of eyes?

Answer 1

There are two parts in the question I want to address:

1. It didn’t work because the action uses a plural form: wp_enqueue_scripts, not wp_enqueue_script. I guess this happened, because the function you have to use here – wp_enqueue_script() – does use a singular.

2. You should not use the function wp_enqueue_script() with so many parameters.

   Register your scripts early, enqueue them late.

   function register_flaticon() {
       wp_register_script(
           'flaticon',
           get_stylesheet_directory_uri() . '/js/flaticon.js',
           array('jquery')
       );
   }
   function enqueue_flaticon() {
       wp_enqueue_script( 'flaticon' );
   }
   
   add_action( 'wp_loaded',          'register_flaticon' );
   add_action( 'wp_enqueue_scripts', 'enqueue_flaticon' );
   

   The reason for that is flexibility. There are four enqueue actions:

   • wp_enqueue_scripts
   • admin_enqueue_scripts
   • customize_controls_enqueue_scripts
   • login_enqueue_scripts

   If you register your script early enough, you or someone else can enqueue it then on one of the other actions, and collisions can be avoided, because WordPress will not register a script with the same handle twice. See also this thread about the naming convention for jQuery addons.

Answer 2

get_stylesheet_directory_uri() will open the current child theme directory uri, therefore, it will not get the specified file because it is child theme

To get the file use get_template_directory_uri() to get the directory path this will get template directory which you have specified in style.css i.e

Template:your_parent_theme_folder_name