Last active
December 4, 2017 19:37
-
-
Save aristath/9366f6513ae3a9d66e2926cc0d50609b to your computer and use it in GitHub Desktop.
Customizer search with fuzzy-search from fuse.io. Created as a reply to https://wordpress.stackexchange.com/questions/287572/manipulating-customizer-panels-and-fields?noredirect=1#comment425917_287572
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 | |
/** | |
* A search section. | |
* | |
* @package Customizer Search | |
* @subpackage Core | |
* @copyright Copyright (c) 2017, Aristeides Stathopoulos | |
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT | |
* @since 1.0.0 | |
*/ | |
/** | |
* Expanded Section for search. | |
*/ | |
class Customizer_Search_Section extends WP_Customize_Section { | |
/** | |
* The section type. | |
* | |
* @access public | |
* @var string | |
*/ | |
public $type = 'customizer-search-section'; | |
} |
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 | |
/** | |
* Plugin Name: Customizer Search | |
* Plugin URI: https://aristath.github.io | |
* Description: Adds search capability for customizer controls. | |
* Author: Aristeides Stathopoulos | |
* Author URI: https://aristath.github.io | |
* Version: 1.0.0 | |
* Text Domain: customizer-search | |
* | |
* GitHub Plugin URI: aristath/customizer-search | |
* GitHub Plugin URI: https://github.com/aristath/customizer-search | |
* | |
* @package Customizer Search | |
* @category Core | |
* @author Aristeides Stathopoulos | |
* @copyright Copyright (c) 2017, Aristeides Stathopoulos | |
* @license http://opensource.org/licenses/https://opensource.org/licenses/MIT | |
* @since 1.0.0 | |
*/ | |
// Exit if accessed directly. | |
if ( ! defined( 'ABSPATH' ) ) { | |
exit; | |
} | |
if ( ! defined( 'CUSTOMIZER_SEARCH_PATH' ) ) { | |
define( 'CUSTOMIZER_SEARCH_PATH', dirname( __FILE__ ) ); | |
} | |
if ( ! defined( 'CUSTOMIZER_SEARCH_URL' ) ) { | |
define( 'CUSTOMIZER_SEARCH_URL', plugin_dir_url( __FILE__ ) ); | |
} | |
/** | |
* Add the section. | |
* | |
* @since 1.0.0 | |
*/ | |
function customizer_search_add_section( $wp_customize ) { | |
// Include the section class. | |
include_once wp_normalize_path( CUSTOMIZER_SEARCH_PATH . '/inc/class-customizer-search-section.php' ); | |
// Add section. | |
$wp_customize->add_section( new Customizer_Search_Section( $wp_customize, 'customizer_search_section', array( | |
'title' => esc_attr__( 'Search', 'customizer-search' ), | |
'priority' => 1, | |
) ) ); | |
// Add setting & control. | |
// These are simply dummies because a section without controls is not displayed. | |
$wp_customize->add_setting( 'customizer_search', array( | |
'type' => 'theme_mod', | |
'capability' => 'edit_theme_options', | |
'default' => '', | |
'transport' => 'postMessage', | |
'sanitize_callback' => '__return_empty_string', | |
) ); | |
$wp_customize->add_control( 'customizer_search', array( | |
'label' => esc_attr__( 'Search Controls', 'kirki' ), | |
'type' => 'text', | |
'section' => 'customizer_search_section', | |
) ); | |
} | |
add_action( 'customize_register', 'customizer_search_add_section' ); | |
/** | |
* Print scripts in kirkicustomize_controls_enqueue_scripts. | |
* | |
* @since 1.0.0 | |
*/ | |
function customizer_seach_kirkicustomize_controls_enqueue_scripts() { | |
wp_enqueue_script( 'fuse', plugin_dir_url( __FILE__ ) . 'assets/js/fuse/fuse.min.js', array( 'jquery' ) ); | |
wp_enqueue_script( 'customizer-search', plugin_dir_url( __FILE__ ) . 'assets/js/script.js', array( 'jquery', 'fuse' ) ); | |
wp_enqueue_style( 'customizer-search', plugin_dir_url( __FILE__ ) . 'assets/css/styles.css' ); | |
} | |
add_action( 'customize_controls_enqueue_scripts', 'customizer_seach_kirkicustomize_controls_enqueue_scripts', 9999999999 ); |
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
/* global Fuse */ | |
var customizeSearch = { | |
/** | |
* All the controls with labels & descriptions. | |
* | |
* @since 1.0.0 | |
*/ | |
controls: [], | |
/** | |
* Go through all controls and populate this.controls. | |
* | |
* @since 1.0.0 | |
*/ | |
controlsInit: function() { | |
var self = this; | |
wp.customize.control.each( function( control ) { | |
if ( control.id ) { | |
self.controls.push( { | |
label: control.params.label || '', | |
description: control.params.description || '', | |
id: control.id | |
} ); | |
} | |
} ); | |
}, | |
initSearch: function() { | |
var self = this, | |
input = jQuery( '#customize-control-customizer_search input' ), | |
wrapHTML = '<div class="customizer-search-results"></div>', | |
options = { | |
shouldSort: true, | |
tokenize: true, | |
findAllMatches: true, | |
threshold: 0.4, | |
location: 0, | |
distance: 100, | |
maxPatternLength: 32, | |
minMatchCharLength: 1, | |
keys: ['title', 'description'] | |
}, | |
fuseInit = false, | |
searchVal; | |
input.on( 'change paste keyup', function() { | |
if ( ! fuseInit ) { | |
fuseInit = new Fuse( self.controls, options ); | |
} | |
searchVal = jQuery( this ).val(); | |
if ( 1 > jQuery( '#customize-control-customizer_search .customizer-search-results' ).length ) { | |
jQuery( '#customize-control-customizer_search' ).append( wrapHTML ); | |
} | |
// Clear previous results. | |
jQuery( '#customize-control-customizer_search .search-results' ).empty(); | |
if ( 2 < jQuery( this ).val().length ) { | |
_.each( fuseInit.search( searchVal ), function( result ) { | |
jQuery( '#customize-control-customizer_search .customizer-search-results' ) | |
.append( '<span class="search-result" data-id="' + result.id + '">' + result.label + '</span>' ); | |
} ); | |
} | |
jQuery( '.search-result' ).click( function( e ) { | |
e.preventDefault(); | |
wp.customize.control( jQuery( this ).data( 'id' ) ).focus(); | |
} ); | |
} ); | |
} | |
}; | |
jQuery( document ).ready( function() { | |
customizeSearch.controlsInit(); | |
customizeSearch.initSearch(); | |
} ); |
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
#customize-theme-controls .control-section-customizer-search-section .accordion-section-title, | |
#customize-theme-controls .control-section-customizer-search-section .customize-section-back, | |
#customize-theme-controls .control-section-customizer-search-section .customize-section-description-container, | |
#customize-theme-controls .control-section-customizer-search-section .customize-section-title { | |
display: none; | |
} | |
#customize-theme-controls .control-section-customizer-search-section.customize-pane-child { | |
position: relative; | |
visibility: visible; | |
height: auto; | |
margin-left: -300px; | |
} | |
#customize-theme-controls .control-section-customizer-search-section.customize-pane-child h3 .customize-action { | |
display: none; | |
} | |
#accordion-section-customizer_search_section { | |
border-bottom: 1px solid #ddd !important; | |
} | |
#customize-control-customizer_search { | |
margin-bottom: 0; | |
} | |
.customizer-search-results .search-result { | |
padding: 3px 0; | |
border-bottom: 1px solid #f2f2f2; | |
display: block; | |
} | |
.customizer-search-results .search-result:last-child { | |
border-bottom: 0; | |
} | |
.customizer-search-results .search-result:hover { | |
cursor: pointer; | |
color: #35BAF1; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
file structure:
customizer-search.php
inc/class-customizer-search-section.php
assets/js/script,js
assets/js/fuse/
- Copy the fuse.js & fuse.min.js files from http://fusejs.io/ in here.assets/css/styles.css
It needs a few CSS and usability tweaks depending on the use-case, but it's 100% functional.