How to Add JavaScript in WordPress using Enqueue script

uriByuri

WordPress is a popular content management system that allows users to create and manage websites easily. One of the features that make WordPress so versatile is its ability to use JavaScript to add interactivity and dynamic content to web pages.

In this guide, we will show you how to add JavaScript in WordPress using the enqueue script function. Enqueuing scripts is the recommended way to add JavaScript files in WordPress, as it ensures that scripts are loaded in the correct order and only when they are needed.

Step 1: Create your JavaScript file The first step in adding JavaScript to your WordPress site is to create a .js file with your JavaScript code. You can use any text editor to create the file, and save it with a .js extension.

For example, let’s say you want to add a JavaScript file to add a slideshow to your homepage. You would create a file called slideshow.js and save it in a directory called js in your WordPress theme directory.

Step 2: Enqueue your JavaScript file in functions.php Once you have created your JavaScript file, you need to enqueue it in WordPress using the functions.php file. The functions.php file is a file that is included in every WordPress theme and contains functions that are executed during the WordPress initialization process.

To enqueue your JavaScript file, open your functions.php file and add the following code:

function add_custom_scripts() {
  wp_enqueue_script( 'slideshow', get_template_directory_uri() . '/js/slideshow.js', array('jquery'), '1.0', true );
}

add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

Let’s break down what this code does:

  • The wp_enqueue_script() function is used to enqueue a script in WordPress.
  • The first parameter is the handle for the script. This is a unique identifier that you can use to refer to the script later.
  • The second parameter is the path to your JavaScript file, relative to your theme directory.
  • The third parameter is an array of dependencies. If your script depends on jQuery, you can include it as a dependency by passing an array with ‘jquery’ as a parameter.
  • The fourth parameter is the version number of your script.
  • The fifth parameter is a boolean that determines whether the script should be loaded in the footer of your web page. Setting this to true ensures that your script is loaded after the content of your page, which can improve page speed.

Step 3: Check your web page Once you have added the code to enqueue your JavaScript file, you can check your web page to see if the script is working properly. Open your web page in a browser and inspect the page source. You should see a link to your JavaScript file in the <head> section of your HTML.

In conclusion, adding JavaScript to your WordPress site can enhance the functionality and interactivity of your web pages. By using the enqueue script function in WordPress, you can ensure that your scripts are loaded in the correct order and only when they are needed, which can improve the performance of your website.