3 ways to use jQuery in your Wordpress website

Introduction

Hello Everyone, 
Welcome to Web-Brackets.com, today I am going to show you 3 different ways to use jQuery in your website, 

1. What is jQuery?
2. How to check if your theme supports jQuery?
3. First way: using functions.php (backend)
4. Second way: using page builder such as Elementor or WPBakery 
5. Last way: using Plugin

What is jQuery?

The answer is: jQuery is one of the most public Javascript Libraries for websites & Wordpress really depends on jQuery for the client-side especially in the dashboard & you can define the jQuery code by using jQuery class or using $ function like 

<script>
	$(".CSS-Selector").eventFunction(() => {
		//Do something 
	}); 
</script>

How to check if your theme supports jQuery?

you will need to make sure that your website already contains the jQuery files, this will be by using Developer tools (Inspect element) and check the console for this text “JQMIGRATE: Migrate is installed” or you can use any of these ways and make sure to not get an error says “jQuery is undefined” or “jQuery is not a function”, and this error will be shown in the console log 

You can view the console log by clicking on F12 or Ctrl + Shift + I , and for mac users using Command + Shift + I or right click on mouse then inspect element in any OS 

you can add jQuery by using this code into the functions.php 

wp_deregister_script('jquery'); 
wp_register_script('jquery', '//code.jquery.com/jquery-3.6.0.min.js', false, '3.6.0'); 
wp_enqueue_script('jquery');

1- Using functions.php 

You can use jQuery by adding a simple Hook to your template, this Hook is called “wp_footer”, all you need to do is opening your functions.php file and scroll to the last line and add this code 

<?php 
	add_action('wp_footer', function(){
		?>
		<script>
				jQuery(document).ready(($) => {
					//Here you can write your code like 
					//console.log('Hello from jQuery');
				});
			</script>
		<?php 
	});
?>

Note : Do not use ‘wp_head’, because it will be added before the script which contains the jQuery install link

2-page builder

In all page builders, you will find always an HTML element, this HTML element you can add a javascript tag to it, but this way will not cover the entire site just the page which contains the element if you are looking to add global code you can use the first way or the next way :)

Exactly like this image then add the following code inside it 

<script>
	jQuery(document).ready(($) => {
		//Here you can write your code like 
		console.log('Hello from jQuery');
	});
</script>

then check your console log, and you will find the output  “Hello from jQuery”

3-by adding a custom plugin 

There are several plugins that can provide you the same service, we prefer to use Simple Custom CSS and JS it's amazing plugin will make you manage to add HTML or CSS & JS codes to your website and you will be able to choose where do you want to add your code (in the site or the dashboard) and the position of the code into your page like header or footer, we always recommend to add the JS code to the footer to avoid any installation error

That's all for today, Thank you for reading the article if you have any issues or questions let me know below in the comments and I will answer you or you can write a discussion and I will provide help to figure out your issue