This is How to Add Additional Attributes to the Script Tag When Enqueueing Scripts in WordPress
As a WordPress developer, you often need to enqueue scripts on your website to add additional functionality or external libraries. When you enqueue a script, WordPress generates an HTML <script>
tag that looks something like this:
<script src="https://example.com/my-script.js"></script>
However, there may be times when you need to add additional attributes to this script tag, such as disabling Cloudflare's rocket loader for a specific script. This is a common issue that many WordPress developers face, and in this article, we'll show you how to easily solve it.
The Problem: Disabling Cloudflare's Rocket Loader for a Specific Script
Cloudflare is a popular content delivery network (CDN) that many WordPress users leverage to improve their website's performance and security. One of Cloudflare's features is the "Rocket Loader," which is designed to automatically optimize JavaScript on your website.
While the Rocket Loader can be beneficial in many cases, it can sometimes cause issues with specific scripts on your website. For example, if you have a script that relies on a particular global variable or function, the Rocket Loader may interfere with its proper execution.
In such cases, you may need to disable the Rocket Loader for that specific script. This can be done by adding the data-cfasync="false"
attribute to the <script>
tag.
The Solution: Add Additional Attributes to the Script Tag
Fortunately, WordPress provides a filter called script_loader_tag
that allows you to modify the HTML output of the <script>
tag when a script is enqueued. This filter gives you the ability to add, remove, or modify attributes of the <script>
tag.
Here's the code you can add to your WordPress theme's functions.php
file to disable the Rocket Loader for a specific script:
function disable_rocketship( $tag, $handle, $src ) {
if ( 'YOUR_SCRIPT_HANDLE_HERE' === $handle ) {
$tag = str_replace( 'src=', 'data-cfasync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'disable_rocketship', 10, 3 );
Let's break down this code:
- The
disable_rocketship()
function is the callback function for the script_loader_tag
filter. It takes three parameters:
$tag
: The HTML output of the <script>
tag.
$handle
: The script handle, which is the unique identifier for the script you've enqueued.
$src
: The source URL of the script.
- The
if
statement checks if the current script handle matches the one you want to modify. In this case, you'll need to replace 'YOUR_SCRIPT_HANDLE_HERE'
with the actual handle of the script you want to disable the Rocket Loader for.
- Inside the
if
statement, the code uses the str_replace()
function to insert the data-cfasync="false"
attribute into the <script>
tag, right before the src=
attribute.
- Finally, the modified
<script>
tag is returned.
When you add this code to your functions.php
file, WordPress will automatically apply the data-cfasync="false"
attribute to the specified script, effectively disabling the Rocket Loader for that script.
Real-World Example: Disabling Rocket Loader for a jQuery Script
Let's say you have a jQuery script that you've enqueued in your WordPress theme or plugin, and you've noticed that the Rocket Loader is causing issues with its execution. Here's how you can use the code snippet above to disable the Rocket Loader for that specific script:
function disable_rocketship( $tag, $handle, $src ) {
if ( 'my-jquery-script' === $handle ) {
$tag = str_replace( 'src=', 'data-cfasync="false" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'disable_rocketship', 10, 3 );
In this example, the script handle is 'my-jquery-script'
. You'll need to replace this with the actual handle of the script you've enqueued in your WordPress project.
Once you've added this code to your functions.php
file, the Rocket Loader will be disabled for the 'my-jquery-script'
script, and you should see the following HTML output:
<script data-cfasync="false" src="https://example.com/my-jquery-script.js"></script>
Other Use Cases for Adding Attributes to Script Tags
While the example above focused on disabling the Rocket Loader, you can use the script_loader_tag
filter to add any other attributes you might need to the <script>
tag. Here are some other common use cases:
- Adding an integrity hash for improved security: If you're loading a script from a third-party CDN, you can add an integrity hash to ensure that the script hasn't been tampered with. This is particularly important for scripts that handle sensitive data or perform critical functionality on your website.
function add_integrity_hash( $tag, $handle, $src ) {
if ( 'my-third-party-script' === $handle ) {
$tag = str_replace( 'src=', 'integrity="sha384-ABC123DEF456GHI789JKL890MKO" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_integrity_hash', 10, 3 );
- Adding async or defer attributes: You can use these attributes to control the loading and execution of your scripts, which can improve the perceived performance of your website.
function add_async_defer( $tag, $handle, $src ) {
if ( 'my-async-script' === $handle ) {
$tag = str_replace( 'src=', 'async src=', $tag );
} elseif ( 'my-deferred-script' === $handle ) {
$tag = str_replace( 'src=', 'defer src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_async_defer', 10, 3 );
- Adding custom attributes for A/B testing or analytics: You can add custom attributes to the
<script>
tag to support A/B testing or integrate with your website analytics platform.
function add_custom_attributes( $tag, $handle, $src ) {
if ( 'my-analytics-script' === $handle ) {
$tag = str_replace( 'src=', 'data-track-origin="homepage" src=', $tag );
}
return $tag;
}
add_filter( 'script_loader_tag', 'add_custom_attributes', 10, 3 );
By using the script_loader_tag
filter, you can easily customize the HTML output of your script tags to meet your specific requirements, whether it's disabling the Rocket Loader, improving security, optimizing performance, or integrating with your analytics platform.
Remember, when using this filter, always make sure to replace 'YOUR_SCRIPT_HANDLE_HERE'
with the actual handle of the script you want to modify, and test your changes thoroughly to ensure they don't introduce any unexpected issues on your website.
Flowpoint.ai can help you identify all the technical errors that are impacting conversion rates on your website and directly generate recommendations to fix them, including issues related to script enqueuing and optimization
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.