WordPress is old enough, yet the method of adding scripts properly to themes and plugins still remains a mystery for many developers. Using JQuery in WordPress is not exceptional.
JQuery is a popular JavaScript library that provides a wide range of features for web developers. It is an open-source library, making it easy to use and customize. It is also fast and lightweight, making it an ideal choice for web developers.
jQuery is a fast, small, and feature-rich JavaScript library for creating unique, dynamic, and engaging websites. This library is one of the most used libraries of JavaScript.
JQuery is a powerful tool for WordPress developers, as it can be used to create stunning visual effects, create animations, and make websites more interactive. It can also be used to create plugins, widgets, and other customizations.
In WordPress, JQuery can be used to create dynamic menus, slideshows, and other interactive elements. It can also be used to create custom post types, taxonomies, and custom fields. Additionally, JQuery can be used to create custom forms, create custom layouts, and create custom templates.
To use jQuery in your WordPress plugins and themes, all you need to do is enqueue the script. But WordPress comes pre-loaded with jQuery, which you can use with your code without enqueue it.
WordPress jQuery also has a “compatibility mode,” which is a mechanism for avoiding conflicts with other language libraries. This means you cannot use the “$” sign directly. Instead, when writing jQuery for WordPress you need to use “jQuery“.
Create your JavaScript file in your theme in “assets -> js -> custom.js“. Then open the “functions.php” file and add the below code.
if (!function_exists('hs_enqueue_scripts')) {
function hs_enqueue_scripts()
{
wp_enqueue_script('hs-main-script', esc_url(get_template_directory_uri() . '/assets/js/custom.js'), array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'hs_enqueue_scripts');
}As you see we add “array(‘jquery’)” to tell WordPress that, add load the “custom.js” file after the jquery file. Now you can open the “custom.js” file and write your jQuery code.
jQuery(window).load(function() {
alert("Hello");
});How to use $ instead of JQuery
As we told you, you can not use the $ sign directly. The problem is, writing jQuery a gazillion times takes longer, makes it harder to read, and can bloat your script. Use the below code instead.
jQuery(document).ready(function($){
//you can now use $ as your jQuery object.
var body = $( 'body' );
});Add jQuery to WordPress website by the plugin
There are plugins you can use that will help you incorporate jQuery into your website.
Advanced Custom Fields turns WordPress sites into a fully-fledged content management system by giving you all the tools to do more with your data.
Customize your WordPress site’s appearance by easily adding custom CSS and JS code without even having to modify your theme or plugin files. This is perfect for adding custom CSS tweaks to your site.
