How to Include jQuery from CDN for WordPress?

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 computer of the user can upload the file as quickly as possible, due to close location of server to a user. Google, Yandex and other search systems, and not only systems, 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.

Wrongly Including  jQuery in WordPress?

I 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/1.12.4/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.

Correct Way of Including jQuery in WordPress

Correct 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://wptest.ru/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>

Using CDN When Including jQuery in WordPress

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

  1. The file is given in a compressed form and weighs less;
  2. If a visitor has visited the website where jQuery is also connected, then  cache already has the script and it will not boot at all, when visiting your  website. I have read an analytical and statistical article on this subject – about 15-20% of websites use the connection CDN Google for jQuery and this figure increases;
  3. The file is loaded in a separate flow.
RELATED:  What is Administrator Role in WordPress?

To including jQuery with CDN Google, you must first mark already registered in WordPress script (the file path to jQuery) and register yours. This is done by adding this code in functions.php:

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, it 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 with 1.9.x version (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://site.ru/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

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>

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:  How to Edit wp-config.php File in WordPress?

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.

Article last updated on November 22, 2020

Leave a Comment