How can I enqueue a style only when a particular widget is active?

Question

I have a plugin which requires a style sheet for the widget. I am trying to register the stylesheet when the widget is created, however the style sheet is not being queued and the styles ignored. The code I am using follows, with commented lines demonstrating some other options I have tried:

organiser.php

class Organiser extends WP_Widget {
    ...

    public function widget( $args, $instance ) {
        add_action( 'wp_enqueue_scripts', array('Organiser', 'register_plugin_styles') );
        include(dirname(__FILE__)."/organiserWidget.php");
    }

    function register_plugin_styles() {
        wp_register_style( 'organiserStyle', plugins_url( 'organiser/css/organiserStyle.css' ) );
        wp_enqueue_style( 'organiserStyle' );

       // wp_register_style( 'organiserStyle', plugin_dir_url( __FILE__ ) . 'css/organiserStyle.css' );
       // wp_enqueue_style( 'organiserStyle', plugin_dir_url( __FILE__ ) . 'css/organiserStyle.css');
    }

    ....
}

organiserWidget.php

<div id="organiser">
</div>

css/organiserStyle.css

@import "mobile-layout.css";

css/mobile-layout.css

@media screen and (max-width: 420px) {
    div#organiser {
        width: 100%;
        height: 240px;
    }
}

As far as I can see, this is following what the documentation recommends and I so far haven't been able to find anything to suggest that I am doing something wrong.

Answer 1

You need to modify this a little bit.

class Organiser extends WP_Widget {
    ...

    function __construct() {
        add_action( 'wp_enqueue_scripts', array('Organiser', 'register_plugin_styles') );
        ...
    }

    public function widget( $args, $instance ) {
        wp_enqueue_style( 'organiserStyle' );
        include(dirname(__FILE__)."/organiserWidget.php");
    }

    static function register_plugin_styles() {
        wp_register_style( 'organiserStyle', plugins_url( 'organiser/css/organiserStyle.css' ) );

        // wp_register_style( 'organiserStyle', plugin_dir_url( __FILE__ ) . 'css/organiserStyle.css' );
        // wp_enqueue_style( 'organiserStyle', plugin_dir_url( __FILE__ ) . 'css/organiserStyle.css');
    }

    ...
}

Answer 2

I haven't had a chance to test this, but I think you're addressing your object wrongly when you try to attach the register_plugin_styles function.

Instead of using the class name Organiser you need a reference to the object instance. Try this instead:

add_action( 'wp_enqueue_scripts', array( $this, 'register_plugin_styles') );

Additionally, by calling this within the widget, you are only enqueueing your styles after WP has output the enqueued style sheets.

WP gives us a function is_active_widget to check that is useful here. Take your enqueueing out of the widget and attach it to another hook like init. Use a conditional like this within your hooked function:

if ( is_active_widget( 'your_widget_function_name' ) ) {
    add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
}

Now since I can't see the full details of your Class, I can't advise on how you might get it working successfully within there, or advise on what to substitute for your_widget_function_name.