2

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.

0

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

    ...
}
  • Thanks for your answer. However it doesn't seem to have worked. The div in the plugin is still not getting the height or width and there is no organiserStyle in the style editor when inspecting the page – SelketDaly Oct 2 '16 at 14:25
0

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.

  • You do realise that by calling this within the widget, you are only enqueueing your styles after WP has output the enqueued style sheets? – Andy Macaulay-Brook Oct 2 '16 at 16:05
  • I've updated as best I can with the info from your question. – Andy Macaulay-Brook Oct 2 '16 at 16:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.