The script_loader_tag
filter, added in version 4.1, addresses this issue. To add an async attribute to an enqueued script you can do:
/**
* Add an aysnc attribute to an enqueued script
*
* @param string $tag Tag for the enqueued script.
* @param string $handle The script's registered handle.
* @return string Script tag for the enqueued script
*/
function namespace_async_scripts( $tag, $handle ) {
// Just return the tag normally if this isn't one we want to async
if ( 'your-script-handle' !== $handle ) {
return $tag;
}
return str_replace( ' src', ' async src', $tag );
}
add_filter( 'script_loader_tag', 'namespace_async_scripts', 10, 2 );
If you want to add an id to the script, you could add that in the str_replace()
as well.
More information available via the article »Add Defer & Async Attributes to WordPress Scripts« by Matthew Horne and the developer reference to script_loader_tag
.
Related Posts:
- Is it possible to reuse wp.media.editor Modal for dialogs other than media
- How to implement color picker from wordpress in my plugin?
- How to provide translations for a WordPress TinyMCE plugin?
- How-to implement admin Ajax inside an admin WP_List_Table?
- API to trigger prompt on leaving page
- Test to see if jQuery or Prototype is queued by another plugin?
- Include third party Javascript library which is not included in WordPress
- jQuery in header or footer
- Hook the Keydown Event in the TinyMCE Post Editor
- How to Add a .js file Only in one specific Page Dynamically to Head
- wp_localize_script $handle
- How to prevent loading of all plugin’s resources?
- How to trap “Publish” button to check for meta box validation?
- Pass javascript result to shortcode executer function
- The changes I make to an external JS file of my WP plugin are only applied after I clear my browser’s cache
- `wp_set_script_translations` with `wp.i18n` does not return translated strings in simple plugin
- Use js script from one plugin in another plugin
- creating elements/innerblocks via rangecontrol
- Making a custom widget that includes a tinymce and works in Site Origin Page Builder
- Looking for callback function after Gutenberg is rendered?
- What’s the better way to add an inline script?
- Can’t get JS code to work with shortcode
- How do I add a javascript file to all admin pages via a plugin?
- Gutenberg: useDispatch is not a function – @wordpress/data included
- Make a list with header and subtext in Gutenberg blocks
- Gutenberg – What is the best way to save/update post meta?
- Prevent Javascript Facebook SDK Conflicts in plugin
- how to include javascript file and css file in wordpress
- Print WordPress username id inside JavaScript
- Mixing Regular Javascript With jQuery in a Plugin
- How to run a external JavaScript file on wp-admin if admin, and other if normal user?
- Why is my javascript not invoked in my hooks except wp_head?
- Where to call wp_enqueue_script in a plugin with custom template?
- Is there an event or an other method that tells me the preview is loaded?
- WordPress Plugin with a shortcode that dynamically generates javascript. Can I use add_action without wrapping the javascript in a function?
- How to prevent UNDO on guternberg block editor
- Do I have to worry about useState causing a re-render?
- Creating a custom Gutenberg block with columns
- “import declarations may only appear at top level of a module” when importing WooCommerce API node module
- wp.template() returns tags in Ajax response
- Gutenberg: import dependency or assign from global variable?
- My WordPress plugin cannot load my JavaScript file
- javascript datatables in a plugin
- add javascript files only when plugin is called?
- Inserting code to HTML view from a pop up initiated from visual view
- Plugin – Make sure jquery is loaded in my settings page plus my JS file
- How can I avoid conflicts between plugin and theme?
- How to control an elements classes from multiple Gutenberg sidebar controls?
- How should I go about registering JavaScript that isn’t a file? [duplicate]
- What action hook can I use to add a JavaScript to a page post using a theme template that is not including get_header() nor get_footer()?
- should i be checking for jquery before enqueing it in a plugin
- Loading custom js file on the admin page through plugin
- Translate javascript with WordPress built-in localization API for static strings
- Need help about understand api, wp, $ syntax in WordPress plugin script
- Insert Into Post Not Working For Audio File Using jQuery
- Developing the save function in Gutenberg blocks
- Gutenberg – is it ok to load dependencies multiple times?
- Preventing double loading JS scripts (like React) when developing for Gutenberg
- Referencing files in JavaScript in WordPress Plugin
- How to insert HTML/CSS/JS into my iframe plugin?
- Is there a WordPress plugin to design WebGL? [closed]
- How to write a shopping queue line plugin with a queue button?
- wp.media libary pdf type
- wp.media gallery collection sometimes undefined
- Query String Filtering API
- Getting incorrect filepath inside custom block front-end output using @wordpress/create-block tutorial
- Trigger function on Remove block or add new block in Gutenberg JavaScript
- Multiple TinyMCE on button click is initialized and appended but why only last one is writeable?
- Rerender core Templates with with ToggleControl but it doesnt recognize block type
- HTMLCollection not counting right in editor? / for loop not working on elements in DOM
- converting a node.js project into a wp plugin
- What happens/fires when you select a block in the editor?
- Is “document loaded” different on admin side than public side?
- How to use setAttributes outside of the edit function return
- why is apiFetch throwing Unhandled Promise Rejection: TypeError: Object is not a function
- Reading plugin settings in esnext wordpress block
- Dynamically modify content added to table via javascript
- Load script on frontend from widget plugin
- WordPress with React: Saving and Using Data Collected with fetch
- Append php file to footer
- Javascript scroll eventHandler only working when I’m logged in in WordPress
- Replace the WordPress Media Library Uploader
- Using JavaScript in WordPress page to call for server data using AJAX
- Pass javascript result to shortcode executer function
- Filterable posts using categories
- Add a Script button in W3 Total Cache plugin not working due to conflicting jQuery version
- Add language localisation to javascript alert?
- Uncaught ReferenceError: kpoejy is not defined
- How to display archive by selecting year and then selecting month
- Remove from a div by class name from post page if post author role is not administrator
- On one of my sites a file is shown as 404 but the file IS there
- How do I use (or mimic) document.getElementById() on a page loaded from WordPress database?
- How can i add insertion point between inner blocks in my custom block like core blocks
- How do I access the contents of WordPress Classic editor in admin area with JavaScript?
- How to get the value entered in the input field in wordpres
- How can create a custom plugin to call my webapi after any registration or membership plugin functionality
- Trouble Importing whatsapp-web.js in a WordPress Plugin Development
- Insert meta-description into Yoast-SEO input-field via JavaScript
- Reinitiate Gutenburg’s blocks using javascript
- how to add contact form 7 shortcode in javascript variable