Quick Preview

To add the search follow below steps:
Step 1: Add search input field in WordPress backend Step 1: Add search input field in WordPress backend
- Open file
/wp-admin/widgets.php
- Goto line
429
- Press
enter
key and add below code:
<div class="widgets-search"> <input type="search" id="widgets-search-input" class="regular-text" placeholder="<?php _e('Search widgets...'); ?>"> </div>
Step 2: Add CSS for the input field Step 2: Add CSS for the input field
- Open file
/wp-admin/css/widgets.css
- Goto line
775
- Press
enter
key and add below code:
/* =Widget Search -------------------------------------------------------------- */ #widgets-search-input { margin: 0 0 .2em 0; width: 100%; font-size: 16px; font-weight: 300; line-height: 1.5; border-width: 1px; border-style: solid; border-color: #ddd; } .show-widget { display: block; } .hide-widget { display: none; }
Step 3: Add JS for the search widgets Step 3: Add JS for the search widgets
- Open file
/wp-admin/js/widgets.js
- Goto line
504
- Press
enter
key and add below code:
/* * Use feature detection to determine whether inputs should use * the `keyup` or `input` event. Input is preferred but lacks support * in legacy browsers. See changeset 34078, see also ticket #26600#comment:59 */ if ( 'oninput' in document.createElement( 'input' ) ) { inputEvent = 'input'; } else { inputEvent = 'keyup'; } $( '#widgets-search-input' ).on( inputEvent, function() { var search_term = $('#widgets-search-input').val() || '', parent = $('#widgets-left'), widgets = parent.find('.widget'), widget_titles = parent.find('.widget-title'); if( search_term.length ) { // Hide all widgets. Because, Below we show those widgets // which have search term in the widget title. widgets.addClass('hide-widget').removeClass('show-widget'); // Search widget and ONLY show these widgets which "contain" the widget title. var rex = new RegExp( search_term, 'i'); widget_titles.filter(function () { var widget_name = $.trim( $(this).text() ) || ''; return rex.test( widget_name ); }).parents('.widget').removeClass('hide-widget').addClass('show-widget'); } else { // Show all widgets. widgets.removeClass('hide-widget').addClass('show-widget'); } });
Great! Great!
Or
Also, check below complete code snippet gist:
See how it widget search works in below video:
I have created a patch for the WordPress core. See https://core.trac.wordpress.org/ticket/47540