WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I currently developing wordpress widget for my website. This widget will pull user latest post in my website and show in their blog.

In the widget there is option for user to use their css or my css for the widget

I use this code in my widget and its work perfectly but this code will always load the css.

add_action( 'widgets_init', 'load_my_widgets' );

function load_my_widgets() {
    register_widget( 'My_Widget' );
    wp_register_style( 'my_widget_css', 'http://mydomain.com/css/my-widget.css' );
    wp_enqueue_style( 'my_widget_css' );

The problem is how can I enable the CSS based on the user option? I try something like this but its not working

function widget( $args, $instance ) {
    $own_css = isset( $instance['own_css'] ) ? true : false;

    if ( ! $own_css ) {
        wp_enqueue_style( 'my_widget_css' );
share|improve this question
up vote 1 down vote accepted

This is sort of sloppy as the style will still be enqueued regardless.

In the code to display your widget, change the CSS selectors based on whether or not the user selected own style:

$prefix = $instance['own_style'] ? 'ownstyle_' : 'pluginstyle_';

<div id="<?php echo $prefix; ?>selector"> ...</div> etc

A user would be able to use both a widget with custom style and one with default style this way. Enqueue your style separately in its own function.

add_action( 'wp_print_scripts', 'wpse26241_enqueue' );
function wpse26241_enqueue()
    if( is_admin() ) return;
    if( is_active_widget( 'My_Widget' ) )
         wp_enqueue_style( 'my_style' );
share|improve this answer
this code surely work but the CSS will be load regardless of the user option – skycrew Aug 19 '11 at 3:19
Correct. As I said: sloppy. It's an interesting question, however. Makes you wonder why it's not easier to do. – chrisguitarguy Aug 19 '11 at 3:38
anyway thanks for the idea :) need additional research or maybe need to log in trac? – skycrew Aug 19 '11 at 4:37

finally I manage to load the CSS based on user option.

How To: extend my widget class to WP_Widget

in my widget constructor I just call the code below and I can get the user option.

$settings = $this->get_settings();

Based on the user option, I can use wp_enqueue_style.

share|improve this answer
That's awesome. Thanks! – chrisguitarguy Aug 22 '11 at 14:43

You need to pull the option out of the Widget and make it a Plugin option.

For example, if your register_setting() option array name is plugin_myplugin_options (where "myplugin" is your Plugin slug), you could add a Boolean option, use_plugin_css, that if true will use the Plugin's CSS, and if false will use the user's CSS.

Thus, change your widgets_init callback to something like this:

function load_my_widgets() {
    register_widget( 'My_Widget' );
    $myplugin_options = get_option( 'plugin_myplugin_options' );
    if ( $myplugin_options['use_plugin_css'] ) {
        wp_register_style( 'my_widget_css', 'http://mydomain.com/css/my-widget.css' );
        wp_enqueue_style( 'my_widget_css' );

p.s. if this is a publicly released Plugin, you need to namespace all of your function calls. e.g. change function load_my_widgets() {} to function myplugin_load_widgets() {}, where "myplugin" is your Plugin slug. The same goes for registering a custom style or script; change my_widget_css to myplugin_css, where "myplugin" is your Plugin slug.

share|improve this answer
Widget options are stored in the wp_options table, correct? I'm guessing we can't really grab widget options because WordPress likely names them differently for each install. Is there some function related to grabbing widget options that can be used outside the widget class? Seems like that would be a handy thing for situations like this: a quick function that found all the active widgets of a given class and returned an array of their options. – chrisguitarguy Aug 18 '11 at 13:23
As far as I can tell, the option needs to be global. What happens if multiple instances of the same Widget are called on the same page, one of which specifies using the Plugin CSS, and the other of which specifies using custom CSS? – Chip Bennett Aug 18 '11 at 13:27
You would just need to make sure to change the css selectors of each, which gives me an idea (to be posted in an answer below). – chrisguitarguy Aug 18 '11 at 13:30
You can certainly go that route for options that are local to each Widget instance; however, you're going to run into problems when attempting to call wp_enqueue_style() (which enqueues a stylesheet in the document head rather than in the local Widget instance), based on a Widget-instance setting. – Chip Bennett Aug 18 '11 at 13:36
is it possible to add option in the wp_options table and store the checkbox value? so I can grab the option like @Chip Bennett code above – skycrew Aug 19 '11 at 3:14

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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