Modify WordPress widgets Screen

I’d personally suggest an enqueue, it’s preferable where possible to make use of caching and script compression.

Firstly, the enqueue.

add_action( 'admin_enqueue_scripts', 'add_sidebar_ids_to_widget_admin' );

function add_sidebar_ids_to_widget_admin( $current_page_hook ) {
    if( 'widgets.php' != $current_page_hook )
        return;
    wp_enqueue_script( 'widget-admin-jquery', get_stylesheet_directory_uri() . '/widget-admin-jquery.js', array( 'jquery' ), '1.0', true );
}

I placed the code in a child theme’s functions file, if you’re using it elsewhere you would need to replace get_stylesheet_directory_uri() with something else.

For

• Child themes

  • Use get_stylesheet_directory_uri() . '/yourfile.js'

• Parent themes

  • Use get_template_directory_uri() . '/yourfile.js'

• Plugins

  • Use plugins_url( '/yourfile.js', __FILE__ )

Then some jQuery and JS to add the appropriate IDs to the holders.

jQuery(document).ready(function($){
    $('#widgets-right .widgets-holder-wrap').each(function(){
        var slug = $(this).find('h3');
        $(this).attr('id', slug.text().toLowerCase().replace( /\s/g, '-' ) + 'holder-wrap' );
    });
});

Does pretty much exactly the same as Bainternet’s solution, just approached slightly differently.