How to Include jQuery from Google CDN in WordPress?

by

CDN (Content Delivery Network) is the technology to deliver content (files) from the nearest server to the user’s location. This helps the user’s browser to receives files as quickly as possible and avoid network latency. Popular companies like Google, Yandex and other search engines have their own file delivery network. In web development, such networks are often used to connect commonly used libraries, such as jQuery. In this article, we will explain how to properly include jQuery from Google CDN.

Wrongly Including  jQuery in WordPress

Many users connect jQuery by adding the following code in the <head> section of WordPress site:

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

This does not mean it will stop working, but in WordPress there is an appropriate 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. From the speed perspective, if all scripts are properly connected, you can combine them into one file and serve as a static file to browsers in a compressed form.

Correct Way of Including jQuery in WordPress

Correct way of including jQuery script means using the wp_enqueue_script () function. This connection is the standard way in WordPress and will protect you from conflict with connections of the same script from multiple plugins and theme (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, you will see the following code in the source:

<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 the 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 HTTP request from external domain.

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 source code 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 footer 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.

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 your WordPress site without any problem.

Leave a Comment