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?

Answer 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.

Answer 2

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