Load A Stylesheet Only If Use Gallery

January 26th, 2010 by Frank • WordPress Hacks • 4 Comments

In relation to the better Gallery it is actually not necessary to load the stylesheet if there is no gallery, so it is worth it to check in advance whether the gallery will be used in the post or not. For this you have to parse the post which can be done in two ways.

The classic solution is to parse the content and seek the short code, classic PHP strstr. Depending on the result it loads the stylesheet.
if ( strstr($post->post_content, '[gallery') ).
This obviously takes time and performance, what you really like to avoid. Thus, it is better if you can parse the post in advance. In this context, there is a tread in the forum of WordPress, which contains a very nice solution by WhiteShadow which you can use to load the stylesheet.

// onyl css, when post has a gallery
function gallery_stylesheet($posts) {
	if ( empty($posts) )
		return $posts;
 
	$found = false;
 
	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[gallery') )
			$found = true;
			break;
		}
 
	if ($found)
		wp_enqueue_style( 'gallery-stylesheet', get_bloginfo('stylesheet_directory') . '/gallery.css', false, false, 'screen' );
 
	return $posts;
}
add_action('the_posts', 'gallery_stylesheet');

You can also use this to load scripts,

// onyl js, when post has a gallery
function my_script($posts) {
	if ( empty($posts) )
		return $posts;
 
	$found = false;
 
	foreach ($posts as $post) {
		if ( stripos($post->post_content, '[my-script) )
			$found = true;
			break;
		}
 
	if ($found)
		wp_enqueue_script( 'my-script', get_bloginfo('template_directory') . '/js/my_script.js', false, false, true );
 
	return $posts;
}
add_action('the_posts', 'my_script');

For more information, to include JavaScript and CSS files, there is another post about this topic.


4 Comments
  1. Justin Tadlock says:
    January 26, 2010 at 3:04 pm

    This only works in the case of the shortcode being in the post content. It doesn't take into account that users may put the gallery in other places on their page (other shortcode-ready areas). I've seen a few posts on checking the post content before loading JavaScript and CSS lately. All of them make the assumption that users only add stuff to their post content.

    But, the solution I like the most is to simply add the gallery styles to the theme's style.css file. I also like just making one JavaScript file (jQuery, usually), and only having to load it.

    Also, for anyone using child themes, you need to replace get_bloginfo('template_directory') with get_stylesheet_directory_uri() for this tutorial. This also works when not using a child theme.

  2. Ted says:
    January 26, 2010 at 3:48 pm

    I put this code in function.php


    function remove_gallery_css()
    {
    return "";
    }
    add_filter('gallery_style', 'remove_gallery_css');

    so I can style my gallery in my stylesheet

  3. Frank says:
    January 26, 2010 at 3:49 pm

    @Justin: thanks for your reply and your hint to this small code tipps. Yes, you have right, this works only when use the shortcode on post content: On my own solutions i add a metabox to the editor with a radiobutton or checkbox to add js or css for custom solutions.

  4. Frank says:
    January 26, 2010 at 4:04 pm

    @Ted: yes, correctly and how you load your css, always or only when you add the shortcode in the content?

Leave a Reply
WP Engineer Tags