WEBINAR: On-demand webcast
How to Boost Database Development Productivity on Linux, Docker, and Kubernetes with Microsoft SQL Server 2017 REGISTER >
WordPress has been around for quite some time now and has become rather popular. The method of adding scripts to plugins and themes has been same for years. However, people still feel confused regarding how exactly they are supposed to add scripts. In this article, we are going to be talking about jQuery, as it is one of the most popular and commonly used html.net frameworks. But why is jQuery so popular? It is because jQuery works well with all of the major browsers and simplifies the scripting of the client-side. Also, as opposed to Flash, it is compatible with tablets and smartphones.
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
jQuery gets inserted in the head of the htmlgoodies.com page by default. This means that if you wish to have jQuery inserted the bottom of the page, you would have to make use of the $in_footer parameter for the wp_enqueue_script () function. There are reasons why you would want to load JQuery at the bottom of your page. Ideally, all the codeschool.com should actually be placed in a web page's footer. This is because it is a good practice that is known to improve the loading time of the page.
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 ()
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.
About the Author
Catherrine Garcia is a freelance blogger and web developer. She is currently working as a freelance writer at MarkupTrend and managing content. You can follow her on Twitter.