How to Add Custom JavaScript Code to Your WordPress Website

In this article, we will show you how to add custom JavaScript code to your WordPress website in three different ways.

Option 1: Add JavaScript Code to a Separate File

One way to add custom JavaScript code to your WordPress website is to create a separate JavaScript file and include it in your website’s HTML code.

Here are the steps to follow:

  1. Create a new JavaScript file: Create a new file with a .js extension in your website’s directory. You can use any text editor to create the file, such as Notepad or Sublime Text.
  2. Write your JavaScript code: Write your custom JavaScript code in the file, using any JavaScript function or library that you need.
  3. Link to the JavaScript file: In your WordPress theme’s functions.php file, add a link to the JavaScript file using the wp_enqueue_script() function. You can place the link in the head or body section of your HTML code, depending on when you want the JavaScript code to be executed.

Here’s an example of how to add a custom JavaScript file to your WordPress site using the wp_enqueue_script() function:

This code loads a custom JavaScript file called custom.js located in the js folder of your active theme directory. The array( 'jquery' ) parameter loads the jQuery library as a dependency for the custom script, and the true parameter specifies that the script should be loaded in the footer of the page.

Option 2: Add JavaScript Code Inline

Another way to add custom JavaScript code to your WordPress website is to add the code inline in your HTML code. This method is useful for small scripts that don’t require a separate file or for adding code to specific pages or sections of your site.

Option 2.1: Add JavaScript Code Inline for All Pages

Here’s an example of how to add custom JavaScript code inline using the wp_footer hook for all pages:

This code adds a custom JavaScript code block to the WordPress footer using the wp_footer hook. The code block displays an alert message on all pages of your WordPress website.

Option 2.2: Add JavaScript Code Inline for Specific Pages

If you want to add custom JavaScript code to specific pages only, you can use a conditional statement to check the current page before adding the code.

Here’s an example of how to add custom JavaScript code to the WooCommerce cart and my account pages only:

This code checks if the current page is the WooCommerce cart page or my account page using the is_cart() and is_account_page() functions. If the current page matches either of these conditions, it adds custom JavaScript code to the wp_footer hook using the echo function. The code block displays an alert message when the page is loaded.

Note that this method inserts the code directly into the page HTML, which can affect page load times if the code is too large or complex. It’s recommended to use a separate JavaScript file and register it using wp_register_script and wp_enqueue_script functions as described in Option 2.1.

Option 3: Add JavaScript Code Inline Using wp_add_inline_script

Another way to add custom JavaScript code inline in WordPress is to use the wp_add_inline_script function. This function allows you to add custom JavaScript code to a specific script that’s already registered.

Here’s an example of how to use wp_add_inline_script:

This code registers a script called my-script located in https://example.com/js/my-script.js. It then enqueues the script and adds custom JavaScript code using the wp_add_inline_script function. The code block displays an alert message when the script is executed.

Conclusion

Adding custom JavaScript code to your WordPress website can enhance its functionality and interactivity. Whether you choose to add the code to a separate file, inline in your HTML code, or using wp_add_inline_script, you can customize your website to meet your specific needs.