The question:
I have multiple “sidebars”, but not all of them are the same size. Not all widgets fit in all sidebars (for example, I have a “footer sidebar” where the client can place custom widgets, but they are wide, and don’t fit at all in the “real” sidebar). I want to give an indication when a widget is placed in a sidebar where it would not belong (change the header text color, for example). What would be the best way to do this?
The Solutions:
Below are the methods you can try. The first solution is probably the best. Try others if the first one doesn’t work. Senior developers aren’t just copying/pasting – they read the methods carefully & apply them wisely to each case.
Method 1
There is a widget_display_callback hook, which you can use to override the widget based on the sidebar and the widget (return false when inappropriate):
http://core.trac.wordpress.org/browser/trunk/wp-includes/widgets.php?rev=15590#L180
Method 2
I solved it using some CSS, similar to my trick to highlight my own widgets. The sidebar drop areas are div
‘s with the class widgets-sortable
and they have the id
of your sidebar. Your widgets are div
‘s with class widget
, and and id
of the form widget-[global_counter]_[widget_key]-[widget_id]
. You can combine these to highlight correct or wrong combinations.
For example, I have a sidebar called footer
that should only contain wide widgets. These widgets are recognizable because their ID includes -wide-
. I want these in green, and all other ones in red with a strike through.
add_action('admin_print_styles-widgets.php', 'print_widget_hint_style');
function print_widget_hint_style()
{
echo <<<EOF
<style type="text/css">
/* Less specific rule for all widgets */
div.widgets-sortables[id*=-footer] div.widget .widget-title
{
color: red;
text-decoration: line-through;
}
/* More specific rule for correct widgets */
div.widgets-sortables[id*=-footer] div.widget[id*=-wide-] .widget-title
{
color: green;
}
</style>
EOF;
}
Method 3
I’d probably define my own widget areas that get whatever widgets are put into it in the admin area, and only put that widget area in a specific location in the theme.
All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0