Fix $ is not a Function WordPress Error

Currently, WordPress is the best website builder on the internet. It has gained its popularity due to the many features it offers. However, much like everything else, as good as this CMS may be, it comes with a few issues as well.

One of these issues is the $ is not a function WordPress error. This error can cause your website to display the 404 pages.

In this article, we would like to discuss the $ is not a function WordPress error.

What is the $ is not a function of WordPress Error?

$ is not a function WordPress error occurs when the code comes before the jQuery library. For example, if a plugin or theme calls a code before calling the right library, you get this error.

By default, WordPress doesn’t understand $ as jQuery and you have to make some modifications to fix this error. However, this process could be challenging for some users without any programming knowledge.

As always, before making any changes to the core files of WordPress, we recommend you get a full backup of your website. This is a must, because if you misplace a simple “;” you could completely ruin the website.

The backup is there to restore your website back to what it was before you made the modifications.

Use $ instead of jQuery in WordPress

One of the easy fixes is to use $ in WordPress instead of jQuery. You will have to enqueue the script in your theme’s functions.php file.

wp_enqueue_script("jquery");

Most WordPress theme and plugin developers are aware of this issue. Thus, they rather use jQuery instead of the $ sign to be safe.

For example, the normal jQuery anywhere should look like this:

$(“#element”).function();

In WordPress the jQuery looks like this:

jQuery(“#element”).function();

Writing jQuery in a script hundreds of times makes it harder to read and increases the size of the script. It’s recommended that you map jQuery to be mapped to $ in the footer of your website. Simply, copy and paste the following code in the footer file of your theme:

(function($) {
	// console.log($);
})( jQuery );

If you would like to add the code to the header of your theme, simply use the following code:

jQuery(document).ready(function( $ ) {
	// console.log($);
});

With this code, you can write a clean script for your website.

Use a New Name for jQuery

There are many changes you can make to the jQuery, one of them is the ability to change the $ to any particular name you have in mind. To use a new name for jQuery, simply use the following code and replace the name element with the name you have in mind.

var j = jQuery.noConflict();
j( "div p" ).hide();
// Do something with another library's $()
$( "content" ).style.display = "none";

Disable noConflict Mode

To turn off the jQuery.noConflict in WordPress, use the following command:

$ = jQuery.noConflict(true);

This code should turn off the noConflict mode completely.

The $.noConflict command gives you the ability to control the $ variable back to whatever library it was first assigned to. This command makes sure that jQuery doesn’t have any confliction with the $ object of other libraries.

Conclusion

In this article, we discussed the $ is not a function WordPress error. This error is usually caused when your code is called before calling the jQuery and if you are using $ instead of jQuery in WordPress.

By default, WordPress uses jQuery instead of the normal method of $ and this could cause your website to display the 404 error.

You can use a function in both header or footer to change the name $ to your desired name. Besides, you can disable the noConflict mode in WordPress. noConflict mode gives you the ability to control the $ variables and revert them to whatever library they were originally assigned to.

This mode prevents the confliction between the $ object of other libraries.