How to use jQuery in WordPress

jQuery is a JavaScript library that is widely used in front end development today. jQuery is popular because it works with all major browsers and simplifies client-side scripting. jQuery also works in smartphones and tablets as opposed to Flash, which isn’t supported. jQuery enables some cool features such as slideshows and carousels, which are commonly found on the home page of a website.

WP Enqueue Script

Did you know jQuery is already included in WordPress? All you have to do is use a WordPress function, wp_enqueue_script().

<?php wp_enqueue_script('jquery'); ?>

The above code will include jQuery in your WordPress website. You could place the code above <?php wp_head(); ?> in header.php.

Including jQuery in your WordPress site

jQuery, and all JavaScript, should really be placed in the footer of a web page, if possible, because that is a good practice for improving page load time. The standard format for jQuery is as follows:

<script>
    $('#foo')...
<script>

However, because WordPress also comes with other libraries, jQuery is in a “no conflict” mode, which means jQuery has to be included like this:

<script>
    jQuery('#foo')...
<script>

jQuery noConflict wrapper

There is a problem though. Using ‘jQuery’ throughout instead of ‘$’ is cumbersome and makes the size of the script larger, making the page load slower. So what could be done to prevent that is to put the jQuery in a noConflict wrapper. If you are including jQuery in the footer, then this would be the format you use to include jQuery in a noConflict wrapper:

(function($) {
    $('#foo')...
})(jQuery);

Sometimes, it’s not always possible to include jQuery in the footer. If you are including jQuery in the <head>, then you could do this instead to put jQuery in a noConflict wrapper:

jQuery(document).ready(function($) {
    $('#foo')...
});

Conclusion

jQuery is really cool to use in your web development project. Now you know how to use jQuery properly in WordPress! For more information, you could read the WordPress Codex on this topic.