Last active
September 12, 2017 14:55
-
-
Save Micemade/d6de29e4d81e1c60b3a47791a59e8bea to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * FILTER WIDGETS IN WP ADMIN | |
| * assuming you already enqueued some of your js / css in WP admin ( customAdminCode() ) : | |
| * include (or separately enqueue) this jQuery plugin - https://github.com/cheeaun/jquery.livefilter | |
| * all code (php,js,css) is here, but you should separate it, off course ... ;) | |
| */ | |
| function customAdminCode() { | |
| wp_register_script('my-admin-js', get_template_directory_uri(). '/js/admin/admin.js'); | |
| wp_enqueue_script( 'my-admin-js', get_template_directory_uri(). '/js/admin/admin.js', array('jQuery'), '1.0', true ); | |
| // Localize the script with our data. | |
| $translation_array = array( | |
| 'filter_widgets' => esc_html__( 'Filter widgets','my-theme' ), | |
| ); | |
| wp_localize_script( 'my-admin-js', 'wpi18n_admin', $translation_array ); | |
| } | |
| add_action('admin_head', 'customAdminCode'); | |
| /** | |
| * Then, add this js to your admin js file | |
| */ | |
| ?> | |
| <script type="text/javascript"> | |
| function filterWidgets() { | |
| // Only on widgets admin pages | |
| if( ! $('body').hasClass('widgets-php') ) { | |
| return; | |
| } | |
| // Get available widgets container and element to add input for filtering | |
| var widgets = $('#available-widgets'), | |
| filterHolder = widgets.find('.sidebar-description'); | |
| // Append input to filter widgets | |
| filterHolder.append('<div class="my-widgets-filter"><label for="filter-widgets">'+ wpi18n_admin.filter_widgets +':</label><input type="text" id="filter-widgets" value=""></div>'); | |
| // Start liveFilter plugin | |
| $('#widget-list').liveFilter( | |
| '#filter-widgets', | |
| '.widget', | |
| { | |
| filterChildSelector: '.widget-title h3' | |
| } | |
| ); | |
| } | |
| filterWidgets(); | |
| </script> | |
| <!-- Then add this CSS to your (already enqueued) admin CSS file: --> | |
| <style type="text/css"> | |
| .my-widgets-filter { | |
| display: flex; | |
| flex-direction: row; | |
| padding: 0 0 20px; | |
| align-items: center; | |
| align-content: stretch; | |
| } | |
| .my-widgets-filter label { | |
| flex-grow: 0; | |
| font-weight: 600; | |
| padding-right: 10px; | |
| } | |
| .my-widgets-filter input { | |
| flex-grow: 1; | |
| } | |
| #available-widgets #widget-list { | |
| position: relative; | |
| display: flex; | |
| flex-direction: row; | |
| flex-wrap: wrap; | |
| margin: 0px -5px; | |
| } | |
| @media only screen and (min-width: 1250px) { | |
| #widgets-left #available-widgets .widget { | |
| width: 50%; | |
| padding: 0 5px; | |
| float: left; | |
| } | |
| #available-widgets .widget:nth-child(odd) { | |
| clear: none; | |
| } | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment