Updating jQuery without breaking WordPress
I've been working on troubleshooting WordPress performance issues for a while and one of the things that I found is that the version of jQuery used in WordPress is not secure and is far from the latest version. Normally this would be a nonissue. WordPress updates jQuery to the latest 3.x version and we are set, right? Well, with a project as large as WordPress is not as easy to do so. There are hundreds if not thousands of plugins and themes using the version of jQuery currently installed with WordPress so just updating will likely break a lot of sites. So what's the alternative? We can change the jQuery version we use in the front end and leave the version used in the administrator and customizer screens. For my own theme, I chose to add this to my theme's `functions.php`. For client work I would create a plugin for it. The code consists of two parts: 1. The definition of the function that we want to use 2. Functions and filters for adding SRI attributes The first function will first check if we are in the admin screens or in the customizer. If we are then we return, we have nothing to do. Next we remove jQuery, jQuery Core, and jQuery Migrate. We follow this by adding the scripts again with `register_script` and `enqueue_scripts`. The thing we need to pay particular attention to is how we add `jquery` with `jquery-core` as a dependency so that other scripts can just use jquery as a dependency as well. The final step on this part of the script is to use the `enqueue_scripts` action to run the code in the function. ```php ` elements of the script tag with the integrity and crossorigin attributes before putting `/>` back on the string. Once the function is written we use the [script\_loader\_tag](https://developer.wordpress.org/reference/hooks/script_loader_tag/) hook to call the function we created for each script and insert the attributes we need. ```php ", "integrity='sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=' crossorigin='anonymous'>", $tag ); } return $tag; } add_filter( 'script_loader_tag', 'add_jquery_attributes', 10, 2 ); function add_jquery_migrate_attributes( $tag, $handle ) { if ( 'jquery-migrate' === $handle ) { return str-replace( ">", "integrity='sha256-APllMc0V4lf/Rb5Cz4idWUCYlBDG3b0EcN1Ushd3hpE=' crossorigin='anonymous'>", $tag ); } return $tag; } add_filter( 'script_loader_tag', 'add_jquery_migrate_attributes', 10, 2 ); ``` It is important to remember that the integrity attribute is exclusive to the CDN where you're pulling the code from. In this case, the integrity attribute will fail if you try to download a different version from the same CDN or the same verision from a different CDN. **_It is also important to test these changes on your code. It worked for me but it may not work with your plugins and themes._**