Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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

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?

share|improve this question
    
Where would the panel to drag widgets from be placed with the above approach? –  sanchothefat Mar 5 '12 at 16:12
    
@sanchothefat underneath –  Lea Cohen Mar 6 '12 at 6:06
    
Why not go-ahead and submit a patch to core. Seems like a worthwhile improvement... Then, when registering a sidebar, an added param would be to specify a location. If none specified, it assumes it's structured like it is now (on the right) –  Taylor Dewey Mar 10 '12 at 0:32
add comment

3 Answers

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

share|improve this answer
    
thanks for thinking about it, @toscho! I'm currently working on other projects, but will have to get back to this one, and I'll check out your solution and let you know. Thanks again! –  Lea Cohen Mar 5 '12 at 10:50
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.