jQuery is a very popular JavaScript library for WordPress. It’s easy to use for those of us who know CSS. For some programmers the library will open the gates of creative superpowers. More conservative programmers don’t like it at all. Here are some pros and cons.
Discussion: should I use jQuery or not?
| Pro | Con |
|---|---|
| The jQuery library is used by many companies worldwide. Knowing it is a competence. Ease of use, the selector is: $(‘beer’) |
Why not use the standard selector and JavaScript? Like; document.getElementById(‘#beer’) |
| Shorter codelines inspired by CSS. If you’re used to CSS it’s very easy to select classes and tags. For instance you don’t have to loop out the members of a class or an array of tags. | Concise codelines, you know what they do. Why invent an alternative way of doing things? That will burden the brain. A loop is hardly a problem for a serious programmer. |
| Because jQuery is widely used the library is probably loaded in the browser’s cache anyway | The browser must load a somewhat bloated library, and often several libraries. (Bloated = too many codelines). |
| There are thousands of plugins that will ease the development of UI-ideas. You can get these plugins via the Plugin Registry or via the Nodejs npm or alternative Nodejs packet managers such as Bower. | Write your own code! That’s the hallmark of a good programmer. |
Add jQuery Power to Your Theme
You can add jQuery by editing the functions.php file, however that’s not necessary. I’d recommend that you install jQuery viaCustom CSS & Js plugin. Add the CDN as a HTML block in the header section:
<!-- Important: you must add this code by "Add HTML code" -->
<script src="https://code.jquery.com/jquery-3.6.3.min.js" integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>Get Recent CDN versions:
You’ll find the most recent CDN here. Go for the most recent and stable core version. In production you’ll probably want a minified version of jQuery (in order to reduce load time).
How to Use jQuery
Are the page elements loaded?
jQuery has a control method that will check whether all the DOM elements are loaded by the browser. Normally you sandwich jQuery code in such a statement. Of course you only need to do this once.
$(document).ready(function(){
// add your jQuery code here ...
});Now you can add statements to the code:
$(document).ready(function(){
$("#myBtn").click(function(){
$("p").hide( 300 );
$("#red").toggle( 400 );
});
});jQuery Event Handling
The statement above is a typical event handler in jQuery. When you create the UI the user should click a button, an image or similar – and then the functions is fired off. In this case a toggle and hide animation is used. But how do we add this code to WordPress?
Watch this tutorial:
Exercise: A jQuery Button
Now create a jQuery button.
Tutorials
- W3 Schools: jQuery Tutorial
- GeeksForGeeks – jQuery (and a list of tutorials towards the bottom of the page)
jQuery UI
Several UI elements, such as:
- Accordions
- Effects – add / remove classes
Plugins
There are several hundred plugins for jQuery: