Shortcodes, include CSS and JS only on the correct blog pages

Not too long ago I wanted to add a new plugin to my blog. During various tests I noticed something quite shocking: at least one of the plugins insisted on loading it's CSS and jquery on every page of my blog. A little more testing showed me that many plugins do the same.

That's not good. Yes, jquery is lightweigt, CSS files aren't big, but that's not a good reason for making every visitor download them. I did some research and it doesn't look like anybody wrote about a solution yet, so here's one way. Usually, you would use wp_enqueue_script() or wp_enqueue_script().

Instead, try this:

add_action( 'wp_print_styles', 'yourplugin_include_css' );function yourplugin_include_css() {
    // Check if shortcode exists in page or post content
    global $post;
    if ( strstr( $post->post_content, '{yourshortcode}' ) ) {
        echo $csslink;

That's it. Please don't add custom javascript or CSS on each and every page of my blog.

Update: See this excellent post for an improved solution.

Update 2: The best solution for loading JavaScript, thanks to scribu.

Published on Oct. 21, 2009 at 12:23 p.m. by Nicolas and tagged WordPress, plugin, JavaScript, development, CSS. You can follow the discussion with the comment feed for this post. Feeling generous? Donate!


  1. avatar
    wrote this comment on

    This isn't true for a good made up template as you can make the template load JQuery when ever needed:

    Should only load java when needed. ?

    Reply to this comment
  2. avatar
    wrote this comment on

    That is good, but how does the plugin know which page to load on? Using a shortcode? The post needs more explanation.

    Reply to this comment
    1. avatar
      wrote this comment on

      Yes, this post assumes the plugin uses a shortcode. I wrote the post in a rush and will try to make this more clear. Thanks for the remark.

      Reply to this comment
  3. avatar
    wrote this comment on
    Finally I also found a solution for conditional css loading which works for my plugin and I´d like to share with you. It checks if my shortcode is used within the current template file and header/footer.php and if yes, enqueues the needed stylesheet in the header:

     function prefix_template_check_shortcode( $template ) {
    $searchterm = '[mapsmarker';
    $files = array( $template, get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'header.php', get_stylesheet_directory() . DIRECTORY_SEPARATOR . 'footer.php' );
    foreach( $files as $file ) {
    if( file_exists($file) ) {
    $contents = file_get_contents($file);
    if( strpos( $contents, $searchterm ) ) {
    leafletmapsmarker', LEAFLET_PLUGIN_URL . 'leaflet-dist/leaflet.css');
    return $template;
    add_action('template_include','prefix_template_check_shortcode' );

    Reply to this comment

Start a new thread

Cancel reply
Markdown. Syntax highlighting with <code lang="php"><?php echo "Hello, world!"; ?></code> etc.