Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

3 Answers

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 {
       function My_Widget_Class() {
            $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...
}

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.
register_sidebar(array(
          '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>
  <p>WIDGET CONTENT</p>
</aside>
share|improve this answer
add comment
up vote 6 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
add comment

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
1  
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
add comment

Your Answer

 
discard

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.