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!
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!
Share Improve this question edited Dec 23, 2014 at 20:21 Robert hue 8,5662 gold badges34 silver badges50 bronze badges asked Dec 23, 2014 at 20:16 DON TOLIVERDON TOLIVER 1911 gold badge1 silver badge3 bronze badges3 Answers
Reset to default 14wp_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.
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.
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/reference/functions/wp_enqueue_script/
documentation for more information.