Importing WP Template: CSS Styles "appear" to be loading, JS files throwing error

Question

I am new at WP templating. I am trying to port my theme to a custom WordPress theme. I am getting several errors about my js files not import correctly from the functions.php file.

this is what my console errors show:

bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6 
Uncaught ReferenceError: $ is not defined
    at bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6

(anonymous) @ bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
jquery.easing.min.js?ver=4.9.2:1 
Uncaught ReferenceError: jQuery is not defined
    at jquery.easing.min.js?ver=4.9.2:1
    at jquery.easing.min.js?ver=4.9.2:1

(anonymous) @ jquery.easing.min.js?ver=4.9.2:1

(anonymous) @ jquery.easing.min.js?ver=4.9.2:1
jqBootstrapValidation.js?ver=4.9.2:937 
Uncaught ReferenceError: jQuery is not defined
    at jqBootstrapValidation.js?ver=4.9.2:937

(anonymous) @ jqBootstrapValidation.js?ver=4.9.2:937
contact_me.js?ver=4.9.2:1 
Uncaught ReferenceError: $ is not defined
    at contact_me.js?ver=4.9.2:1

(anonymous) @ contact_me.js?ver=4.9.2:1
agency.min.js?ver=4.9.2:6 
Uncaught ReferenceError: jQuery is not defined
    at agency.min.js?ver=4.9.2:6

Do I need to place special no conflict function for jQuery? what is happening here?

Here is all of my code for the functions.php file:

<?php


function wpgt_theme_styles() {

    //CSS files
    wp_enqueue_style('main_css', get_template_directory_uri() . 'style.min.css');
    wp_enqueue_style('contact_scss', get_template_directory_uri() . '/scss/contact.scss');
    wp_enqueue_style('global_scss', get_template_directory_uri() . '/scss/global.scss');
    wp_enqueue_style('masthead_scss', get_template_directory_uri() . '/scss/masthead.scss');
    wp_enqueue_style('mixins_scss', get_template_directory_uri() . '/scss/mixins.scss');
    wp_enqueue_style('navbar_css', get_template_directory_uri() . '/navbar.scss');
    wp_enqueue_style('portfolio_scss', get_template_directory_uri() . '/scss/portfolio.scss');
    wp_enqueue_style('services_scss', get_template_directory_uri() . '/scss/services.scss');
    wp_enqueue_style('timeline_scss', get_template_directory_uri() . '/scss/timeline.scss');
    wp_enqueue_style('variable_scss', get_template_directory_uri() . '/scss/variable.scss');
    wp_enqueue_style('agency_scss', get_template_directory_uri() . '/scss/agency.scss');



    //local bootstrap CSS
    wp_enqueue_style('bootstrap-grid_css', get_template_directory_uri() . '/css/bootstrap-grid.css');
    wp_enqueue_style('contact_scss', get_template_directory_uri() . '/css/bootstrap-grid.min.css');
    wp_enqueue_style('bootstrap-reboot_scss', get_template_directory_uri() . '/css/bootstrap-reboot.css');
    wp_enqueue_style('bootstrap-reboot.min_css', get_template_directory_uri() . '/css/bootstrap-reboot.min.css');
    wp_enqueue_style('bootstrap_css', get_template_directory_uri() . '/css/bootstrap.css');
    wp_enqueue_style('bootstrap.min_css', get_template_directory_uri() . '/css/bootstrap.min.css');



    //Google fonts
    wp_enqueue_style('Montserrat', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Montserrat:400,700');
    wp_enqueue_style('Kaushan', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Kaushan+Script');
    wp_enqueue_style('Droid', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic');
    wp_enqueue_style('Roboto', get_template_directory_uri() . 'https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700');


}



add_action('wp_enqueue_scripts', 'wp_enqueue_styles');


function wpgt_theme_js() {

        //local bootstrap JS

        wp_enqueue_script('bootstrap.bundle.min.js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', '', '', true);

        wp_enqueue_script('jquery.easing.min.js', get_template_directory_uri() . '/js/jquery.easing.min.js' , 'jquery', '', true);

        wp_enqueue_script('jqBootstrapValidation.js', get_template_directory_uri() . '/js/jqBootstrapValidation.js', '', '', true);



        //other JS files

        wp_enqueue_script('contact_me.js', get_template_directory_uri() . '/js/contact_me.js', '', '', true);

        wp_enqueue_script('agency.min.js', get_template_directory_uri() . '/js/agency.min.js', '', '', true);

        wp_enqueue_script('jquery.min.js', get_template_directory_uri() . '/js/jquery.min.js', 'jquery', '', true);

        wp_enqueue_script('jquery.js', get_template_directory_uri() . '/js/jquery.js', 'jquery', '', true);



}



add_action('wp_enqueue_scripts','wpgt_theme_js');


?>

Please let me know what I am doing wrong, ANY help is deeply appreciated.

Answer 1 · 2018-01-24T23:31:21Z

January 24, 2018 11:31pm

it looks like you are overthinking some stuff here. You do not need to enqueue jQuery on init. take a look at how these guys and enqueuing their scripts wp_dev

Answer 2 · 2018-01-18T23:24:15Z

January 18, 2018 11:24pm

jQuery needs to load before any other JS files that are dependent on it. While you're seeing several errors, they're all referring to the same thing: $ or jQuery is not defined.

Try enqueuing jquery.js or jquery.min.js (you only need one of them) above bootstrap.bundle.min.js and see if that makes a difference.

Edit

These days, WordPress loads jQuery automatically when another script requires it, so you need to look at how you're registering jQuery as a dependency for your other scripts.

wp_enqueue_script() accepts dependencies as an array. Therefore, based on this line in your current code:

wp_enqueue_script('jquery.easing.min.js', get_template_directory_uri() . '/js/jquery.easing.min.js' , 'jquery', '', true);

This needs to instead be:

wp_enqueue_script('jquery.easing.min.js', get_template_directory_uri() . '/js/jquery.easing.min.js' , array('jquery'), '', true);

Apply the same technique to all the scripts that require jQuery (based on your errors, this would be bootstrap, easing, jqBootstrapValidation, contact_me and agency.min.js)

Try doing this as well as removing your own enqueued versions of jquery.min.js and jquery.js and see if that fixes it.

Answer 3 · 2018-01-19T16:32:19Z

January 19, 2018 4:32pm

Made some changes to the code, here is the new set of code:

<?php 

// below code was added after first function and action call


// jQuery action, is this updating the local version from a CDN automatically? Will it be dynamic with future updates?
// Is this a bad place to put this section, can't I combine this with the below action?
function modify_jquery() {
 if (!is_admin()) {
 //wp_deregister_script('jquery');
 //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/x.xx.x/jquery.min.js', false, 'x.xx.x');
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'modify_jquery');








function wpgt_theme_js() {





        //local bootstrap JS

        wp_enqueue_script('bootstrap.bundle.min.js', get_template_directory_uri() . '/js/bootstrap.bundle.min.js', array('jquery'), '', true);



        // other jQuery Vendors

        wp_enqueue_script('jquery.easing.min.js', get_template_directory_uri() . '/js/jquery.easing.min.js' , array('jquery'), '', true);

        wp_enqueue_script('jqBootstrapValidation.js', get_template_directory_uri() . '/js/jqBootstrapValidation.js', array('jquery'), '', true);



        //other JS files

        wp_enqueue_script('contact_me.js', get_template_directory_uri() . '/js/contact_me.js', array('jquery'), '', true);

        wp_enqueue_script('agency.min.js', get_template_directory_uri() . '/js/agency.min.js', array('jquery'), '', true);



}



add_action('wp_enqueue_scripts','wpgt_theme_js');


?>

I added some changes to the lower 2/3rds of my functions file, but I am still getting errors in my console (even after adding jQuery). I also used that iQuery array in the dependency section as suggested, it still doesn't resolve all errors.

1.) Wondering if there is a salter way to incorporate the jQuery function with the other enqueues?

2.) I am still getting errors on when my theme loads. I've checked my hierarchy and the files point to a local hierarchy perfectly, any other suggestions. And why is it being called twice, I checked my index.php, header.php and footer.php, there are NO duplicates of my files being called there:

JS file call errors from console

bootstrap.bundle.min.js?ver=4.9.2:sourcemap:
6 Uncaught TypeError: Cannot read property 'fn' of undefined
    at bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
    at bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
    at bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6
(anonymous) @ bootstrap.bundle.min.js?ver=4.9.2:sourcemap:6


contact_me.js?ver=4.9.2:1 Uncaught TypeError: $ is not a function
    at contact_me.js?ver=4.9.2:1
(anonymous) @ contact_me.js?ver=4.9.2:1


agency.min.js?ver=4.9.2:6 Uncaught TypeError: a(...).scrollspy is not a function
    at agency.min.js?ver=4.9.2:6
    at agency.min.js?ver=4.9.2:6

I'm getting lost here since I am not sure why it's failing and I'm reluctant to just move forward without absolving these errors now.

Welcome to the Treehouse Community

Looking to learn something new?

Greg Schudel

Greg Schudel

Importing WP Template: CSS Styles "appear" to be loading, JS files throwing error

3 Answers

Jacob Mishkin

Jacob Mishkin

Joel Bardsley

Joel Bardsley

Edit

Greg Schudel

Greg Schudel

Joel Bardsley

Joel Bardsley

Greg Schudel

Greg Schudel

Greg Schudel

Greg Schudel