If you’re a WordPress developer, you’ve probably used the WordPress hook ‘wp_print_scripts’ to add JavaScript code directly into your site. Or maybe you’ve used the ‘wp_localize_script()’ function for this purpose. But here’s something you might not know: in recent versions of WordPress, starting from 4.5 and newer, there’s a better way to add inline JavaScript. It’s called ‘wp_add_inline_script(),’ and it’s the superior option.
One great thing about this newer function is that you can link it to any script you’ve registered and include more than just JavaScript variables. In this DigWP article, you’ll learn how ‘wp_add_inline_script()’ functions, why it’s better than other inline methods, and how to make it work with older WordPress versions that are earlier than 4.5. Throughout the article, there are some code examples you can modify and use in your own WordPress projects.
Inline scripts via wp_print_scripts
Before, if you wanted to add scripts directly to the front-end of your website, you would use the ‘wp_print_scripts’ action hook (or ‘admin_print_scripts’ for the Admin Area). Here’s an example function that I adapted from one of my plugins
<?php
function diwakar_print_scripts() {
?>
<script>
var var1 = <?php echo json_encode('var1'); ?>;
var var2 = <?php echo json_encode('var2'); ?>;
var var3 = <?php echo json_encode('var3'); ?>;
</script>
<?php
}
add_action('wp_print_scripts', 'diwakar_print_scripts');This function sets up three variables using plugin options and then adds them to the head section on the front-end of the website using the ‘wp_print_scripts’ hook. If we wanted to add the script to the Admin Area, we’d switch ‘wp_print_scripts’ with ‘admin_print_scripts,’ and that’s it.
Pros
This method is reliable for adding scripts to the <head> section of your web pages. There are no restrictions on the code you can include; you can add JavaScript variables, conditions, methods, functions, or anything else you need.
Cons
There’s no direct way to connect the added code with any registered script. You can somewhat control where the added code appears using the ‘$priority’ parameter in the ‘add_action()’ function. However, the placement of the code relies on various factors, so there’s no straightforward and consistent method to control its location.
Inline scripts via wp_localize_script()
Another common method that developers use to include inline JavaScript is the ‘wp_localize_script()’ function. Originally, this function was designed to localize JavaScript variables for language translation. However, many developers use it to add inline scripts as well. Here’s an example:
function diwakar_enqueue_scripts() {
wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
$array = array(
'var1' => __('Value for Variable 1', 'shapeSpace'),
'var2' => __('Value for Variable 2', 'shapeSpace'),
'var3' => __('Value for Variable 3', 'shapeSpace'),
);
wp_localize_script('shapeSpace_script', 'shapeSpace', $array);
}
add_action('wp_enqueue_scripts', 'diwakar_enqueue_scripts');This example function adds our JavaScript file to the queue and assigns it an ID called ‘shapeSpace_script’. Then, we create an associative array that holds our variables. Finally, we use ‘wp_localize_script()’ to include these variables in the inline script along with the registered ‘shapeSpace_script’. This allows us to use the added JS variables such as ‘shapeSpace.var1’.
Pros
This method is good because it connects your custom script to an existing registered script. This way, you can control where your custom script is placed more easily.
Cons
The only drawback of this method is that you can only add JavaScript variables (e.g., var = ‘value’;). If you need to add other types of inline scripts like equations or functions, it won’t work with wp_localize_script().
BEST: inline scripts via wp_add_inline_script()
Now, let’s explore a better way to add inline scripts using the newer WordPress function called wp_add_inline_script(). In practice, it’s similar to wp_localize_script(), but it offers more flexibility. Here’s an example:
// inline scripts via wp_add_inline_script()
function diwakar_enqueue_scripts() {
wp_enqueue_script('shapeSpace_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
$script = 'var1 = '. json_encode('var1') .'; ';
$script .= 'var2 = '. json_encode('var2') .'; ';
$script .= 'var3 = '. json_encode('var3') .'; ';
wp_add_inline_script('shapeSpace_script', $script, 'before');
}
add_action('wp_enqueue_scripts', 'diwakar_enqueue_scripts');This might not seem like a big deal, but it’s really cool. We get the benefits of both methods:
– We can add ANY JavaScript code we want.
– We can associate it with any registered script.
This gives us complete control over the script content and where it appears on the page. Also, notice the third parameter, $position. It allows us to include the $script either before or after the $handle, which is shapeSpace_script.
Pros
All good things. You can add any JavaScript code right where you want it, before or after the registered script, which can be in the head or footer. You’re in charge.
Cons
No downsides. It’s all good.
Complete Example: Inline Script with Fallback
By combining everything, we can create a comprehensive method for adding inline scripts that functions in nearly all versions of WordPress. As an example, I employ the following three-function approach in my front-end posts plugin.
function diwakar_enqueue_scripts() {
wp_enqueue_script('diwakar_script', get_template_directory_uri() .'/js/script.js', array(), '1.0', true);
diwakar_inline_script();
}
add_action('wp_enqueue_scripts', 'diwakar_enqueue_scripts');
// inline scripts WP >= 4.5
function diwakar_inline_script() {
$wp_version = get_bloginfo('version');
if (version_compare($wp_version, '4.5', '>=')) {
$script = 'var1 = '. json_encode('var1') .'; ';
$script .= 'var2 = '. json_encode('var2') .'; ';
$script .= 'var3 = '. json_encode('var3') .'; ';
wp_add_inline_script('diwakar_script', $script, 'before');
}
}
// inline scripts WP < 4.5
function diwakar_print_scripts() {
$wp_version = get_bloginfo('version');
if (version_compare($wp_version, '4.5', '<')) {
?>
<script>
var var1 = <?php echo json_encode('var1'); ?>;
var var2 = <?php echo json_encode('var2'); ?>;
var var3 = <?php echo json_encode('var3'); ?>;
</script>
<?php
}
}
add_action('wp_print_scripts', 'diwakar_print_scripts');That’s the key to success right there. We have three straightforward functions. First, we load our JavaScript file. Then, we use the second function to include our inline script using wp_add_inline_script() for WordPress versions 4.5 and newer. Finally, the third function serves as a backup for older WordPress versions. For anything older than 4.5, it adds our inline script through the wp_print_scripts hook. So, in summary, this technique works flawlessly for adding inline scripts in any WordPress version, going back to something as ancient as 2.1.
Recap
Quick recap for your information on adding inline scripts to WordPress:
1. Use wp_print_scripts or admin_print_scripts to add any code to the header.
2. For adding JavaScript variables to any registered script, use wp_localize_script().
3. To add any JavaScript code to any registered script, go with wp_add_inline_script().
Bonus: If you want to add inline CSS or styles instead of JavaScript, WordPress has a set of ‘add style’ functions, like wp_add_inline_style() and wp_print_styles.
Related Articles
Leave a Reply