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.

2 Answers
2

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');
    }

    ...
}

Leave a Reply

Your email address will not be published. Required fields are marked *