How to add JavaScript files to WordPress with wp_enqueue_script

The wp_enqueue_script function in WordPress is used to add a script to the page. This function is useful for properly including JavaScript files in WordPress themes or plugins. It ensures that scripts are loaded in the correct order and only when needed, which can help improve page load times and prevent conflicts with other scripts.

Parameters Accepted by wp_enqueue_script Function

The wp_enqueue_script function accepts the following parameters:

  • $handle (string, required): Name of the script. Should be unique.
  • $src (string, optional, default: ”): Full URL of the script, or path of the script relative to the WordPress root directory.
  • $deps (string[], optional, default: array()): An array of registered script handles this script depends on.
  • $ver (string|bool|null, optional, default: false): String specifying script version number, if it has one, which is added to the URL as a query string for cache busting purposes.
  • $in_footer (bool, optional, default: false): Whether to enqueue the script before </body> instead of in the <head>. Default ‘false’.

Return Value

The wp_enqueue_script function does not return a value.

Examples

How to enqueue a script in WordPress

Below is an example of how to use the wp_enqueue_script function to enqueue a custom JavaScript file in WordPress:

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

This code snippet registers and enqueues a custom JavaScript file named custom-script.js located in the theme’s js directory. It also specifies that the script depends on jQuery, has a version number of 1.0, and should be loaded in the footer of the page.

How to conditionally enqueue a script in WordPress

Below is an example of how to conditionally enqueue a script in WordPress based on the current page template:

function my_conditional_script() {
 if (is_page_template('custom-template.php')) {
 wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0', true);
 }
}
add_action('wp_enqueue_scripts', 'my_conditional_script');

This code snippet checks if the current page is using a specific template (e.g., custom-template.php) and enqueues the custom-script.js file only for that template.

How to enqueue a script with inline JavaScript in WordPress

Below is an example of how to enqueue a script with inline JavaScript code in WordPress:

function my_inline_script() {
 wp_enqueue_script('inline-script', 'data:text/javascript,' . rawurlencode('console.log("Hello, world!");'), array(), null, true);
}
add_action('wp_enqueue_scripts', 'my_inline_script');

This code snippet enqueues a script with inline JavaScript code that simply logs “Hello, world!” to the console when the page loads.

Conclusion

In conclusion, the wp_enqueue_script function is a powerful tool for adding scripts to your WordPress site in a safe and efficient manner. By properly enqueuing scripts, you can ensure that they are loaded in the correct order and only when needed, which can improve site performance and prevent conflicts with other scripts. Additionally, the function provides a way to easily add dependencies and version numbers, making it easier to manage and update your scripts. Overall, understanding and utilizing the wp_enqueue_script function is essential for any WordPress developer looking to create high-quality, well-organized websites.

Related WordPress Functions

in WordPress Functions