9

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

3 Answers 3

Reset to default
14

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 :( Commented Dec 23, 2014 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... Commented Dec 23, 2014 at 20:41
  • I've edited the comment. Please read that :) Commented Dec 23, 2014 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. Commented Dec 23, 2014 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? Commented Dec 23, 2014 at 20:50
8

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.