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 trialGreg Schudel
4,090 PointsImporting 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
Jacob Mishkin
23,118 Pointsit 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
31,249 PointsjQuery 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
4,090 PointsI 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
31,249 PointsHi 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
4,090 PointsMade 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
4,090 PointsI'm just gonna start with another theme that requires less JS and CSS files and then re-trouble shoot from there.