Custom Class per Widget on WordPress | Web Development Services by Ed Nailor

Adding Custom CSS Classes to WordPress Widgets

Print Friendly

I have worked on a number of designs that call for different styles being applied to sidebar areas. For example, let’s say the color pallet for a website includes a red, white and blue Americana design. The designer may have decided that the sidebar should have blue widget areas and red widget areas.

Traditionally, you have had to either know the widget id and add a specific class to that, or even just leave the colors all the same. But what if the design calls for the ability to add a red one in between the blue ones, and that it could be any type of widget? If you know ahead of time what that widget will be, you can add a class to your css to target, for example .text-widget-12 would hit the widget with this class assigned by WordPress. But what do you do if you don’t know what the client may want to add and when they may want to make that color red instead of blue?

Enter this great script!

Add the following code to your functions.php file and you will get the option to add custom css classes to your widgets. Add some predetermined classes to your css and the user can pick and choose which they want to do!

Custom CSS Classes for WordPress Widgets

Place code AFTER you have registered your sidebars.


function kc_widget_form_extend( $instance, $widget ) {
if ( !isset($instance['classes']) )
$instance['classes'] = null;


Option 1

Add Predetermined Classes for the User to Choose from:


/* Set your predetermied class choices here */
$myarray = "class1,class2,class3";

$myclasses = explode(",",$myarray);
$row = "<p>\n";
$row .= "\t<label for='widget-{$widget->id_base}-{$widget->number}-classes'>Class:</label>\n";
$row .= "\t<select name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat'>\n";
foreach($myclasses as $myclass) {
$instance_selected = null; if($instance['classes']==$myclass) $instance_selected = " selected='selected'";
$row .= "\t<option value='".$myclass."'".$instance_selected.">".$myclass."</option>\n";
$row .= "</select>\n";


Option 2

Allow the user to assign their own classes:


/* Allows User to Add Custom CSS Classes */
$row .= "\t<input type='text' name='widget-{$widget->id_base}[{$widget->number}][classes]' id='widget-{$widget->id_base}-{$widget->number}-classes' class='widefat' value='{$instance['classes']}'/>\n";
$row .= "</p>\n";


Finalize Code

Now, close the code out from here:


echo $row;
return $instance;
add_filter('widget_form_callback', 'kc_widget_form_extend', 10, 2);function kc_widget_update( $instance, $new_instance ) {
$instance['classes'] = $new_instance['classes'];
return $instance;
add_filter( 'widget_update_callback', 'kc_widget_update', 10, 2 );
function kc_dynamic_sidebar_params( $params ) {
global $wp_registered_widgets;
$widget_id    = $params[0]['widget_id'];
$widget_obj    = $wp_registered_widgets[$widget_id];
$widget_opt    = get_option($widget_obj['callback'][0]->option_name);
$widget_num    = $widget_obj['params'][0]['number'];

if ( isset($widget_opt[$widget_num]['classes']) && !empty($widget_opt[$widget_num]['classes']) )
$params[0]['before_widget'] = preg_replace( '/class="/', "class=\"{$widget_opt[$widget_num]['classes']} ", $params[0]['before_widget'], 1 );

return $params;
add_filter( 'dynamic_sidebar_params', 'kc_dynamic_sidebar_params' );


Credit: This is a modified version of the code found at The modification was to allow the programmer to pre-populate the css classes the designer added to the design.

Comments are closed.