Add class to before_widget from within a custom widget

by

I have a simple custom widget that asks for its width (that is used later in the front end). The width field is a select dropdown, so a user have predefined options.

I will have many instances of my widget, each will have its own width setup.

Now, in my widget code I have the following code:

echo $before_widget;

which results in:

<div class="widget my" id="my-widget-1"></div>

What I’d like to do is somehow hook into $before_widget and add my own class (the specified width from the select dropdown). So, I want the following markup:

<div class="widget my col480" id="my-widget-3"></div>

And if there is no class specified then I want to add class="col480".

How do I achieve this?

Thanks for help!
Dasha

5 s
5

Aha, so the $before_widget variable is a string representing div element: <div class="widget my" id="my-widget-1"> . So I checked the $before_widget for the “class” sub-string and added my $widget_width value to it.

The code is from my custom widget file:

function widget( $args, $instance ) {
  extract( $args );
  ... //other code

  $widget_width = !empty($instance['widget_width']) ? $instance['widget_width'] : "col300";
  /* Add the width from $widget_width to the class from the $before widget */
  // no 'class' attribute - add one with the value of width
  if( strpos($before_widget, 'class') === false ) {
    // include closing tag in replace string
    $before_widget = str_replace('>', 'class="'. $widget_width . '">', $before_widget);
  }
  // there is 'class' attribute - append width value to it
  else {
    $before_widget = str_replace('class="', 'class="'. $widget_width . ' ', $before_widget);
  }
  /* Before widget */
  echo $before_widget;

  ... //other code
}

I wanted to add my $widget_width variable to the widget div element within my own widget code (while I had an easy access to the $widget_width variable).

Hope that makes sense and will help someone.

Thanks, Dasha

Leave a Comment