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-3.6.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/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://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.10/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:
- First of all we are using
wp_enqueue_scriptfunction 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. - We also changed function
$(function(){tojQuery(function($){in order to fixUncaught TypeError: $ is not a functionerror.
Hope this will help you fix and enqueue jQuery error on your site.
As per suggestion from commenter Jaikangam, here are few more options to fix this error:
If you have file crunchify.js then other option is to start the file with like this.
Option-1)
(function($){
$(document).ready(function(){
// write code here
});
Option-2)
jQuery(document).ready(function(){
// write code here
});
})(jQuery);
Happy blogging.