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

  • Open file /wp-admin/widgets.php
  • Goto line 429
  • Press enter key and add below code:
<div class="widgets-search"&gt;
	<input type="search" id="widgets-search-input" class="regular-text" placeholder="<?php _e('Search widgets...'); ?&gt;"&gt;
</div&gt;

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

  • 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!

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

Author: Mahesh Waghmare

I'm a professional WordPress theme/plugin developer since 2012 from Pune, India.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.