WordPress 6.4 and picostrap: fixing the Bootstrap JS loading issue
In the recent WordPress 6.4 update, picostrap-powered sites may encounter issues with interactive elements such as dropdown menus, collapsible elements, or accordions becoming unresponsive.
These issues arise from the new WordPress release's incompatibility with the method that picostrap previously employed to implement the "defer" and "async" attributes to optimize JavaScript file loading.
The outcome of this is that the Bootstrap JS file do not load anymore - thus interactive elements stop working,
Picostrap's approach to achieve defer and async involved filtering URLs loaded with wp_enqueue_script, enabling the performance benefits of these attributes, well ahead of their official WordPress support. However, with the new built-in support for these attributes landed in WordPress 6.4, the previous method is no longer necessary - and breaks the enqueue.
To resolve the aforementioned interactive element issues, a straightforward fix is required.
Please note that if you're using a child theme, you'll need to upgrade the main theme, and manually patch the child theme as explained in the second part of this post.
This small tutorial assumes you're not using V3 beta of the picostrap theme. If you're an user of V3 beta, please ignore these instructions and refer to the specific Discord room.
Don't worry, the process is quite easy.
Fixing the picostrap theme: just upgrade
Version 2.1.1 of the picostrap theme, which is now available for download, does include the necessary fixes.
If you haven't hacked the Theme files, upgrading should be quite straightforward. Just overwrite the theme, no worries.
The only caveat: after overwriting. you need to rebuild the theme's CSS via the WP backend "Appearance" > "Force CSS Bundle Rebuild (No fear)".
Fixes were minor: please note that only these two files were changed:
- inc/enqueues.php
- inc/optin/glightbox.php
If you're not using a child theme, you should be done. If you're using a Child theme, please read on. Some more work is necessary on your side.
Fixing your own picostrap Child theme
In the functions.php file of your Child theme, approximately on line #30, this row is responsible of enqueuing your Bootstrap JS file:
wp_enqueue_script( 'bootstrap5-childtheme', get_stylesheet_directory_uri() . "/js/bootstrap.bundle.min.js#asyncload", array(), null, true );
Substitute this line with the following:
wp_enqueue_script( 'bootstrap5-childtheme', get_stylesheet_directory_uri() . "/js/bootstrap.bundle.min.js", array(), null, array('strategy' => 'defer', 'in_footer' => true) );
After doing these changes, you should immediately see your Bootstrap Javascript - powered elements work again - unless you're running a very old version of the picostrap child theme. In that case, read on.
Additional advice for older picostrap child themes
In the oldest Picostrap versions, the bootstrap.bundle.min.js was not yet in the child theme - the Bootstrap bundle JS file was referenced from the parent theme.
So basically you just have to copy this file from your parent theme, to the child theme (in a /js folder).
How to test that all is fine
As a test, it makes sense to view your homepage source and check for the bootstrap.bundle.min,js file. It's in the last part of the HTML.
Clicking the URL, the file should load successfully. If you get a 404, there's still something wrong.
That's all folks
I hope that this information is clear enough for everybody; if you're still having issues after following these steps, don't worry, the problem is simple and we're glad to help.
Please accept our apologies for this annoyance. Sometimes trying to push things forward has risks.
As a result of all this, the new versions of the picostrap Theme (2.1.1 and 3.0.1) now make use of the native WP APIs for enqueuing JS files with defer and async.