Let’s start from the very beginning. CDN (Content Delivery Network or Content Distribution Network) is the technology of geographically accurate delivery of content (files), so that the browser receives files as quickly as possible, due to close location of server to a user. Popular companies like Google, Yandex and other search engines have file delivery network of this kind. In web development such networks are often used to connect commonly used libraries, such as jQuery. Here is the reference to CDN from Google, where all the frequently used JavaScript libraries are located.

Related: How to host Google Analytics locally in WordPress to speed up your site?

Wrongly Including  jQuery in WordPress

We have noticed it many times and even did it without realizing the importance of the error while connecting jQuery in WordPress, by adding part of the document of this line in the <head>:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

The error means not the stopped work but that in WordPress there is a special program method of adding scripts to the page with their functions: wp_register_script (), wp_enqueue_script (), wp_deregister_script (), etc. Such a method is needed to prevent conflicts when you connect the same script by different plugins. It is indispensable, while optimizing the file downloads to speed up loading the whole page. So, if all of the scripts are properly connected, they can be combined into one software file, and forwarded to the browser in compressed form. It is right in the end, when there is order and rules that WordPress confirms to, because if everything was done according to the rules, then when you update and change functions the single standard will quickly or even unnoticed go on to updates.

RELATED:  How to Add Missing Jetpack Widgets in WordPress?

Correct Way of Including jQuery in WordPress

Correct way of including jQuery script means using the wp_enqueue_script () function. This connection corresponds to the standard and will protect you from conflict with connection of the same script in the plugins (the script will be connected once):

<?php 
function my_scripts_method(){
 wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );
?>

Paste this code in the theme’s functions.php file. Once the code is inserted in the <head> of the page the following line appears:

<script type='text/javascript' src='https://your-site.com/wp-includes/js/jquery/jquery.js?ver=3.6.0'></script>

Using CDN When Including jQuery in WordPress

The example above shows how to connect jQuery from the files of WordPress. However,  we would recommend you to connect jQuery CDN from Google. This connection has a number of advantages:

  • The file is given in a compressed form and weighs less.
  • If a visitor has visited the website where jQuery is already connected, then the browser cache will already has the script and it will reuse from the cache instead of reloading when a user visiting your website. We understand about 15-20% of websites use the connection from Google CDN for jQuery and this figure increases.
  • The file is loaded in a separate flow from external domain.
RELATED:  How to Insert AdSense Ads in WordPress with Google Site Kit?

To including jQuery from Google CDN library, you must first mark already registered in WordPress script (the file path to jQuery) and register yours. This is done by adding the following code in functions.php file of your active theme:

function my_scripts_method() {
// instead of "jquery-core" just "jquery", to disable jquery-migrate
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

jQuery-core means that the reference is replaced by jQuery script and an additional pluggable script  jqury-migrate.js is not used which is required for transition to jQuery 1.9.x version (instead of earlier versions). Including “jquery-migrate” plugin means that if you have an incompatibility errors (i.e., your code was written for earlier versions), jQuery functionality with no errors will work, and errors can be corrected as they are revealed.

As a result, we obtain the following lines in the head part of the document:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script type='text/javascript' src='https://your-site.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

Note that WordPress 5.5 or later versions do not need jQuery Migrate.

Don’t Use jQuery Migrate Plugin

If you do not need a plugin jquery-migrate.js, but only the jQuery, so you know what to do. To connect jQuery use the following code:

function my_scripts_method() {
 wp_deregister_script( 'jquery' );
 wp_register_script( 'jquery', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', false, null, true );
 wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Having cancelled “jQuery” (wp_deregister_script ( 'jquery');), we automatically cancel the binding mirgate of the plugin to jQuery and register “jQuery” again. As a result, we get only the following line:

<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>

In the above code, true at the end (false, null, true) means that the script is possible to be connected to the basement of the site. If there are other scripts that are connected to the head part and depend on jQuery, that despite the last argument true, jQuery will still be connected to the head part of the document.

RELATED:  Why and How to Regenerate Thumbnails in WordPress?

Related: How to disable Google Fonts in WordPress to improve page loading time?

Dynamic Version of jQuery from WordPress

You may probably need to connect the version of jQuery that is used in WordPress, but with the CDN service. The example below shows how to get the current version of the jQuery, used in WordPress and use it in the CDN link:

function my_scripts_method() {
 wp_enqueue_script( 'jquery' );
 $wp_jquery_ver = $GLOBALS['wp_scripts']->registered['jquery']->ver; 
 $jquery_ver = $wp_jquery_ver == '' ? '1.11.0' : $wp_jquery_ver;
wp_deregister_script( 'jquery-core' );
 wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/'. $jquery_ver .'/jquery.min.js' );
 wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method', 99 );

Thank you for reading this article. We hope it will be useful for you to include jQuery in WordPress without any problem.

Similar Posts

Leave a Reply

Your email address will not be published.