How to add widget search into the WordPress Widgets page

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>

Top ↑

#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;
}

Top ↑

#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');
	}
});

Top ↑

#Great! Great!

Or

Also, check below complete code snippet gist:

	<div class="widgets-search">
	<input type="search" id="widgets-search-input" class="regular-text" placeholder="<?php _e('Search widgets…'); ?>">
	</div>

view raw markup.html hosted with ❤ by GitHub

	/* =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;
	}

view raw widgets.css hosted with ❤ by GitHub

	/*
	* 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');
	}
	});

view raw widgets.js hosted with ❤ by GitHub

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