How to include jQuery in your WordPress Plugin

Categories WordPress
jQuery in WordPress plugins

As you already may know, JavaScript is a major component of modern web apps. jQuery is a very popular JavaScript library that is already included in the WordPress standard installation. One huge benefit of the jQuery library is that it makes AJAX calls much easier. As a beginner to WordPress coding or coding in general you probably may not know the term AJAX, therefore the following paragraph gives you a short overview of the topic.

What is AJAX?

The term AJAX stands for Asynchronous JavaScript an XML. It is a way to load JavaScript code after the page has already been loaded. This reduces the amount of server requests and will make the website faster. A good example for the use of AJAX is pop-ups. When you click on a button and a pop-up appears, there is need to reload the whole page because the pop-up is the only element that changes.

Historically AJAX was used to return and process XML data by the browser. Nowadays it is more typically to use JSON-encoded data instead of XML. JSON stands for JavaScript Object Notation and is a machine and human-readable format of transmitting data.

After this short overview of AJAX, I will no cover the topic of including jQuery in WordPress plugins.

Include jQuery in your WordPress plugin

Like I already mentioned WordPress comes installed with the latest version of jQuery. Basically this is used for several UI and AJAX-related scripts in the admin dashboard of WordPress. Never mind this makes the use of jQuery in your plugins very easy. You don´t even have to download it from the jQuery download page. The jQuery file can be found at

/wp-includes/lib/js/jquery.js.

The normal way to include scripts to a HTML page is like this:

include  JavaScript code in HTML
In WordPress this will only work if you add it to the header.php file of the actual theme. You cannot include jQuery in your plugin like this! The proper way to include any JavaScript file is to use the wp_enqueue_script() function. So the following code snippet will work for you:
function my_jquery_enqueue_script()
{
wp_enqueue_script(‘jquery’);
}
add_action(‘init’, ‘my_jquery_enqueue_script’);

The first parameter of the function is a label for the JavaScript file to enqueue. WordPress knows what jquery means and where the jQuery file is located. And basically this is how you can use jQuery in your WordPress plugins.

Let me explain you one more thing. Of course you can also include other JavaScript files than jQuery. The fact that WordPress does not know where other JavaScript files may be stored, you have to use some more parameters in the function.

Enqueue other JavScript files

To enqueuer other JavaScript files that WordPress does not already know you have to give more parameters to the wp_enqueue_script() function. So the code to include other JavaScript files looks like this:

function include_other_js_files() {
wp_enqueue_script(‘other_js_file’,
plugins_url( ‘js/other_js_file.js’, __FILE__),
array(‘jquery’),
‘1.0’
);
}
add_action(“wp_enqueue_scripts”, “include_other_js_files”);

That´s basically how to add JavaScript files to WordPress plugins. The wp_enqueue_scripts function lets you load different JavaScript files on the frontend of your website. The first parameter of the wp_enqueue_scripts function is a reference label and the second parameter tells WordPress where to find the file. The plugins_url() function is used to figure out the URL relative current file __FILE__. This only works when the code is included in the main plugin file. In case the code is placed in another file you would have to pass dirname(__FILE__) as the parameter to this call.

How to include jQuery in your WordPress Plugin
Rate this post

Leave a Reply

Your email address will not be published. Required fields are marked *