WordPress scripts not loading correctly?

2 Views

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.

Read More

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.

Post Views: 2

Related posts

3 comments

  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.

  2. 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');

  3. 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');

Comments are closed.