Skip to content

Instantly share code, notes, and snippets.

@aristath
Last active December 4, 2017 19:37
Show Gist options
  • Save aristath/9366f6513ae3a9d66e2926cc0d50609b to your computer and use it in GitHub Desktop.
Save aristath/9366f6513ae3a9d66e2926cc0d50609b to your computer and use it in GitHub Desktop.
<?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';
}
<?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 );
/* 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();
} );
#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;
}
@aristath
Copy link
Author

aristath commented Dec 3, 2017

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment