Mohamed Atef
17 Feb 2021
Wordpress
Hello Everyone,
Welcome to Web-Brackets.com, today I am going to show you 3 different ways to use jQuery in your website,
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>
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');
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
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
”
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
No Comments to show
© 2024 Copyrights reserved for web-brackets.com