Question

In WordPress, my goal is to be able to give a custom class to every widget that I put in the sidebar.
Preferably I would like to add this class in the widget settings of each widget. ALSO 3rd party widgets.

I was thinking of changing the classname, because the classname is already passed to the register_sidebar function (%2$s):

<?php
register_sidebar(array('before_widget' => '<aside id="%1$s" class="widget %2$s blue">'));
?>

Ofcourse I shouldn’t change WP core code or 3rd party plugins. This means that I need to write a plugin that will hook into the widget configuration process.

I already found out that it’s possible to modify all widgets forms, by hooking into action ‘in_widget_form’:

<?php
add_action('in_widget_form', 'teaserWidgetAddToForm');

function teaserWidgetAddToForm($widget_instance) {
  ?>
  <label for="<?php echo $widget_instance->get_field_id('teaser-classname'); ?>">Custom classname(s):</label>
  <input type="text" id="<?php echo $widget_instance->get_field_id('teaser-classname'); ?>" name="<?php echo $widget_instance->get_field_name('teaser-classname'); ?>">
  <?php
}
?>

This data should be saved by the Widget super class, but how do you retrieve this data (so when opening the widget settings later shows what you filled in earlier)

And, this saved data should be put in the widget instance -how is this done? I guess by using something like:

<?php
$wp_registered_widgets[<widget_id>]['callback'][0]['widget_options']['classname'] = <chosen_class>;
?>

So basically I have 2 questions:

• Am I using the proper way to address this problem (styling of individual widgets)
• If so, how can I modify a widget instance to save and retrieve additional settings, without having to modify WordPress or 3rd party Plugin source code.

Answer 1

1. By default each widget instance has a unique ID which can be used to style it.

2. In order to save data from fields added in an in_widget_form action, you need to also have a widget_update_callback filter.

   function my_widget_update_callback($instance, $new_instance) {
       $instance['my_classnames'] = $new_instance['my_classnames'];
       return $instance;
   }
   

   To display the saved value in the form you’ll need to first retrieve the instance settings.

   function my_in_widget_form($instance) {
       $settings = $instance->get_settings();
       …
   

   Finally, I think the simplest way to add your custom classes is in a widget_display_callback filter, which runs before a widget is displayed. You have to display the widget yourself because you can only return an instance from this filter, and instances do not control the widget CSS classes.

   function my_widget_display_callback($instance, $widget, $args) {
       if (!isset($instance['my_classnames'])) {
           return $instance;
       }
   
       $widget_classname = $widget->widget_options['classname'];
       $my_classnames = $instance['my_classnames'];
   
       $args['before_widget'] = str_replace($widget_classname, "{$widget_classname} {$my_classnames}", $args['before_widget']);
   
       $widget->widget($args, $instance);
   
       return false;
   }
   

See this article for more info on the available hooks related to widgets: http://shibashake.com/wordpress-theme/wordpress-widget-system