How to add jQuery script to WordPress?

jQuery is a popular JavaScript library that makes it easy to add interactive elements to a website. It’s already included in WordPress, so you don’t have to worry about adding it separately. However, sometimes you may need to add your own jQuery script to your WordPress site. In this blog post, we’ll show you two methods for adding jQuery script to WordPress.

Method 1: Adding the script directly to the theme’s functions.php file

The first method is to add the script directly to the theme’s functions.php file. Here’s how to do it:

1. Open your theme’s functions.php file. You can access it through the Appearance > Theme Editor menu in your WordPress dashboard.
2. Scroll to the bottom of the file and add your jQuery script. Make sure to wrap it in a script tag.
3. Save the file and refresh your website to see if the script is working correctly.

function add_custom_script() { ?> <script> //Your custom jQuery script here </script> <?php
}
add_action(‘wp_footer’, ‘add_custom_script’);

Pros:

• This method is quick and easy, and you don’t need to create any new files.
• It’s also great for small scripts that you only need to use on a few pages.

Cons:

• If you switch to a different theme, you’ll lose the script.
• It’s not the best practice to add scripts directly to the functions.php file, and it can lead to issues like poor maintainability and poor performance.

Method 2: Create a separate .js file and enqueuing it in the theme’s functions.php file

The second method is to create a separate .js file for your script and enqueue it in the theme’s functions.php file. Here’s how to do it:

1. Create a new .js file and add your jQuery script to it. Save the file in your theme’s directory or a subdirectory, such as ‘js’.
2. In your theme’s functions.php file, use the wp_enqueue_script() function to load the jQuery library and your script.

php Code

function enqueue_custom_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'));
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_scripts' );

3. Make sure you have jQuery library added on your site, if not you can use wp_register_script to register the jquery library.
4. Save the functions.php file and refresh your website to see if the script is working correctly.

Pros:

• This method keeps your script separate from the theme, so you won’t lose it if you switch to a different theme.
• It’s a good practice to keep scripts in separate files, it leads to better maintainability and performance.

Cons:

• This method takes a bit more work, as you have to create a new file and enqueue it.
• It’s not suitable for small scripts that you only need to use on a few pages.

In conclusion, adding a jQuery script to a WordPress site is not a difficult task, but it’s important to choose the right method for your needs. If you’re only adding a small script that you only need to use on a few pages, adding it directly to the functions.php file is the easiest way to do it.

However, if you want to keep your script separate from the theme, and you want it to be available across the site, then create a separate .js file and