Wordpress scripts not loading correctly?

Question

I have a static html theme I am trying to convert into a WorsPress theme. I have some troubles loading the scripts.

The scripts are being loaded, but they don't work for some reason.

I can see in my source code that jquery is being loaded:

<script type='text/javascript' src='url/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='url/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

So in my template folder I have a folder "assets" in this folder I have my scripts in the "js" folder. This is how I load my scripts into the setup.php of my theme.

/**
 * Theme assets
 */
function assets() {
  wp_enqueue_style('style', get_stylesheet_directory_uri() . '/style.css', false, null);

  if (is_single() && comments_open() && get_option('thread_comments')) {
    wp_enqueue_script('comment-reply');
  }

  //header scripts
    wp_enqueue_script('backstretch', get_template_directory_uri() . '/assets/js/backstretch.js', ['jquery'], null, false);
    wp_enqueue_script('imagesloaded', get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.min.js', ['jquery'], null, false);

  //footer scripts    
    wp_enqueue_script('main-js', get_template_directory_uri() . '/assets/js/main.js', ['jquery'], null, true);

}
add_action('wp_enqueue_scripts', __NAMESPACE__ . '\\assets', 100);

So in my main.js I get an error in my console and it says

Uncaught TypeError: $ is not a function (on the $(document).ready line)

I have no idea what's causing this error, since the scripts are being loaded.

I am not sure. I thought I read somewhere that it happens automatically? — Frank Lucas
– Frank Lucas, Commented Mar 14, 2016 at 10:32
inspect the rendered source to check if you have reference to jquery. If not, then add it. — Bikee
– Bikee, Commented Mar 14, 2016 at 10:33

Atif Tariq · Accepted Answer · 2016-03-14 11:14:30Z

1

Please Use this:

in your main.js change

$(document).ready

to this

jQuery(document).ready

Also please change all $ to jQuery in your main.js

The tricky thing is this particular copy of jQuery is in compatibility mode by default. That means that the typical '$' shortcut for jQuery doesn't work, so it doesn't conflict with any other JavaScript libraries that use the dollar sign also, like MooTools or Prototype.

Many plugin authors and theme developers are aware of this, and they use 'jQuery' instead of '$' to be safe.

answered Mar 14, 2016 at 11:14

Atif Tariq

2,7701 gold badge31 silver badges35 bronze badges

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

Comments

Ahmed · Accepted Answer · 2016-03-14 10:46:33Z

0

Can you Try this :

wp_register_script('backstretch', get_template_directory_uri() . '/assets/js/backstretch.js', ['jquery'], null, false);
    wp_enqueue_script('backstretch');
    wp_register_script('imagesloaded', get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.min.js', ['jquery'], null, false);
    wp_enqueue_script('imagesloaded');

answered Mar 14, 2016 at 10:46

Ahmed

1,77418 silver badges23 bronze badges

1 Comment

Frank Lucas Over a year ago

I've tried this and the error goes away but I don't think the scripts work

Ahmed · Accepted Answer · 2016-03-14 11:09:43Z

0

As in the header scripts you are already loading jQuery on the page, then you you don't have to load jQuery this way [jQuery] but array('jquery') and it is not required everytime, update to this:

wp_register_script('backstretch', get_template_directory_uri() . '/assets/js/backstretch.js', ['jquery'], null, false);
    wp_enqueue_script('backstretch');
    wp_register_script('imagesloaded', get_template_directory_uri() . '/assets/js/imagesloaded.pkgd.min.js', ['jquery'], null, false);
    wp_enqueue_script('imagesloaded');

edited Mar 14, 2016 at 11:09

Ahmed

1,77418 silver badges23 bronze badges

answered Mar 14, 2016 at 10:35

Jai

74.8k12 gold badges77 silver badges104 bronze badges

2 Comments

Frank Lucas Over a year ago

I've tried this and it didn't work, gives same error unfortunately

Frank Lucas Over a year ago

I changed it as you suggested but it doesn't work :( Same error

Collectives™ on Stack Overflow

Wordpress scripts not loading correctly?

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related