6 Things to Consider When Using jQuery with WordPress
WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
jQuery also has some supports some really cool features such as carousels and slideshows that are most commonly found on a site's home page. So, considering all of the benefits, you should learn to use it with WordPress. Listed below are a few clear and relevant tips that you must follow and be aware of while you are using jQuery with your WordPress Theme or Plugin.
1. Load JQuery in the Footer
The standard format for jQuery is:
<Script> $('#foo')... <Script>
However, as WordPress also has several other libraries, jQuery is basically in a no-conflict mode which means that it would have to be included in the following way:
<Script> JQuery ('#foo')... <Script>
Also, you need to remember that if the script is loaded using the wp_enqeue_script() which lists jQuery as a dependency and also has the $in_footer being set to false, WordPress would automatically place the jQuery in the page's header instead of at the footer.
2. Use WP_ENQUEUE_SCRIPT ()
The conventional way of including jQuery in an HTML page is with the help of script tag. However, when you are setting up a WordPress site, this should be avoided. But, why is it so? This is because, if you use the conventional method, it might lead to potential problems and conflicts. And you surely do not want that to happen.
Also, you must make sure that you chose a unique name to enter within the code so to avoid any confusion or conflicts. For adding it to the theme, you would need to add the code to your theme's functions.php file and if you wish to use it for the plugin development, you would need to add the code to the plugin file.
3. Load jQuery from the Google AJAX Library
As WordPress has jQuery, calling the wp_enqueue_script ('jquery') would automatically load the jQuery file that is located in the wp-includes/js/jquery/jquery.js. In the event that you would like to load jQuery from the Google AJAX Library, you would have to modify the code as well. Now, there are a number of reasons why you would want to employ the Google AJAX Library to load the jQuery.
However, if you aren't too good with the code, there are several plugins available; one of them being the Use Google Libraries that will actually do the work for you. This is a great thing, as this way you won't have to struggle with the code and spend hours modifying.
4. Adding jQuery as a Dependency
When proper coding is entered, jQuery would be entered from the Google AJAX Library and it would be placed in the page's footer and also include your theme.js file. The $deps allows multiple dependencies and this helps to manage the scripts present on the site.
5. Appropriate jQuery Coding Conventions
All of the above-mentioned steps are useless if appropriate jQuery coding conventions aren't followed. The most common mistake that people commit when it comes to jQuery and WordPress is the misuse of $ variable. When you are modifying the code, you must be aware that the version of jQuery that comes automatically with WordPress calls the jQuery.noConflict(); function. This gives back control of the $ variable to whichever library in which it was it was first implemented.
6. Link Your jQuery Scripts
Once you are able to write valid jQuery code for WordPress, link it to the website. In WordPress, this process is referred to as enqueueing. For an HTML site, you would need to use the <link> element to add scripts. WordPress does the same thing but you would need to use special functions to allow WordPress to handle all of your dependencies.
Adding simple jQuery scripts to WordPress isn't as difficult as it sounds. Once you get the hang of it, you will easily be able to do it. Considering all of the benefits that it has to offer, using it in your Web development project would certainly be advantageous.
Now that you know all the popular ways to add jQuery to your site, try it for yourself and take advantage of its features.