Add a Custom Script to the Footer

Adding a custom script to the footer of a WordPress website can be useful when you need to include additional JavaScript code that should be loaded after the page content. This can be used to add tracking codes, analytics scripts, or any other custom functionality that requires JavaScript.

To achieve this, you can use the wp_enqueue_script() function in combination with the wp_footer action hook. The wp_enqueue_script() function is used to register and enqueue a script, while the wp_footer action hook is used to output the script in the footer of the website.

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

function wpsnippets_add_custom_script() {
    // Register the script
    wp_register_script( 'custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0', true );

    // Enqueue the script
    wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'wpsnippets_add_custom_script' );

In this example, we define a custom function wpsnippets_add_custom_script() that registers and enqueues a script called custom-script. The script file is located in the directory of the current theme. The true parameter passed to wp_enqueue_script() ensures that the script is loaded in the footer.

To use this code snippet, you can add it to your theme’s functions.php file or in a custom plugin file. Once added, the custom script will be included in the footer of your WordPress website.

Remember to replace 'custom-script', '1.0', and get_template_directory_uri() . '/js/custom-script.js' with your own script handle, version number, and script file path, respectively.

Examples

Example 1: Adding a Custom JavaScript Script to the Footer

This use case demonstrates how to add a custom JavaScript script to the footer of a WordPress website. The code example below 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 is the version number of the script, and the true parameter indicates that the script should be loaded in the footer.

Example 2: Adding Multiple Custom Scripts to the Footer

This use case demonstrates how to add multiple custom JavaScript scripts to the footer of a WordPress website. The code example below shows how to enqueue multiple scripts using the wp_enqueue_script() function.

function wpsnippets_add_custom_scripts() {
    wp_enqueue_script( 'script1', get_template_directory_uri() . '/js/script1.js', array(), '1.0', true );
    wp_enqueue_script( 'script2', get_template_directory_uri() . '/js/script2.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: “script1.js” and “script2.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 is the version number of the scripts, and the true parameter indicates that the scripts should be loaded in the footer.

Example 3: Adding a Custom Inline Script to the Footer

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

function wpsnippets_add_custom_inline_script() {
    $custom_script = "
        jQuery(document).ready(function($) {
            // Custom inline script code here
        });
    ";
    wp_add_inline_script( 'jquery', $custom_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_add_inline_script() function to add a custom inline JavaScript script to the “jquery” script. The $custom_script variable contains the actual JavaScript code, which in this case is a simple jQuery document ready function. The inline script will be added to the footer of the website.