Load A Stylesheet Only If Use Gallery

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.

Comments are closed.

8 comments

  1. Justin Tadlock

    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

    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

    @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

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

  5. beachbum

    Trying to get this technique to work with the Audio-player plugin( http://wordpress.org/extend/plugins/audio-player/ ).

    It uses addHeaderCode() and addFooterCode() too insert.

    Could you point me in the right direction please?

  6. Ryan

    Found one trivial little fix. This fails if the shortcode is the first thing in the post content. stripos would return 0 so the if wouldn't fire. Changing it to !== false fixed it.

    Admittedly a pretty unlikely deal, but I'm working on a plugin and the test post had the shortcode as the only content.

  7. Numaga

    So were do I put those codes exactly? I'm looking for ways to minimize the pageload on my home page and this gallery plugin is the first thing that needs to go. Thing is I'm not really a coding guru, I would like to have a file and location where to put it and I'll be okay 😉

    Thanks in advance.

  8. Adamski

    I just had to do something similar - check if gallery is being used on a page and output a div if not.

    I put this within

    $page_data = get_page( $post->ID );
    $content = $page_data->post_content;
    $pos = strpos($content, '[gallery]' );
    if( $pos === false ) {
    $found = false;
    } else {
    $found = true;
    }

    Then you can do your conditionals..