Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress WordPress Theme Development The WordPress Loop Adding the Loop to the index.php File

Greg Schudel
Greg Schudel
4,090 Points

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

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.

3 Answers

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

Joel Bardsley
Joel Bardsley
31,249 Points

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.

Greg Schudel
Greg Schudel
4,090 Points

I thought this "might" have been the issue, but isn't jQuery bundled in with jquery? Hence, if that's true, why would I have that problem? Also, aren't the errors "$ is not defined" and "jQuery is not defined" very ambiguous, meaning the error really could mean anything?

Or am I overcomplicating things?

Joel Bardsley
Joel Bardsley
31,249 Points

Hi Greg, I've edited my original answer - I wasn't aware about WordPress now automatically loading jquery when needed. Hopefully this will help out.

Regarding the error messages, it's one of those you'll never forget after you encounter it the first time, but for some added reading material, here's an in-depth article about it that explains it better than I ever could: Why is jQuery Undefined?

Greg Schudel
Greg Schudel
4,090 Points

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.

Greg Schudel
Greg Schudel
4,090 Points

I'm just gonna start with another theme that requires less JS and CSS files and then re-trouble shoot from there.