Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Add option to all widget settings WordPress

  • SOLVED

<strong>Hi</strong>

I want to add an option to all widgets where you can specify a unik background color for each widget (and save the value).

This is what I've got. In my child theme functions.php I've added the CSS class <em>color%1$s</em> so each widget has a unik class. Like this:

...'before_widget' => '<aside id="%1$s" class="widget clearfix color%1$s">',...

I've been looking at this [[LINK href="http://stackoverflow.com/questions/12351603/wordpress-add-config-option-to-all-widget-settings"]]http://stackoverflow.com/questions/12351603/wordpress-add-config-option-to-all-widget-settings[[/LINK]] , but I don't understand it.

What do I need to write in my functions.php to make this work? Can anyone help?

<strong>//MadsRH</strong>

Answers (4)

2013-09-24

Expert answers:

Install this plugin and apply css accordingly. It will add the classes added in the widget section for each widget.


Expert comments:

This is the plugin code.

<?php
/*
Plugin Name: Colored Widgets
Plugin URI: http://www.subharanjan.in/
Description: Lets you add a custom colors class to each widgets
Version: 0.1
Author: Subharanjan
Author URI: http://www.subharanjan.in/
License: GPLv2
*/
global $wc_options;
if ( ( !$wc_options = get_option( 'widget_color' ) ) || !is_array( $wc_options ) )
$wc_options = array();
if ( is_admin() ) {
add_action( 'sidebar_admin_setup', 'widget_color_expand_control' );
add_filter( 'widget_update_callback', 'widget_color_widget_update_callback', 10, 3 );
} else {
add_filter( 'dynamic_sidebar_params', 'widget_color_widget_display_callback', 10 );
}
function widget_color_expand_control() {
global $wp_registered_widgets, $wp_registered_widget_controls, $wc_options;
if ( 'post' == strtolower( $_SERVER['REQUEST_METHOD'] ) ) {
foreach ( (array) $_POST['widget-id'] as $widget_number => $widget_id ) {
if ( isset( $_POST[$widget_id . '-widget_color'] ) )
$wc_options[$widget_id] = $_POST[$widget_id . '-widget_color'];
}
$regd_plus_new = array_merge( array_keys( $wp_registered_widgets ), array_values( (array) $_POST['widget-id'] ), array( 'widget_color-options-filter', 'widget_color-options-wp_reset_query' ) );
foreach ( array_keys( $wc_options ) as $key ) {
if ( !in_array( $key, $regd_plus_new ) )
unset( $wc_options[$key] );
}
}
if ( isset( $_POST['widget_color-options-submit'] ) ) {
$wc_options['widget_color-options-filter'] = $_POST['widget_color-options-filter'];
$wc_options['widget_color-options-wp_reset_query'] = $_POST['widget_color-options-wp_reset_query'];
}
update_option( 'widget_color', $wc_options );
foreach ( $wp_registered_widgets as $id => $widget ) {
if ( !$wp_registered_widget_controls[$id] )
wp_register_widget_control( $id, $widget['name'], 'widget_color_empty_control' );
$wp_registered_widget_controls[$id]['callback_wc_redirect'] = $wp_registered_widget_controls[$id]['callback'];
$wp_registered_widget_controls[$id]['callback'] = 'widget_color_extra_control';
array_push( $wp_registered_widget_controls[$id]['params'], $id );
}
}
function widget_color_empty_control() {
}
function widget_color_extra_control() {
global $wp_registered_widget_controls, $wc_options;
$params = func_get_args();
$id = array_pop( $params );
$callback = $wp_registered_widget_controls[$id]['callback_wc_redirect'];
if ( is_callable( $callback ) )
call_user_func_array( $callback, $params );
$value = !empty( $wc_options[$id] ) ? htmlspecialchars( stripslashes( $wc_options[$id] ), ENT_QUOTES ) : '';
$number = $params[0]['number'];
if ( $number == -1 ) {
$number = "%i%";
$value = "";
}
$id_disp = $id;
if ( isset( $number ) )
$id_disp = $wp_registered_widget_controls[$id]['id_base'] . '-' . $number;
echo "<p><label for='" . $id_disp . "-widget_color'>Widget color <input type='text' name='" . $id_disp . "-widget_color' id='" . $id_disp . "-widget_color' value='" . $value . "' /></label></p>";
}
function widget_color_widget_update_callback( $instance, $new_instance, $this_widget ) {
global $wc_options;
$widget_id = $this_widget->id;
if ( isset( $_POST[$widget_id . '-widget_color'] ) ) {
$wc_options[$widget_id] = $_POST[$widget_id . '-widget_color'];
update_option( 'widget_color', $wc_options );
}
return $instance;
}
function widget_color_widget_display_callback( $params ) {
global $wp_registered_widgets;
$id = $params[0]['widget_id'];
$wc_options = maybe_unserialize( get_option( 'widget_color' ) );
if ( is_array( $wc_options ) && array_key_exists( $id, $wc_options ) ) {
$option_val = $wc_options[$id];
}
if ( !empty( $option_val ) ) {
$classe_to_add = 'colured_widget ' . $option_val . ' ';
$classe_to_add = 'class=" ' . $classe_to_add;
$params[0]['before_widget'] = str_replace( 'class="', $classe_to_add, $params[0]['before_widget'] );
}
return $params;
}


Mads R.H. comments:

Subharanjan Mantri -> This looks really great, but it isn't working :(

It seems that the value is entered as a class.

<aside id="search-2" class=" colured_widget #efefef widget clearfix colorsearch-2">


Expert comments:

Can you replace these lines inside the code:

Before:
if ( !empty( $option_val ) ) {
$classe_to_add = 'colured_widget ' . $option_val . ' ';
$classe_to_add = 'class=" ' . $classe_to_add;
$params[0]['before_widget'] = str_replace( 'class="', $classe_to_add, $params[0]['before_widget'] );
}


After: (modified to have color as background)
if ( !empty( $option_val ) ) {
$classe_to_add = 'colured_widget ';
$classe_to_add = ' style="background-color:'. $option_val .' !important;" class=" ' . $classe_to_add;
$params[0]['before_widget'] = str_replace( 'class="', $classe_to_add, $params[0]['before_widget'] );
}


Expert comments:

Assuming that color will be inserted along with "#" (hash) like:
#2F2F2F in the backend


Mads R.H. comments:

Perfect! I can enter both hex and color names. Just what I was looking for :D The only thing I'm missing is some comments in the plugin code ;)

Thanks!!!

2013-09-23

Arnav Joy answers:

check this code if it adds a new field to every widget?

<?php

<?php
add_action('in_widget_form', 'teaserWidgetAddToForm');

function teaserWidgetAddToForm($widget_instance) {
?>
<label for="<?php echo $widget_instance->get_field_id('teaser-classname'); ?>">Custom Background:</label>
<input type="text" id="<?php echo $widget_instance->get_field_id('custom-bg'); ?>" name="<?php echo $widget_instance->get_field_name('custom-bg'); ?>">
<?php
}
?>


Mads R.H. comments:

Arnav -> It does :)


Mads R.H. comments:

Arnav -> It doesn't save the entered text

2013-09-23

Sébastien | French WordpressDesigner answers:

each widget already has a unique id. What else ? No need to add a class to do that.


Sébastien | French WordpressDesigner comments:

add in functions.php



add_filter('dynamic_sidebar_params', 'add_classes_to__widget');
function add_classes_to__widget($params){

global $widget_num;
$params[0]['before_widget'] = str_replace('class="','class="color-'.$params[0]['id'].' ',$params[0]['before_widget']);

return $params;
}


Sébastien | French WordpressDesigner comments:

sorry it's $params[0]['widget_id'], no $params[0]['id']
so the code is :

add_filter('dynamic_sidebar_params', 'add_classes_to__widget');
function add_classes_to__widget($params){

global $widget_num;
$params[0]['before_widget'] = str_replace('class="','class="color-'.$params[0]['widget_id'].' ',$params[0]['before_widget']);

return $params;
}


Sébastien | French WordpressDesigner comments:

with this code, if a widget started like that :
<aside id="archives-2" class="widget widget_archive">

now it becomes :
<aside id="archives-2" class="color-archives-2 widget widget_archive">


Sébastien | French WordpressDesigner comments:

have you tried my code? it does exactly what you want.

2013-09-25

Balanean Corneliu answers:

I think this is what you looking for http://wordpress.org/plugins/widget-css-classes/


Balanean Corneliu comments:

I think this is what you looking for wordpress.org/plugins/widget-css-classes/


Balanean Corneliu comments:

After you have isntaled the plugin its easy to add color from css to every class

Ex:
.test1-widget h3 {
background: #349734;
color: #fff;
}


Mads R.H. comments:

This might also do the trick, but I already have Subharanjan's plugin running ;)