How to use JQuery with a Child Theme in Wordpress

How to Use JQuery with a Child Theme in WordPress.

Yet another instalment in our free Tips and Tricks library.

There are many situations within a WordPress website environment when you might want to hook up with a Javascript function to perform a particular function.

For instance:

Validating form variables locally before posting to the server or adding to database.
Performing calculations.
Using JQuery to control CSS to customise page layout.

This example show you how to:

Download the JQuery Library
Use JQuery with a Child Theme.
Enqueue Scripts.
Create a JQuery function and use it.

Disclaimer:

The best case scenario is to always load the JQuery Library from a Content Delivery Network – for maintenance, speed, caching and a host of other reasons.

But this tutorial just concentrates on the basic functionality and works with a site-specific install of the JQuery Library.

What is JQuery?

The explanation on the official JQuery site is as follows:

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

Step 1 :

Download the JQuery Library from the website. Download the compressed, production version (2.2.2 at time of writing this post)

In your Child Theme folder (/wp-content/themes/Your-Child-Theme-Folder), create a folder called js (the name’s not relevant, merely somewhere to store javascript files).

Save the downloaded file into your js folder.

Step 2:

Create a new javascript file (you can either create this on your hard disk and upload it when you’re done, or you can create and edit on-the-fly using either the WordPress editor, or a Plugin like WPIDE / Advanced Code Editor to make it easier for you).

Save this file as script.js in the js folder. (again, the name of this file is not relevant – just so long as you know what it’s name is and where it is).

Step 3:

In order to use JQuery with a Child Theme, you need to enqueue the script. You could also register it first, but as stated earlier, I’m sticking to the simplest implementation here.

One thing you definitely shouldn’t do is to try and add the JQuery script link in the head tag of your page. It can break your site because plugins or themes that use JQuery can be forced to load twice. So to be clear, do this:

Edit the functions.php file in your Child Theme folder and add the following script within the php tags:
(note that get_stylesheet_directory_uri(); points to the current Theme – or in your case, Child Theme – folder).

/*
Basic way to load JQuery from Child Theme folder
uses wp_enqueue_script action
*/

function my_load_jquery() {
/* load the minified script Library from the Child Theme Folder */
wp_enqueue_script('jquery_min_script', get_stylesheet_directory_uri() .'/js/jquery.min.js');

/* load your custom script from the Child Theme Folder */
wp_enqueue_script(‘my_script', get_stylesheet_directory_uri() .'/js/script.js');
}

add_action( 'wp_enqueue_scripts', 'my_load_jquery' );

Step 4:

Now that you’ve enabled the JQuery Library, you’re going to add some code to the custom script.js file to confirm that it’s properly loaded.

Edit the file and add an event listener that calls a function when the document is properly loaded. The complete Javascript file is as follows:

/* --------------------------------------------------------------------------- */
/* DECLARATIONS */
/* --------------------------------------------------------------------------- */

$('document').ready(
function() {

/* --------------------------------------------------------------------------- */
/* INITIALISE*/
/* --------------------------------------------------------------------------- */

function init() {
// Check your Chrome Console for this Output
console.log(":: init ::");

// Your browser will create this alert
alert(":: Query is loaded and initialised ::");
}

/* --------------------------------------------------------------------------- */
/* RUN */
/* --------------------------------------------------------------------------- */
// Call the init function when the document has loaded
init();

}
);

Here’s a useful link on the topic.

Use JQuery with a Child Theme in WordPress