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 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

share|improve this question
up vote 11 down vote accepted

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 ) {
    $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

share|improve this answer
nice work - helped me out with a widget issue - thanks :) – Q Studio Oct 21 '12 at 19:52
Excellent work here... – Devin Walker Sep 20 '13 at 4:23

you can use dynamic_sidebar_params filter hook to find your widget and add your classes to it:

add_filter('dynamic_sidebar_params', 'add_classes_to__widget'); 
function add_classes_to__widget($params){
    if ($params[0]['widget_id'] == "my-widget-1"){ //make sure its your widget id here
        // its your widget so you add  your classes
        $classe_to_add = 'col480 whatever bla bla '; // make sure you leave a space at the end
        $classe_to_add = 'class=" '.$classe_to_add;
        $params[0]['before_widget'] = str_replace('class="',$classe_to_add,$params[0]['before_widget']);
    return $params;
share|improve this answer
thanks for the reply. I will have lots of instances of my custom widget each of them with their own specific width. That's why I wanted to add extra class within the widget code itself, rather than via filter. Hope that makes sense? – dashaluna Jun 1 '11 at 13:37
well instance options are saved in the option table so you can get it from there once you know the widget id using get_option('widget-name') – Bainternet Jun 1 '11 at 16:14
thanks a lot for your help! I'm sorry I don't really understand your solution :( And I wanted all the code to be within my custom widget file, while I can easily access the width variable. I ended up hacking the $before_widget string. Your answer got me on the right track discovering that $before_widget is a string. Thanks again :) – dashaluna Jun 2 '11 at 15:32

Another way I found to add a class for a custom widget is to use the the 'classname' key of your construct function like in:

class My_Widget_Class extends WP_Widget {
// Prior PHP5 use the children class name for the constructor…
// function My_Widget_Class()
       function __construct() {
            $widget_ops = array(
                'classname' => 'my-class-name',
                'description' => __("Widget for the sake of Mankind",'themedomain'),
            $control_ops = array(
                'id_base' => 'my-widget-class-widget'
   //some more code after...

   // Call parent constructor you may substitute the 1st argument by $control_ops['id_base'] and remove the 4th.

And be sure to use default 'before_widget' in your theme or if you use register_sidebar() in function.php, do it like this:

//This is just an example.
          'name'=> 'Sidebar',
            'id' => 'sidebar-default',
            'class' => '',//I never found where this is used...
            'description' => 'A sidebar for Mankind',
            'before_widget' => '<aside id="%1$s" class="widget %2$s">',//This is the important code!!
            'after_widget' => '</aside>',
            'before_title' => '<h3>',
            'after_title' => '</h3>',

Then on every instances of your widget, you will have the class 'widget my-class-name' like this:

<aside class="widget my-class-name" id="my-widget-class-widget-N"><!-- where N is a number -->
  <h3>WIDGET TITLE</h3>

You may also call the parent constructor first and then append whatever class name you want :

class My_Widget_Class extends WP_Widget {
    // Better defining the parent argument list …
    function __construct($id_base, $name, $widget_options = array(), $control_options = array())
    {    parent::__construct($id_base, $name, $widget_options, $control_options);
         // Change the class name after
         $this->widget_options['classname'].= ' some-extra';
share|improve this answer

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.