wp_enqueue_script() not working at all

Question

I'm trying to enqueue JavaScript files using wp_enqueue_script(), but it isn't working at all. Here is my code:

function load_css_js() {
    wp_enqueue_style('gdgt-base', get_template_directory_uri() . '/css/gdgt-base.css');
    wp_enqueue_style('gdgt-icon', get_template_directory_uri() . '/icons/css/gdgt.css', true);
    wp_register_script('gdgt-base', get_template_directory_uri() . '/js/gdgt-base.js', array( 'jquery' ) , true);
    wp_enqueue_script('gdgt-base');
}

add_action('wp_enqueue_scripts', 'load_css_js');

However, when I deregister the default WP Javasciprt and register jquery from somewhere else, it works. What may cause this problem? Thanks for the help!

Answer 1

wp_enqueue_style and wp_enqueue_script accepts many parameters and it's very important to use them in correct order otherwise these functions will fail.

Here are complete set of parameters for each function.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

In your wp_enqueue_style you define $handle, $src correctly but $deps to true which is not correct. Same goes for wp_enqueue_script.

So here is your fixed function.

function load_css_js() {
    wp_enqueue_style( 'gdgt-base', get_template_directory_uri() . '/css/gdgt-base.css', false, NULL, 'all' );
    wp_enqueue_style( 'gdgt-icon', get_template_directory_uri() . '/icons/css/gdgt.css', false, NULL, 'all' );

    wp_register_script( 'gdgt-base', get_template_directory_uri() . '/js/gdgt-base.js', array( 'jquery' ), NULL, false );
    wp_enqueue_script( 'gdgt-base' );
}

add_action( 'wp_enqueue_scripts', 'load_css_js' );

For more information, read documentation for each function on codex.

Answer 2

For other idiots like myself, I thought I contribute here. :-)

I just spent an hour because I had written array( '' ) instead of array() in the dependencies.

Just know, that there's a difference between:

wp_enqueue_script( 'footerScript', get_stylesheet_directory_uri() . '/assets/js/appFooter.js', array( '' ), false, true );

and

wp_enqueue_script( 'footerScript', get_stylesheet_directory_uri() . '/assets/js/appFooter.js', array(), false, true );

... The first one will never load. The second one will. :-)

@Robert_Hue's answer led me to my answer.

Answer 3

When registering and enqueueing scripts, you don’t need to call wp_register_script() and wp_enqueue_script(). Just call wp_enqueue_script().

Basic syntax of wp_enque_script is :

wp_enqueue_script( string $handle, string $src = '', array $deps = array(), string|bool|null $ver = false, bool $in_footer = false )

Now as per your code, it should be like this :

function load_css_js() {
            wp_enqueue_style('gdgt-base-style', get_template_directory_uri() . '/css/gdgt-base.css');
            wp_enqueue_style('gdgt-icon', get_template_directory_uri() . '/icons/css/gdgt.css');
            wp_enqueue_script('gdgt-base-script', get_template_directory_uri() . '/js/gdgt-base.js', array( 'jquery' ) , '2019' true);
        }

add_action('wp_enqueue_scripts', 'load_css_js');

[visit] : https://developer.wordpress.org/reference/functions/wp_enqueue_script/
documentation for more information.