Using wp_add_inline_script to add inline scripts to WordPress pages
The wp_add_inline_script function is a WordPress function that is used to add extra code to a registered script. This function can be useful in several ways. One of its main uses is to add JavaScript code directly into a page, rather than linking to an external file. This can improve performance by reducing the number of HTTP requests that a browser needs to make.
Another advantage of the wp_add_inline_script function is that it allows developers to add dynamic data to a script. This can be particularly useful when you need to pass data from the server-side (PHP) to the client-side (JavaScript). This enables the creation of more interactive and responsive web pages.
Furthermore, the wp_add_inline_script function ensures that the inline script is inserted in the correct location in the HTML document, which can prevent issues related to script execution order. This function also helps to keep the code organized and easy to manage, as the inline script is associated with a specific registered script.
Parameters Accepted by the WordPress wp_add_inline_script Function
The wp_add_inline_script function in WordPress is designed to accept three specific parameters. These parameters provide the necessary information for the function to operate correctly.
$handle(String): This is a required parameter. It is used to specify the name of the script where the inline script will be added.$data(String): This is also a required parameter. It should contain the JavaScript code that you want to add inline to the script.$position(String): This is an optional parameter and its default value is ‘after’. It dictates where the inline script should be placed in relation to the handle – either before or after it. If no value is provided, the function will place the inline script after the handle by default.
Return Value of the wp_add_inline_script Function
After executing, the wp_add_inline_script function returns a boolean value. If the function operates successfully, it will return true. If the function fails to execute properly, it will return false.
Examples
How to Add Inline JavaScript to a Registered Script
In this example, we will add an inline JavaScript to a registered script using the wp_add_inline_script function.
function add_inline_script() {
$data = 'var message = "Hello, World!";';
wp_add_inline_script( 'my-script-handle', $data );
}
add_action( 'wp_enqueue_scripts', 'add_inline_script' );
This code snippet will add an inline script that declares a variable message with the value “Hello, World!” to a registered script with the handle ‘my-script-handle’. The function is hooked into the wp_enqueue_scripts action which is the appropriate hook to use when enqueuing items that are meant to appear on the front end.
How to Add Inline JavaScript with Localized Data
In this example, we will add an inline JavaScript to a registered script using the wp_add_inline_script function and we will use wp_localize_script function to pass PHP variables to our JavaScript file.
function add_localized_inline_script() {
$data = array( 'name' => 'John', 'age' => 25 );
wp_localize_script( 'my-script-handle', 'php_vars', $data );
$inline_script = 'console.log(php_vars.name); console.log(php_vars.age);';
wp_add_inline_script( 'my-script-handle', $inline_script );
}
add_action( 'wp_enqueue_scripts', 'add_localized_inline_script' );
This code snippet will add an inline script that logs the values of the PHP variables name and age to the console. The variables are passed to the JavaScript file using the wp_localize_script function.
How to Add Inline JavaScript to the Footer
In this example, we will add an inline JavaScript to the footer of our WordPress site using the wp_add_inline_script function.
function add_footer_inline_script() {
$data = 'console.log("Footer script loaded.");';
wp_register_script( 'footer-script', '', [], '', true );
wp_add_inline_script( 'footer-script', $data );
}
add_action( 'wp_enqueue_scripts', 'add_footer_inline_script' );
This code snippet will add an inline script that logs a message to the console when the footer of the page is loaded. The script is registered with the handle ‘footer-script’ and the fifth parameter of the wp_register_script function is set to true to place the script in the footer.
Conclusion
The wp_add_inline_script function in WordPress offers a highly effective way to add inline JavaScript to a registered script. This function, which accepts the handle of the registered script, the data in string format, and the position where the inline script should be placed as parameters, allows developers to insert custom JavaScript directly into their pages. This can be particularly useful in situations where the script is dependent on dynamic data that is only available from the PHP environment, or when it is more efficient to insert a small piece of script directly into the HTML rather than loading it from an external file.