In most situations (if not all) you wouldn’t want to add wp_enqueue_script() into your shortcode callback. Instead you should add it using the wp_enqueue_scripts action hook.
The reason the script may not be enqueued within the shortcode can be because the WordPress Enqueue functionality has already run before your shortcode gets processed, thus your script won’t be output to the source. Using the previously linked hook will ensure your script gets added to the page.
@howdy_mcgee Thanks for the suggestion. However, if I insert the shortcode into a text block in Visual Composer directly on home page it works. If the shorcode is inserted into a HTML block that is included in the home page as a popup (but the popup html code is visible in the source code, only the scripts missing), then it doesn’t work anymore.
This is why I am trying to find a debug / troubleshooting method to understand why in one scenario gets included and in one not, so I can change and fix it.
Thanks!
All scrips should be added via the wp_enqueue_scripts() function and it’s recommended to use the wp_enqueue_scripts because of when the hook runs.
WordPress outputs the scripts in the wp_head() and wp_footer() functions depending on where you tell it to enqueue. For example, if you tell your script to load in the header but the header scripts have already run, your script will not be enqueued.
For example, if for some reason we were adding a script at the opening body tag, the script will never be added because wp_head() has already run.
add_action( 'wp_body_open', function() {
/**
* This script will not be enqueued
*/
wp_enqueue_script(
'script-id', // Script ID
$script_url, // Script URL
array( 'jquery' ), // Script Dependencies
'1.2.3', // Script Version
false, // False = Header, True = Footer
);
} );
Additionally, if your script is enqueued before a dependency has been added or exists it will not be enqueued. For example, if jQuery is needed as a dependency by another script and is enqueued after your script is enqueued, your script will not load because the dependency hasn’t loaded yet.
Hopefully someone with a better understanding can explain it better but the load process for enqueueing scripts is important and enqueueing in a shortcode can be sporadic which is why it’s not recommended. The safest approach is to use the wp_enqueue_scripts hook.
For an additional reference here’s a similar question answered on WordPress StackExchange: https://wordpress.stackexchange.com/a/98533/7355
@howdy_mcgee thank you for the details. I have tried to change as suggested and use wp_enqueue_scripts but unfortunatelly this does not make any difference in behavior.
So, in case of using wp_enqueue_script / wp_enqueue_scripts the script will get included in the page if the shortcode is placed in a text block of VC, but the script will not be included when is placed in a HTML block that is included inside the page.
Activating wp_debug does not seem to provide additional details.
WP Debug probably won’t show issues in this cause since it’s not a real PHP error or warning, just a load issue. If the using the wp_enqueue_scripts action hook described above did not work you’ll need to provide some code for us to replicate. Are you sure your theme has a wp_head() and wp_footer() hook as it should?
@howdy_mcgee you are right, it’s not an actual PHP error / warning.
With the use of Query Monitor, I was able to find something.
Query Monitor reports missing dependencies – jQuery for the scripts that do not get included.
It looks like somehow the scripts are being enqueued before jQuery does. Tried to include in the call parameter for include in footer but does not seem to make any difference.
The setup is a bit more complex as the code is part of a plugin that I am trying to use for a specific functionality. (Form creation and integration with a 3rd party service, that should be submitted via Ajax. Everything works except the Ajax submit because scripts are not included)
Can you provide the wp_enqueue_script() hook code you’re using? Are you testing your plugin on the default TwentyTwenty theme?
