JQuery is a powerful scripting language that is used to alter HTML and CSS elements after loading a webpage of a website. Many plugins depend on JQuery and JQuery-Migrate to offer smooth animations on Menus, Carousels, Buttons and more. Let us know more on how to install JQuery on a Wordpress website manually using PHP code without using any plugin in this tutorial.
Note: Wordpress 5.5 update breaks many sites with a missing update to JQuery. Many free and paid plugins stopped working. The error says "Uncaught ReferenceError: jQuery is not defined". This tutorial helps solving that problem using php code examples.
How to Install JQuery on a Wordpress Website
All wordpress sites work with a factory theme or a custom theme. All themes use separate PHP files like header.php, footer.php, functions.php etc. You tweak or modify header.php file or functions.php file to install JQuery and JQuery-Migrate on your wordpress site.
Follow the below steps to install JQuery.
Step 1: Log into Wordpress site with an admin login account.
Step 2: Go to Appearance tab, choose Theme Editor option. Under Theme Files, click on header.php file. It will be opened for editing.
Step 3: Immediately after <head> tag, add the below code. Click on the Update File button to add jQuery( jquery site, google apis site) and JQuery-Migrate( jquery site, cdnjs) script to the head section of HTML.
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" type="text/javascript"></script> (or) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" type="text/javascript"></script> (or) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.3.1/jquery-migrate.min.js" type="text/javascript"></script> (or) <script src="https://code.jquery.com/jquery-migrate-3.3.1.min.js" type="text/javascript"></script>
Step 4: This is another way if you do not want to use Step-3. Here, you should edit functions.php file to add JQuery script to your site. Under Theme Files, click on functions.php file. It will be opened for editing.
Step 5: Just add the below PHP code at the end of functions.php file contents. Click Update File button to save the the file.
function add_new_jquery()
{
//https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js
wp_deregister_script( 'jquery-core' );
wp_register_script( 'jquery-core', "https://code.jquery.com/jquery-3.5.1.min.js", array(), '3.5.1' );
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', "https://code.jquery.com/jquery-3.5.1.min.js", array(), '3.5.1' );
wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'add_new_jquery' );
Step 6: Check the Running or loaded version of JQuery using the "Inspect" option of Chrome Developer tools.
This is how to install JQuery and JQuery-Migrate on your wordpress site in two different ways without the need for any Plugin.
How to Check Running or Loaded JQuery Version on any website
Some times it is required to check the version of running or loaded jQuery on a website as part of debugging. Google Chrome Developers Tools come with an opton "Console". Let us know how to check JQuery version using the Console Tab.
Step 1: Open any website using the Google Chrome or Opera browser.
Step 2: Press CTRL+SHIFT+I or Right click and click on Inspect option on the context menu. Choose "Console" tab.
Step 3: Type either of the below commands to get the JQuery version. In this case, you get 3.5.1 as the output.
console.log(jQuery.fn.jquery); (or) console.log(jQuery().jquery);
This is how you can successfully install and check the version of JQuery on a Wordpress site.
You can go through our other Wordpress Tutorials to learn more.
Share this Wordpress Tutorial with your friends and colleagues to encourage authors.