Skip to main content
added 2nd update about 3.3 possibility, removed standards note because no longer relevant
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated the solution into my plugin. If anyone is curious to see it fleshed out in a live environment you can download it or browse it.

Update 2: As of WordPress 3.3, it's now possible to call wp_enqueue_script() directly inside a shortcode callback, and the JavaScript file will be called within the document's footer. That's technically possible for CSS files as well, but should be considered a bad practice because outputting CSS outside the <head> tag violates W3C specs, can case FOUC, and may force the browser to re-render the page.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated the solution into my plugin. If anyone is curious to see it fleshed out in a live environment you can download it or browse it.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

Update: I've integrated the solution into my plugin. If anyone is curious to see it fleshed out in a live environment you can download it or browse it.

Update 2: As of WordPress 3.3, it's now possible to call wp_enqueue_script() directly inside a shortcode callback, and the JavaScript file will be called within the document's footer. That's technically possible for CSS files as well, but should be considered a bad practice because outputting CSS outside the <head> tag violates W3C specs, can case FOUC, and may force the browser to re-render the page.

added 17 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated thisthe solution into my codeplugin. If anyone is curious to see it fleshed out in a live environment you can download it or browse itbrowse it.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated this into my code. If anyone is curious to see it in a live environment you can download it or browse it.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated the solution into my plugin. If anyone is curious to see it fleshed out in a live environment you can download it or browse it.

added 276 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated this into my code. If anyone is curious to see it in a live environment you can download it or browse it.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

I released a plugin that creates a shortcode and requires a JavaScript file and a CSS file to load on any page that contains that shortcode. I could just make the script/style load on all pages, but that's not the best practice. I only want to load the files on pages that call the shortcode. I've found two methods of doing this, but both have problems.

Method 1 sets a flag to true inside the shortcode handler function, and then checks that value inside a wp_footer callback. If it's true, it uses wp_print_scripts() to load the JavaScript. The problem with this is that it only works for JavaScript and not CSS, because CSS should be declared inside <head>, which you can only do during an early hook like init or wp_head.

Method 2 fires early and "peeks ahead" to see if the shortcode exists in the current page content. I like this method much better than the first, but the problem with it it won't detect if the template calls do_shortcode().

So, I'm leaning towards using the second method and then trying to detect if a template is assigned, and if so, parse it for the shortcode. Before I do that, though, I wanted to check if anyone knows of a better method.

NOTE: Any acceptable solution needs to follow best practices, which means that all CSS has to go inside <head>, and wp_enqueue_script()/wp_enqueue_style() are used to load files. I already know there are methods that get around this by implementing bad practices, but I'm not interested in those. Please don't answer/comment if your solution doesn't meet that critera.

Update: I've integrated this into my code. If anyone is curious to see it in a live environment you can download it or browse it.

added 1 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69
Loading
deleted 92 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69
Loading
added 292 characters in body; added 4 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69
Loading
added 187 characters in body
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69
Loading
Tweeted twitter.com/#!/StackWordPress/status/83918488695083008
Source Link
Ian Dunn
  • 4.9k
  • 5
  • 43
  • 69
Loading