How to detect if a function has been fired on any page so scripts/styles can be loaded conditionally

by

I’m building a small gallery plugin and I’d like to only load scripts/styles onto the page IF the gallery has been loaded via the template tag. The template tag can take a post ID parameter when used to call a post’s gallery from wherever you need within the theme.

I know how to do this on singular pages (I can just lookup the meta_key and match it against the currently viewed post) but detecting if there’s a gallery present on say the homepage (or any other page) is proving more difficult.

So let’s assume the template tag looks something like this:

if ( function_exists( 'my_gallery' ) )
    echo my_gallery( '100' ); // gallery of image from post 100 will be shown

And the gallery function looks like this (simplified):

function my_gallery( $post_id = '' ) {
    // whole bunch of stuff in here which is returned
}

The scripts and styles for the gallery would look like this (simplified):

function my_gallery_scripts() {

   wp_register_script( 'my-gallery-js', MY_GALLERY_URL . 'js/my-gallery.js', array( 'jquery' ), '1.0', true );
   wp_register_style( 'my-gallery-css', MY_GALLERY_URL . 'css/my-gallery.css', '', '1.0', 'screen' );

    // need to load these conditionally, but how?
    wp_enqueue_style( 'my-gallery-js' );
    wp_enqueue_script( 'my-gallery-css' );

}
add_action( 'wp_enqueue_scripts', 'my_gallery_scripts' );

I’ve tried using set_query_var inside my_gallery() like this to kind of set a global variable inside $wp_query.

 function my_gallery( $post_id = '' ) {

    set_query_var( 'has_gallery', true );

    // whole bunch of stuff in here which is returned
}

The problem though is that I can’t use get_query_var inside the wp_enqueue_scripts action.

So the following would be ideal for me I believe, loading has_gallery into the $wp_query object which would be available to me on every page (except it doesn’t work).

 function my_gallery_scripts() {

   wp_register_script( 'my-gallery-js', MY_GALLERY_URL . 'js/my-gallery.js', array( 'jquery' ), '1.0', true );
   wp_register_style( 'my-gallery-css', MY_GALLERY_URL . 'css/my-gallery.css', '', '1.0', 'screen' );

    // does not work
    $has_gallery = get_query_var( 'has_gallery' );

    if ( $has_gallery ) {
        wp_enqueue_style( 'my-gallery-js' );
        wp_enqueue_script( 'my-gallery-css' );
    }
}
add_action( 'wp_enqueue_scripts', 'my_gallery_scripts' );

Is there another way to set a global option similar to set_query_var but will work in my scenario? I’d like to obviously avoid the use of a global variable. I’ve also tried setting a constant to no avail.

3 Answers
3

For scripts this is no-brainer – just enqueue inside my_gallery() function and they will be output in footer (since header already passed).

However stylesheets are a challenge, they are only supposed to work in head section and enqueueing for footer is not supported.

Essentially you need to know if function was called before it was called. This has no simple solution for conditions given.

I would probably try to load stylesheet from JS code to achieve this in form you are describing.

Leave a Comment