How to add CSS class options to WordPress widgets

The following column WordPress Tutorial will introduce to you how to add CSS options to WordPress gadgets. I hope it will be helpful to friends in need!

WordPress widgets can be reused, and the same widget styles are also the same. If you want to customize a widget style added by the front desk to be different from others, you can find its id by viewing the original code. For example, if you search for a gadget, you will see something like:

<section id="search-2" class="widget widget_search">

where search-2 is the ID of this gadget. You can use #search-2 to define the style. However, the number of this suffix is ​​not fixed. It will be added next time. It may change and you need to edit the previous style again, which is a bit troublesome.

You can use the following code to uniformly add CSS class options to existing gadgets. Just add the code to the current theme function template functions.php. The effect is as shown below:

Code 1

Add only one CSS class option

function zm_widget_form_extend( $instance, $widget ) {
  if ( !isset($instance['classes']) )
$instance['classes'] = null;
$row = "<p>\n";
$row .= "\t<label for=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39;>CSS类</label>\n";
$row .= "\t<input type=&#39;text&#39; name=&#39;widget-{$widget->id_base}[{$widget->number}][classes]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39; class=&#39;widefat&#39; value=&#39;{$instance[&#39;classes&#39;]}&#39;/>\n";
$row .= "</p>\n";
echo $row;
return $instance;
}
add_filter(&#39;widget_form_callback&#39;, &#39;zm_widget_form_extend&#39;, 10, 2);
 
function zm_widget_update( $instance, $new_instance ) {
$instance[&#39;classes&#39;] = $new_instance[&#39;classes&#39;];
return $instance;
}
add_filter( &#39;widget_update_callback&#39;, &#39;zm_widget_update&#39;, 10, 2 );
 
function zm_dynamic_sidebar_params( $params ) {
global $wp_registered_widgets;
$widget_id    = $params[0][&#39;widget_id&#39;];
$widget_obj    = $wp_registered_widgets[$widget_id];
$widget_opt    = get_option($widget_obj[&#39;callback&#39;][0]->option_name);
$widget_num    = $widget_obj[&#39;params&#39;][0][&#39;number&#39;];
 
if ( isset($widget_opt[$widget_num][&#39;classes&#39;]) && !empty($widget_opt[$widget_num][&#39;classes&#39;]) )
$params[0][&#39;before_widget&#39;] = preg_replace( &#39;/class="/&#39;, "class=\"{$widget_opt[$widget_num][&#39;classes&#39;]} ", $params[0][&#39;before_widget&#39;], 1 );
return $params;
}
add_filter( &#39;dynamic_sidebar_params&#39;, &#39;zm_dynamic_sidebar_params&#39; );

Code 2

Add ID and CSS class drop-down options

function zm_widget_form_extend( $instance, $widget ) {
if ( !isset( $instance['classes'] ) )
$instance['classes'] = null;
 
if ( !isset( $instance['custom_id'] ) )
$instance['custom_id'] = null;
 
$class_prefix = 'widget-'; 
$myclass = array(
'default'  => '默认',
'blue'     => '蓝色',
'yellow'   => '黄色',
'black'    => '黑色',
);
 
$row = "<p>\n";
$row .= "\t<label for=&#39;widget-{$widget->id_base}-{$widget->number}-custom_id&#39;>添加ID</label>\n";
$row .= "\t<input type=&#39;text&#39; name=&#39;widget-{$widget->id_base}[{$widget->number}][custom_id]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-custom_id&#39; class=&#39;widefat&#39; value=&#39;{$instance[&#39;custom_id&#39;]}&#39; />\n";
$row .= "\t<label for=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39;>CSS类</label>\n";
$row .= "\t<select name=&#39;widget-{$widget->id_base}[{$widget->number}][classes]&#39; id=&#39;widget-{$widget->id_base}-{$widget->number}-classes&#39; class=&#39;widefat&#39;>";
foreach( $myclass as $key => $class ) {
$selected = null;
if( $class_prefix.$key == $instance[&#39;classes&#39;] ) $selected = &#39;selected = "selected"&#39;;
$row .= "\t<option value=&#39;$class_prefix$key&#39; $selected>$class</value>\n";
}
$row .= "</select>\n";
echo $row;
return $instance;
}
add_filter(&#39;widget_form_callback&#39;, &#39;zm_widget_form_extend&#39;, 10, 2);
 
function zm_widget_update( $instance, $new_instance ) {
$instance[&#39;classes&#39;] = $new_instance[&#39;classes&#39;];
$instance[&#39;custom_id&#39;] = $new_instance[&#39;custom_id&#39;];
return $instance;
}
add_filter( &#39;widget_update_callback&#39;, &#39;zm_widget_update&#39;, 10, 2 );
 
function zm_dynamic_sidebar_params( $params ) {
global $wp_registered_widgets;
$widget_id  = $params[0][&#39;widget_id&#39;];
$widget_obj = $wp_registered_widgets[$widget_id];
$widget_opt = get_option($widget_obj[&#39;callback&#39;][0]->option_name);
$widget_num = $widget_obj[&#39;params&#39;][0][&#39;number&#39;];
 
if ( isset( $widget_opt[$widget_num][&#39;classes&#39;] ) && !empty( $widget_opt[$widget_num][&#39;classes&#39;] ) )
$params[0][&#39;before_widget&#39;] = preg_replace( &#39;/class="/&#39;, "class=\"{$widget_opt[$widget_num][&#39;classes&#39;]} ", $params[0][&#39;before_widget&#39;], 1 );
if ( isset($widget_opt[$widget_num][&#39;custom_id&#39;]) && !empty($widget_opt[$widget_num][&#39;custom_id&#39;]) )
$params[0][&#39;before_widget&#39;] = preg_replace( &#39;/id=".*?"/&#39;, "id=\"{$widget_opt[$widget_num][&#39;custom_id&#39;]}\"", $params[0][&#39;before_widget&#39;], 1 );
return $params;
}
add_filter( &#39;dynamic_sidebar_params&#39;, &#39;zm_dynamic_sidebar_params&#39; );

The CSS class name is preset in the code, which may be more convenient to use.

Disadvantages: The added options are located above other gadget options and need to be improved.

The above is the detailed content of How to add CSS class options to WordPress widgets. For more information, please follow other related articles on the PHP Chinese website!