{"type":"PARAGRAPH"

The jQuery library is considered one of the famous JavaScript libraries. The primary goal of this library is to provide free and open source technology to website developers and designers to enable them to easily use the JavaScript language while designing the front-ends of websites. Through this article, we will introduce you to the jQuery library, what its importance is, why we use it in website development, and how the jQuery library is dealt with in WordPress with or without plugins. We will also explain how you can use a different version of the jQuery library in WordPress instead of the current version that is built into it.

Contents of the article Ways to load jQuery in websites Using jQuery in WordPress The concept of compatibility mode (non-conflict) in WordPress Ways to use jQuery in WordPress sites First: Using the jQuery library included in WordPress The first method: Using WordPress plugins.

The second method is to embed JQuery scripts in WordPress manually

Second: Dealing with the standard jQuery library within WordPress. What is the jQuery library? jQuery is a popular JavaScript library that was created in 2006 by John Resge under the slogan (write less, do more) to make it easier for website developers and designers to use JavaScript on their websites.

Instead of writing long, boring JavaScript code to achieve a specific task, you can use concise jQuery code that achieves the same task with fewer resources. However, in order to learn to use jQuery, it is necessary to have a basic knowledge of the JavaScript language and understand its programming logic. If you are not familiar enough with JavaScript, I advise you to read this article.

So in short, jQuery is a lightweight JavaScript library designed to make it easier to write JavaScript code for web browsers. It can be expressed in one sentence as (a way to write JavaScript more easily). If you learn jQuery well you will be able to add dynamic behavior and animation effects to static websites that cannot be done with HTML and CSS codes alone.

Using easy and simple instructions. Whether you want to navigate your web page smoothly, add animation effects, formatting, or specific actions to some page elements, or call Ajax scripts or other tasks, learning JQuery will make it easier for you to do this.

In order to learn jQuery, you need to know the concept of events (Events) that occur on elements, which are simply methods that express the behaviors that visitors perform while interacting with web pages, such as clicking the mouse button on an element on the page, or pressing a key on the keyboard.

You must also know the concept of Actions, which represent the instructions that you will take or implement when a specific event occurs on one of the elements on the site (in short, it is the action that must be taken when the event occurs). This scenario is expressed in jQuery within the front-end code of the pages as follows: $("element").event_name(function() {//action}); Note that JQuery instructions start with the symbol $, after which we specify the element on which we want to listen for events, in order to perform the action when the desired event occurs. The previous phrase means, in short, (whenever an event occurs on an element, a specific action is executed).

To better illustrate the idea, let's say, for example, that we want to write code that does the following: When the user (clicks with the mouse) inside a specific menu item on the web page (menu-item-1), another specific item on the page with the ID p2 will be colored yellow. To write the previous code in JavaScript, we must write the following: document.querySelector('#menu-item-1').addEventListener('click',function(){ document.getElementById("p2").style.color = "yellow"; }); In contrast, the previous task can be simplified and done using jQuery as follows: $('#menu-item-1').click(function(){ $("p2").css("background-color", "yellow"); }); Note that we've shortened the code and made the syntax much simpler and more understandable.

The JavaScript method addEventListener was replaced in the first code, which listens here on the click event that occurs when the user makes a single click with the mouse button. 

Left on an element 

A specific menu item which is menu-item-1. Instead, it was replaced in the second code with a click event in jQuery, and here we only needed to write one word after the item name menu-item-1.

From this simple example we can deduce the fundamental difference between using JavaScript and jQuery, especially when it comes to the simplicity in understanding and speed of execution that the code executed using the jQuery library has over its JavaScript counterpart. Read also about the jQuery library in the Hassoub Encyclopedia Ways to load jQuery into websites. There are two general ways to load jQuery or any script into any website. The first method: Download the jQuery script and upload it directly to the main site folder. For example, you can upload the jquery.js file to the js folder on your site, then you can copy the following code and paste it into the HTML header of the site pages.

The second method: Read the jQuery script through the Content Delivery Network (CDN), after specifying the version you want to upload to your site. 

(For example, jQuery version 3.< حيث أن الشكل العام لكتابة التعليمات هو كما يلي:

$(‘#foo’)... You can also save the instructions you want in a file with a .js extension, let it be called, for example, my-jquery.js, and then call it via the file link, and here there is no need to name >/script< ضمن الملف بل يمكن كتابة التعليمات (التي تبدأ بـ$) في الملف مباشرة.

Although there are many features of the jQuery library

Of the JavaScript libraries, the jQuery library has gained great popularity because it is: Lightweight: The small size of the jQuery library does not slow down applications and websites significantly, and you can also add it to your site through the Content Delivery Network (CDN) and provide it for loading on your site. Compatible with most browsers: The jQuery library works efficiently on all browsers, even old ones. Open source: hence any developer can develop their own plugins using it.

Easy to learn: Developers can learn it in a short time compared to other JavaScript libraries, frameworks, and other programming technologies because it is short and concise. AJAX technology makes it easy to use without effort or long programming codes: AJAX is a technology that works asynchronously with the rest of the code on the site, and thus its content can be updated without having to update the entire page. Support: The JQuery library has excellent documentation where you can see a lot of useful information about everything in this library and learn how to use and install it.

Using jQuery in WordPress WordPress comes with a copy of the jQuery library implicitly loaded on it, which means that you can use jQuery instructions directly without writing any call to the official library in the page code and making the various changes that you want to apply to your site. You can check this and make sure that jQuery is loaded by default in your WordPress site by viewing the source of any page on the site.

You will notice a code similar to the following code

Of course, the version number varies depending on the version of WordPress for your site. This means you can use  jQuery code directly in your WordPress site.

But in reality, you should be aware that the jQuery built into WordPress itself is slightly different from the standard jQuery, as it is specific to WordPress and does not use the standard jQuery instructions that begin, as we explained, with the $ symbol. The reason we can't disable standard jQuery commands starting with a dollar sign $ in WordPress is to avoid conflicts with other JavaScript libraries available in WordPress as many JavaScript libraries use the dollar sign $ as a function or as a variable name.

Perhaps the question that comes to your mind now is: How can I highlight jQuery directives in WordPress? To solve this problem, the $ symbol in WordPress was replaced with the word jQuery to avoid conflicts with other libraries (it can be said that the word jQuery is an alias or replacement for the $ symbol in WordPress) and therefore  if we have the following standard code instructions in the jQuery standard library: 

/* Regular jQuery */ $('.hideable').on('click', function() { $(this).hide(); }) The instructions will be written in the following form in order to be compatible with the WordPress jQuery library: /* Compatibility Mode */ jQuery('.hideable').on('click', function() { jQuery(this).hide(); }) But writing jQuery multiple times in a text makes it harder to read and increases its size. So if you still want to use a dollar sign before every jQuery statement in WordPress as usual, there are several ways to get around this and make the $ sign work without conflict.

First method: If you want to write the code in header

The page can then use the ready function for the document and wrap the standard code (Regular jQuery) within it as follows: jQuery(document).ready(function( $ ) { $('.hideable').on('click', function() { $(this).hide(); }) }) Second method: If you want to write the code in the footer of the page (which is preferable to do in most cases) you can wrap the code in an anonymous function whose task is to convert $ to jQuery in the standard code (Regular jQuery) is as follows: (function($) { $('.hideable').on('click', function() { $(this).hide(); }) })( jQuery ); Third method: Another simple way to avoid typing the word jQuery is to define a variable named $j or any other name of your choice and pass the following value to it to prevent conflicts: var $j = jQuery.noConflict(); Now $j is now an alias for the jQuery function. Next, write the code as usual, replacing jQuery with $j (you will still be able to use the name jQuery as well as the new alias $j in the rest of the site) The Concept of Compatibility Mode in WordPress Compatibility Mode or No Conflict Mode in WordPress means that once the jQuery code is loaded in WordPress, the site will enter a mode that helps prevent it from conflicting with any Other JavaScript libraries you may use on this site.

Actually noConflict mode means that the standard $ sign used in jQuery (and other JavaScript libraries) is unusable, and must be replaced with jQuery. Note that the version of jQuery that ships with WordPress automatically calls the jQuery.noConflict method. But if you are loading a different version of jQuery or want to replace the jQuery keyword with a shorter code, you will need to call it manually.

This mode is activated before writing any jQuery code by writing the following line: jQuery.noConflict(); So this call has many benefits, as it ensures that there is no conflict between the jQuery library and any other library in JavaScript, in addition to the fact that it enables the programmer to create a new symbol that is placed instead of the word jQuery, as we mentioned previously. var $wp = jQuery.noConflict() // Avoid conflict jQuery(document).ready(function($){ $wp('tr').change(function(){ $wp('.total input').text("wpar!"); }); });

Ways to use jQuery on WordPress sites after...

We learned about ways to write jQuery instructions in a way that is compatible with WordPress. We move on to explain the ways to use jQuery with WordPress. Here we have two cases: Case 1: Use jQuery built into WordPress. The second case: Download a standard version of jQuery and use it instead of the jQuery included in WordPress. First: Use the jQuery library included in WordPress. You have two ways to use the jQuery library included in WordPress, either by using ready-made plugins or manually through the code. In the following paragraphs, we will explain to you these two methods and explain what is the difference between them, and you can choose the method that suits you?

The first method: using WordPress plugins. There are several plugins through which scripts and scripts can be added to WordPress. The Insert Headers and Footers plugin is considered one of the best free plugins through which you can add jQuery, JavaScript, or even CSS codes to your WordPress site easily. After installing and activating the plugin, you can go to the Settings tab within the WordPress control panel and specify the name of the plugin Insert Headers and Footers as follows: A window will open containing three text boxes that enable you to write the code in one of the following positions on the page (Header/Footer/Body). You can place the custom jQuery codes in the section you want to write in one of the current template files on your site, as shown in the image: Note: Remember that the best practice is to call the jQuery codes. 

As is the case with all JavaScript codes in the footer of the page, so that it loads at the end of the page and does not affect its loading speed. The second method is to include JQuery scripts in WordPress manually. When working with WordPress, it is not preferable to add jQuery scripts to your site pages in the traditional way using the >script tag.< لتجنب التعارضات والمشاكل المحتملة الأخرى، ستحتاج إلى تحميل jQuery باستخدام الطريقة التالية: 

1-Create the text file in which you want to write instructions, and its extension must be js, for example new-jquery.js. And upload it to the template files on your site. 2- View the site’s files through an FTP program, or by logging in to the hosting control panel (Cpanel).< واختر Filemanager< ثم حدد المجلد الجذر لموقعك public_html< ثم المجلد wp-content< ثم themes< ثم قم بالدخول إلى مجلد القالب الحالي المثبت كقالب افتراضي في موقعك، وليكن القالب المثبت هو قالب صحيفة مثلًا.

3- Download your new-jquery.js file in the template folder (it is better to manage your files and place this file in a new subfolder inside the main folder of your template, and let the name of the subfolder be js) Note: It is also best to create a child template for the current template on your site and write instructions in it because this will ensure that your parent template files remain as they are if you update the primary parent template. 5- Now you must link this new-jquery.js text file that contains the jQuery codes to the functions.php file of your site template. You will find the Functions.php file inside your site's current theme folder.

The functions.php file is considered one of the most important template files, as the programming information that was formulated inside it is executed directly as soon as the website is run on the browser. You can see a detailed explanation of this file in our following article. Now you have to tell the theme to register the new-jquery.js file and show it in its correct location. To do this we will use the ready-made function wp_enqueue_script().

This function fetches JQuery files (or any script file in general) from the path that is passed to it, and it helps WordPress know which file should be uploaded first by telling it when to upload a file, where to upload it, and what its dependencies are. This function adds the scripts to be executed to a queue according to the Enqueueing principle, and is one of the most convenient ways for the CMS to add jQuery scripts or scripts in general to WordPress. It is a systematic way to load jQuery or Javascript codes in WordPress by knowing their dependencies.

Through this function, WordPress provides a queue for each file added to the queue to ensure that everything is working correctly. You can load this function into Functions.php as shown in the following code, which loads the same new-jquery.js file on all pages of the site in the Footer section. The location of writing this code is below where WordPress jQuery is loaded and before the following code:

The first line in the previous code (“wp_deregister_script (‘jquery’) is a command to not read the jQuery that WordPress provides by default. The second line, wp_enqueue_script, is interested in reading the new version of jQuery that we want to use on the WordPress site (here we passed the link to version 3.3.1). You can write the URL for the appropriate version that you want to use on your site. Also, instead of modifying the header file, you can add the following code in the functions.php file if(!function_exists('wpc_redefine_assets')){ function wpc_redefine_assets(){ wp_deregister_script( 'jquery' ); wp_register_script( 'jquery','https://code.jquery.com/jquery-3.6.0.js', [], '3.6.0', false ); } add_action( 'wp_enqueue_scripts', 'wpc_redefine_assets' ); } As we mentioned previously, WordPress comes with a specific version of the jQuery library, and a different version of the jQuery library can be used, but this leads to a conflict in many of the features granted by the jQuery library, and the reason is that there are two versions of jQuery.

For this reason, the solution to this problem was found by using wp_deregister_script() to deregister WordPress jQuery and then include the jQuery version you want to add as shown in the previous code. Then, JQuery codes can be written in the same ways as we explained previously (through plugins or manually by modifying template files). Conclusion In today's article, we provided an overview of the JQuery library, which is considered one of the most famous Javascript libraries. We also explained its importance and how to include it in a WordPress site in various ways, whether through plugins or through manual code, and we explained how to use the library included with WordPress independently or use another standard library.

We explained the concept of deconfliction mode, which aims to help ensure that there are no compatibility issues between jQuery and other JavaScript libraries loaded in WordPress. Finally, we remind you that gaining skill in how to deal with jQuery will make the work you do easier and better, so do not hesitate to try it on your site and learn about the aesthetic effects it provides you, which cannot be created using HTML or CSS alone to distinguish the external appearance of your site.