6

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!

Improve this question
12

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.

Improve this answer
12
  • EDIT: It looks like it is loading the JS file, but the code on the JS file doesn't work. (It works if I deregister the default jQuery). | Unfortunately, the fixed code isn't working :( – DON TOLIVER Dec 23 '14 at 20:37
  • I just tested it, and it's working fine. I think in your theme some other function is overriding the output. Search for other wp_enqueue_scripts functions... – Robert hue Dec 23 '14 at 20:41
  • I've edited the comment. Please read that :) – DON TOLIVER Dec 23 '14 at 20:42
  • That's totally different topic why your code in JS files are not working. The main reason for JS code not working with core jQuery but working with external jQuery could be that the core jQuery runs under noconflict mode. And your JS code is not. You will need to change your JS code for jQuery noconflict. – Robert hue Dec 23 '14 at 20:46
  • The thing is, I'm loading the latest jQuery from code.jquery.com/jquery-latest.min.js and it works. So what may cause the conflict? – DON TOLIVER Dec 23 '14 at 20:50
3

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.

Improve this answer
0

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.

Improve this answer

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.