Add jQuery to WordPress

Simple checklist for adding jQuery to a WP install.

  • WordPress comes with jQuery already loading in most cases. You can check by going to ‘view source’ and looking for it in the source code.
  • Write your jQuery.
  • You’ll need to put your jQuery into Compatibility Mode (sometimes called “No Conflict” mode). See code images.
  • Create a folder in your theme, name it and add your jQuery in a file.
  • Add jQuery via functions.php. See images.
  • Test for errors.

I use checklists often, particularly for things that need some knowledge, a technique or a workaround. You can’t add jQuery straight into WordPress: it needs to be loaded via functions.php and it needs to be wrapped up in a specific script. I prefer to do it without a plugin because I like to measure disk space and keep an eye on code bloat, but you can use one if you want. Advanced Custom Fields is a solid plugin for adding jQuery code to WordPress pages and posts.

Put jQuery in No Conflict mode

$.noConflict();
jQuery(document).ready(function(){

///your jQuery here///

});  

Add jQuery to functions.php

function my_theme_scripts() {
    wp_enqueue_script( 'some-name.js', get_template_directory_uri() . '/your-folder/some-file-name.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );