How to fix WordPress “Uncaught TypeError: $ is not a function” jQuery Error?

As you may have noticed during WordPress development, sometime it’s very hard to figure it out how to enqueue script right way?

Should I just add script at the bottom of page in footer? Should I add script in the header of WordPress site? Well, there are some standards established by WordPress framework which everybody should follow.

In this tutorial, we will go over how to enqueue script Typed.min.js right way to your WordPress theme and fix Uncaught TypeError: $ is not a function jQuery error.

This tutorial will help you if you have any of below questions:

• How to Properly Add JavaScripts and Styles in WordPress
• How to enqueue Scripts and Styles in WordPress?
• Loading CSS and JavaScript Into WordPress the Right Way

Let’s understand the scenario first:

For my other Premium site, I wanted to use Typed.min.js with correct WordPress enqueue options.

While working on setting up above effect, I found some strange error which I never faced before. Take a look at that error below:

Above error happened before wrong way to include jQuery to my site.

Before – Using putting below code into Footer Manually:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://crunchify.com/premium/wp-content/themes/crunchify-premium/js/typed.min.js" type="text/javascript"></script>

<script>
  $(function(){
      $(".element").typed({
        strings: ["App Shah...", " an Engineer (MS)...","a WordPress Lover...", "a Java Developer..."],
        typeSpeed:100,
        backDelay:3000,
        loop:true
      });
  });
</script>

After – Right way to enqueue script in functions.php

function typed_script_init() {
    wp_enqueue_script( 'typedJS', 'https://crunchify.com/premium/wp-content/themes/crunchify-premium/js/typed.min.js', array('jquery') );
}
add_action('wp_enqueue_scripts', 'typed_script_init');

function typed_init() {
    echo '<script>
	jQuery(function($){
      		$(".element").typed({
      	 	strings: ["App Shah...", " an Engineer (MS)...","a WordPress Lover...", "a Java Developer..."],
      	 	typeSpeed:100,
     		backDelay:1000,
     		loop:true
	});
     });</script>';
}
add_action('wp_footer', 'typed_init');

There are two things in above code:

1. First of all we are using wp_enqueue_script function which has 3rd parameter to use jQuery loaded with WordPress. There is no need to add jQuery manually . This is THE right way to enqueue script in wordpress.
2. We also changed function $(function(){ to jQuery(function($){ in order to fix Uncaught TypeError: $ is not a function error.

Hope this will help you fix and enqueue jQuery error on your site.

The post How to fix WordPress “Uncaught TypeError: $ is not a function” jQuery Error? appeared first on Crunchify.

Author: App Shah