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:

<?php
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!

4 comments

  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 www.mapsmarker.com 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 ) ) {
    wp_enqueue_style('
    leafletmapsmarker', LEAFLET_PLUGIN_URL . 'leaflet-dist/leaflet.css');
    break;
    }
    }
    }
    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.