WordPress Add a Custom Script to the Header

Enhance scripts in site header.

To add a custom script to the header of your WordPress website, you can use the wp_enqueue_script() function along with the wp_head action hook. This allows you to include your custom JavaScript code in the <head> section of your website.

Here’s an example code snippet that demonstrates how to add a custom script to the header:

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

In the above code:

We define a custom function wpsnippets_add_custom_script() that will be called when the wp_enqueue_scripts action hook is triggered.
Inside the function, we use the wp_enqueue_script() function to enqueue our custom script. The first parameter is the handle for the script, which should be unique. The second parameter is the URL of the script file. In this example, we assume the script file is located in the directory of the current theme. You can modify the path according to your file structure.
The third parameter is an array of dependencies. If your script relies on any other scripts, you can specify them here. In this example, we don’t have any dependencies, so we pass an empty array.
The fourth parameter is the version number of the script. You can use any value you like, but it’s a good practice to use a version number to ensure proper caching and avoid conflicts with other versions of the script.
The fifth parameter is a boolean value indicating whether the script should be loaded in the footer (true) or in the header (false). In this example, we set it to true to load the script in the footer. If you want to load the script in the header, set it to false.

By adding this code to your theme’s functions.php file, your custom script will be included in the header of your WordPress website. Remember to replace 'custom-script' with a unique handle for your script, and 'js/custom-script.js' with the actual path to your script file.

This code snippet is useful when you want to add custom JavaScript functionality to your WordPress website, such as tracking codes, analytics scripts, or any other custom scripts that need to be loaded in the header.

Examples

Example 1: Adding a Custom JavaScript Script to the Header

This use case demonstrates how to add a custom JavaScript script to the header of a WordPress website. The code example uses the wp_enqueue_script() function to register and enqueue the script.

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

In this code example, we define a custom function wpsnippets_add_custom_script() that uses the wp_enqueue_script() function to register and enqueue a custom JavaScript script called “custom-script.js”. The script is located in the “js” directory of the current theme. The array() parameter is used to specify any dependencies for the script (none in this case). The '1.0' parameter represents the script version, and the true parameter indicates that the script should be loaded in the header.

Example 2: Adding Multiple Custom Scripts to the Header

This use case demonstrates how to add multiple custom JavaScript scripts to the header of a WordPress website. The code example extends the previous example by adding another script to the wp_enqueue_script() function.

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

In this code example, we define a custom function wpsnippets_add_custom_scripts() that uses the wp_enqueue_script() function to register and enqueue two custom JavaScript scripts: “custom-script-1.js” and “custom-script-2.js”. Both scripts are located in the “js” directory of the current theme. The array() parameter is used to specify any dependencies for each script (none in this case). The '1.0' parameter represents the script version, and the true parameter indicates that the scripts should be loaded in the header.

Example 3: Adding a Custom Inline Script to the Header

This use case demonstrates how to add a custom inline JavaScript script to the header of a WordPress website. The code example uses the wp_add_inline_script() function to add the inline script.

function wpsnippets_add_custom_inline_script() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0', true );
    wp_add_inline_script( 'custom-script', 'console.log("This is a custom inline script.");' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_custom_inline_script' );

In this code example, we define a custom function wpsnippets_add_custom_inline_script() that uses the wp_enqueue_script() function to register and enqueue a custom JavaScript script called “custom-script.js”. The script is located in the “js” directory of the current theme. The array() parameter is used to specify any dependencies for the script (none in this case). The '1.0' parameter represents the script version, and the true parameter indicates that the script should be loaded in the header. We then use the wp_add_inline_script() function to add an inline script that logs a message to the browser console.