changing wp-admin/widgets.php

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:

enter image description here

Read More

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?

Related posts

Leave a Reply

3 comments

  1. 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? 🙂

  2. 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.