jquery script not enqueued in child theme

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?

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 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.

Method 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


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x