How to use jQuery in your WordPress website?
Introduction
Welcome to our blog, I am going to show you 3 different ways to use jQuery in your website,
- What is jQuery?
- How to check if your theme supports jQuery?
- First way: using functions.php (backend)
- Second way: using page builder such as Elementor or WPBakery
- 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', 'https://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
See Also: How to get Benefits of Choosing a Custom Website Design?
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.
Winding Up
If you have any query I am ready to help you in the contact us and visit our site ray software solution. You can also contact us at +91 9718729864 or can mail us at [email protected].
More helpful topics you might like
How to choose WP to develop Business Website?
