How Do I Use jQuery in My WordPress Plugin?

Categories WordPress
jQuery in WordPress plugins

Use jQuery in your plugin to implement cool animations. jQuery is a rich JavaScript library. The library is included in the WordPress standard installation. WordPress uses jQuery for UI and -related scripts in the admin dashboard. But you may use jQuery for your own needs as well.

When you want to have an animation on your website, then use jQuery. In this article you learn this:

How Do I Use jQuery in My WordPress Plugin?

Use jQuery in your plugin to implement a pop-up, or a fade-in effect, or any kind of animation. jQuery is integrated in WordPress. Therefore, the use of jQuery in plugins is very easy. You do not even have to download jQuery from the jQuery download page.

Note:

The jQuery file is located here:

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

To use jQuery in your WordPress plugin you have to include jQuery in your plugin. Otherwise you will not be able to use jQuery. Inlcude jQuery in your WordPress plugin this way:

Prerequisites:

  • Download a FTP client.
  • Get the login data to your FTP account:
    • name of the FTP server
    • user name
    • password
  1. Open your FTP client.
  2. Connect to your account.
  3. Open the root directory of your website.
  4. Open the directory wp-content.
  5. Open the directory themes.
  6. Open the directory of your current theme.
  7. Open the php of your theme.
  8. Paste the following line between the <head> tags:

<script lang=”JavaScript” src=”/wp-includes/lib/js/jquery.js” />

  1. Open the root directory of your plugin.
  2. Open the file, in which you want to use jQuery.
  3. Paste this code into the file:

Note:

You may name the function as you want to. The function does not need to be named my_jquery_enqueue_script(). But if you change the name of the function, then use the same name in the add_action() function.

function my_jquery_enqueue_script()

{

wp_enqueue_script(‘jquery’);

}

add_action(‘init’, ‘my_jquery_enqueue_script’);

jQuery is included in your plugin. So, you can use jQuery now.

How Do I Use Other JavaScript Files?

When you want to include other JavaScript files to plugins, then add more parameters to the wp_enqueue_script function. Other JavaScript files are not integrated in WordPress. Therefore, WordPress needs to know, where to find the files that you want to use.

Include other JavaScript files to WordPress this way:

Prerequisites:

  • Download a FTP client.
  • Get the login data to your FTP account:
    • name of the FTP server
    • user name
    • password
  1. Open your FTP client.
  2. Connect to your account.
  3. Open the root directory of your website.
  4. Open the directory wp-content.
  5. Open the directory themes.
  6. Open the directory of your current theme.
  7. Open the php of your theme.
  8. Paste the following line between the <head> tags:

Note:

Replace /wp-includes/lib/js/YOUR-JAVASCRIPT-FILE with the path to your JavaScript file.

<script lang=”JavaScript” src=”/wp-includes/lib/js/YOUR-JAVASCRIPT-FILE” />

  1. Open the directory of your plugin.
  2. Open the file, where you want to use JavaScript.
  3. Paste the following code into the file:

Note:

  • You may name the function as you want to. The function does not need to be named include_other_js_files(). But if you change the name of the function, then use the same name in the add_action()
  • Replace the path js/other_js_file.js in the function plugins_url with the path of your JavaScript file.

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”);

JavaScript file is included in your plugin . So, you can use JavaScript now.

Definition:

Connect to your web server with FileZilla

FileZilla is a FTP client. Connect to your webserver with FileZilla this way:

Prerequisites:

  • Download FileZilla.
  • Install FileZilla.
  • Get the login data for your FTP account:
    • name of the FTP server
    • user name
    • password
  1. Run the FileZilla Desktop App.
  2. Enter the name of your web server in the field Host.
  3. Enter your username in the field Username.
  4. Enter your password in the filed Password.
  5. Click Quickconnect.

You are connected to your web server.

How Do I Use jQuery in My WordPress Plugin?
Rate this post

Leave a Reply

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