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?


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):


  • But this only hides the sidebar when you display it on the front side? Or does it also affect the admin area? – Jan Fabry Nov 2 '10 at 14:04
  • 1
    It hides it on the front side only. You can then use it to conditionally echo something like "Sorry, wrong sidebar. Please place this widget somewhere else." and then return false to bail. There isn't any hook to do the same in the admin area. I tried to talk Andrew into committing similar functionality for the widgets screen, but he was adamant that I ought to be using CSS and JS to manipulate the DOM instead. (I needed this stuff for my widget contexts plugin, which are irrelevant in some sidebars.) – Denis de Bernardy Nov 2 '10 at 14:20

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;

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.

  • I do that, and I have widget areas called "footer" and "sidebar" that I use in the specific location in the templates. But the footer is much wider than the sidebar, so widgets made for the footer don't fit in the sidebar. That's why I would like an indication when you drop a "wide" widget in a "small" widget area. Or is there something I'm missing in your answer? – Jan Fabry Oct 19 '10 at 6:24
  • Nope, didn't miss anything. My next suggestion, although it'd take a bit more work, is to create your own widgets to use in your specific spot. All the predefined ones are going to be in the core files. That way you can control their width and whatnot. – tw2113 Oct 19 '10 at 14:09

Your Answer

