have an interesting conundrum. I need to load about 8 javascript files and the same number of styles for my plugin. These are only needed where ever my shortcode is ran.
I’ve tried to load them with print_styles and print_scripts but they aren’t rendering properly, plus to do so breaks xhtml validation. So at the moment they load on every page and due to the number of files needed its not feasible to leave it like this.
On another project I wrote a function into my plugin’s index.php file that would take the current page, search it for my shortcode and if found only then would it print the scripts, but this is an ugly hack.
Has anybody got any suggestions or solutions?
any help would be appreciated,
regards,
Daithi
to answer my own question… I had it write the first time. You have to search each page to check that your shortcode is being used. This has to be done when page data is loaded and before page is displayed. To me it is complete overkill on the system, but unfortunately it is the way it is. I got this information from:
get_shortcode_regex
and
old nabble
So first:
then:
replace ‘YOURSHORTCODE’ with the name of your shortcode and add your wp_enqueue_scripts into where it says //shortcode is being used.
I read a solution in here: http://scribu.net/wordpress/conditional-script-loading-revisited.html
Basically if using wordpress 3.3 you can enqueue your scripts in your short code function.
Loading Scripts and Styles Dynamically Per Page Using a Shortcode
Advantages
strstr()
orstrpos()
. If you need to pickup args then you should use the shortcode regex mentioned above.Explanation of Code
Finds the shortcodes on page using the
save_post
hook only when the post is not a revision and matches the specifiedpost_type
.Saves the found post ids as an array using
add_option()
with autoload set to yes unless the entry is already present. Then it will useupdate_option()
.Uses hook
wp_enqueue_scripts
to call ouradd_scripts_and_styles()
function.That function then calls
get_option()
to retrieve our array of page ids. If the current$page_id
is in the$option_id_array
then it adds the scripts and styles.Please note: I converted the code from OOP Namespaced classes so I may have missed something. Let me know in the comments if I did.
Code Example: Finding Shortcode Occurences
Code Example: Shortcode Dynamically Include Scripts and Styles
Just read this tutorial over here: http://scribu.net/wordpress/optimal-script-loading.html
Seems to be the best way.
Load Scripts and Styles if Post/Page has Short Code
The best solution is to load the files into the page header if, and only if, the current post or page has the short code inside its content. And thatâs exactly what the following function does:
//register your scripts and styles here
//check whether your content has shortcode
//Enqueue your scripts and styles here
Simply place this function inside of one of your plugin files and youâre good to go.
You will need to replace [your-shortcode] with the short code you want to search for, and you will also need to replace plugin_styles.css with your stylesheet name.
You can just use this code to check if the shortcode is implemented in page content or in sidebar widgets.
I use WordPress Version 5.4 with OOP style of code i dont know if this affect why none of the above solutions didn’t work for me so i come up with this solution:
Hope this help someone.
How many pages are these scripts going to be loaded on? Would it be feasible to maintain an array of pages, and only load the scripts/stylesheets when the current page is in the array?
Otherwise, without scanning the code there is no way to do this, as WP doesn’t even know the shortcode exists until well into the page load.
BraedenP is right, I’m pretty sure there is no way to detect shortcode usage at the execution time of wp_enqueue_scripts / when the stylesheets load.
Is there any reason you must do this in 8 files? One would just be more efficient, then it may not be a problem to load it on every page.
You could consider a PHP stylesheet solution that only executes certain styles if needed. A css.php file may resemble:
Less scripts and less stylesheets means less http requests and a faster load time.