changing wp-admin/widgets.php

Question

We want to design the widgets page in the admin panel a little differently, mainly in order to help the site administrator understand where each widget will appear in the site:

For that, we need to change the HTML that widgets.php renders (simply changing the css isn't enough). How would we go about doing that without touching the core?

Answer 1

If you upgrade your WordPress to 3.3.1, which you absolutely should, each widget area in the admin now has an ID you can use to target via CSS, which really should be enough. See http://core.trac.wordpress.org/ticket/18334 for an example.

Answer 2

I cannot get the question out of my head, but I don’t have the time for a complete solution. So I just write down my idea here, then I'll set a small bounty.

• There is an action 'widgets_admin_page' in wp-admin/widgets.php above the other content. You could place a preview box here.
  Sample code:

  add_action( 'widgets_admin_page', 'show_widget_preview' );
  function show_widget_preview()
  {
      $preview_widgets = $GLOBALS['wp_registered_sidebars'];
      unset ( $preview_widgets['wp_inactive_widgets'] );
  
      print '<div style="border:2px solid #ddf;padding:20px">'
      . '<pre>' . htmlspecialchars( print_r( $preview_widgets, TRUE ) ) . '</pre>'
      . '</div>';
  }
  

  This prints out an array of all registered sidebars. You have to walk through all sidebars to find the registered widgets.

• To make the preview useful you need two files: a HTML template and a style sheet.
  I would use add_theme_support().
  Sample code for the theme’s functions.php:

  add_theme_support( 
      'widget_preview', 
      array ( 
          'template'   => get_stylesheet_directory() . '/widget-preview.php', 
          'stylesheet' => get_stylesheet_directory() . '/widget-preview.css' 
      ) 
  );
  

• In show_widget_preview() you enqueue the style sheet and load the template. Render the registered sidebars in the predefined placeholders in widget-preview.php.

• Update the template per AJAX after the user pressed the Save button in a widget.

• Challenges: Take accessibility mode into account, small windows and CSS conflicts. Show a useful message when no sidebar is registered (sidebar descriptions?). What should happen when a user tries to drag a widget into the preview box? :)

Answer 3

the short answer is you can't, not without touching core.

however, you can set the description of each widget area (the text underneath the widget area title) in the register_sidebar function.