wordpress functions.php not loading javascript files

Question

I'am trying to include all my css and JS files of a theme using functions.php

Folowing is what i have done so far

 <?php

    function blogroom() {

        wp_enqueue_style('bootstrap',  get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
        wp_enqueue_style('loaders',  get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
        wp_enqueue_style('iconsmind',  get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
        wp_enqueue_style('hamburgers',  get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
        wp_enqueue_style('font-awesome-css',  get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
        wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/style.css');
        wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/custom.css');
        wp_register_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
        wp_register_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
        wp_register_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
        wp_register_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
        wp_register_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
        wp_register_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
        wp_register_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
        wp_register_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
        wp_register_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );
        wp_enqueue_script( 'mainjs' );    
     }

    add_action( 'wp_enqueue_scripts', 'blogroom' );


?>

Here, this only loads my CSS file and not my js files. not a single javascript file is loaded.

Can someone please help?

Check my answer and let me know if it works

melvin
– melvin

2018-06-04 17:31:06 +00:00
Commented Jun 4, 2018 at 17:31 — melvin
– melvin, Commented Jun 4, 2018 at 17:31
wp_enqueue_script instead of wp_register_script.....

random_user_name
– random_user_name

2018-06-04 18:05:03 +00:00
Commented Jun 4, 2018 at 18:05 — random_user_name
– random_user_name, Commented Jun 4, 2018 at 18:05

Ovidiu · Accepted Answer · 2018-06-04 18:02:53Z

1

You are only registering the scripts without enqueuing them.

Do for each script the same as you did for main.js, meaning for each registered script, enqueue it

wp_enqueue_script( 'your registered script name' );

Also make sure you have wp_head() and wp_footer() in your theme header and, respectively the footer.

answered Jun 4, 2018 at 18:02

Ovidiu

16714 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

random_user_name Over a year ago

Might be worth pointing out that wp_register_script is not necessary, unless you're going to localize_scripts - so that can be skipped, and just do the wp_enqueue_script.... otherwise, just adding wp_enqueue_scripts makes the functions file that much longer / more verbose / difficult to maintain.

random_user_name · Accepted Answer · 2018-06-04 18:44:38Z

I think this may be due to a misunderstanding of wp_register_script vs wp_enqueue_script.

wp_register_script only tells WP that there is a script at the given location, and gives it a "handle" to be used for other purposes. wp_enqueue_scripts tells WP to use the script. And, there's two formats - the "long" format is like wp_register_script, so you can tell WP where the script is, AND to load it, all in one command.

The code below will work - I've changed your wp_register_script calls to wp_enqueue_script:

function blogroom() {
    wp_enqueue_style('bootstrap',  get_stylesheet_directory_uri() . '/assets/lib/bootstrap/dist/css/bootstrap.min.css');
    wp_enqueue_style('loaders',  get_stylesheet_directory_uri() . '/assets/lib/loaders.css/loaders.min.css');
    wp_enqueue_style('iconsmind',  get_stylesheet_directory_uri() . '/assets/lib/iconsmind/iconsmind.css');
    wp_enqueue_style('hamburgers',  get_stylesheet_directory_uri() . '/assets/lib/hamburgers/dist/hamburgers.min.css');
    wp_enqueue_style('font-awesome-css',  get_stylesheet_directory_uri() . '/assets/lib/font-awesome/css/font-awesome.min.css');
    wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/style.css');
    wp_enqueue_style('theme-style',  get_stylesheet_directory_uri() . '/assets/css/custom.css');
    wp_enqueue_script( 'bootstrap-js', get_template_directory_uri() . '/assets/lib/bootstrap/dist/js/bootstrap.min.js');
    wp_enqueue_script( 'imageloaded', get_template_directory_uri() . '/assets/lib/imagesloaded/imagesloaded.pkgd.min.js', array( 'bootstrap-js' ) );
    wp_enqueue_script( 'tweenmax', get_template_directory_uri() . '/assets/lib/gsap/src/minified/TweenMax.min.js', array('imageloaded') );
    wp_enqueue_script( 'scroll-to-plugin', get_template_directory_uri() . '/assets/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js', array('tweenmax') );
    wp_enqueue_script( 'customToEase', get_template_directory_uri() . '/assets/lib/CustomEase.min.js', array('scroll-to-plugin') );
    wp_enqueue_script( 'configJs', get_template_directory_uri() . '/assets/js/config.js', array('customToEase') );
    wp_enqueue_script( 'zanimation', get_template_directory_uri() . '/assets/js/zanimation.js', array('configJs') );
    wp_enqueue_script( 'corejs', get_template_directory_uri() . '/assets/js/core.js', array('zanimation') );
    wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/assets/js/main.js', array('corejs') );  
 }

add_action( 'wp_enqueue_scripts', 'blogroom' );

Typically, you would only use wp_register_script in a few scenarios - here's two common ones:
1. You want to localize_script using wp_localize_script (this permits you to output javascript variables from your PHP that would be considered "related" to the registered script)
2. You want to register the script because you may or may NOT output the scripts later (this is particularly useful when authoring a shortcode, you can register the script, set a "flag" if the shortcode is rendered, and the footer can output the scripts only if the flag is set). This method can be seen in this article: How to load JavaScript like a WordPress Master

Collectives™ on Stack Overflow

wordpress functions.php not loading javascript files

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related