wp-enqueue-script - Read For Learn

wp_script_add_data not working

the wp_script_add_data() method itself is not adding async attribute to the script tag. It just add a metadata to the script. As examples were already given earlier in few answers the following could work for you: wp_enqueue_script(‘pledge-js’, ‘https://www.pledge.to/assets/widget.js’, array( ‘jquery’ ), null, true); wp_script_add_data( ‘pledge-js’, ‘async’, true); add_filter(‘script_loader_tag’, ‘async_scripts’, 3, 10); function async_scripts($tag, $handle, $src) … Read more

How to add Gutenberg editor on frontend page?

Making the Google Maps API non readable

While you can’t obfuscate/hide the code, you can restrict access by domain: https://developers.google.com/maps/api-security-best-practices

functions.php doesn’t load all custom theme assets

I believe your mistake is using main as handle keyword for both script and style, handle must be unique. You don’t have to use wp_register_script (and style) enqueue function does this automatically. You typically use wp_register_script(style) only if you are not sure if script/style will be needed later, if it is enqueued conditionally, but you … Read more

What is the standard way to use the version of React that ships with Gutenberg on the front end?

I found it, wp-element. The @wordpress/scripts should handle the heavy lifting of transforming the JSX in the proper way. add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_plugin_js’ ); // Loads on frontend function my_enqueue_plugin_js() { wp_enqueue_script( ‘my-plugin-frontend’, plugin_dir_url( __FILE__ ) . ‘js/plugin.js’, [‘wp-element’] ); } Once we do this we will have window.wp.element available in our JavaScript. This contains the … Read more

How can I specifically enqueue scripts for edit orders pages only

You can do it by checking current post_type. For woocommerce order page, post type is shop_order. So try to change your code as follows. function selectively_enqueue_admin_script_js_for_edit_address($hook) { global $post; if ($post->post_type === ‘shop_order’) { if ($hook === ‘post.php’ || $hook === ‘post-new.php’) { wp_enqueue_script(‘artio-wc-admin-order-page-mod’, ‘/wp-content/plugins/custom_wc_mods/order_page/paste_payment_instructions_and_prompts_into_shipping_address_form_v2.js’, array(), date(“h:i:s”)); /* https://stackoverflow.com/a/31834007 */ /* During development, you could … Read more

Loading newest dependency javascript module file in functions.php

The problem Import statement like: import { export1 } from “./module-name.js”; is called static import declaration. Dynamic query string (to force load the latest file) cannot be used in static import declarations. So, to solve this problem, you’ll have to choose one of the following four options: Remove export and import statements from all the … Read more

Auto updating JavaScript dependancy in functions.php

If I understood your question correctly, you have two JavaScript files: ads.js and banner.js. You want the site to load the updated version of both of these files, whenever any of these files are changed. If this understanding is correct, then you may do the following: function my_custom_theme_scripts() { $ads_version = filemtime( get_stylesheet_directory() . ‘/js/ads.js’ … Read more

wp_enqueue_script doesn’t load JS in plugin

Your code seems to be fine, so I think the problem will rather be in your theme. Are you developing your own theme too? The wp_head function calls in those files, which were hooked to wp_enqueue_scripts. It should be in the theme between the head tags, similarly as you see here: https://developer.wordpress.org/reference/functions/wp_head/#comment-900

+ More