WordPress Customizer Sample Reference

Customizerref.php

<?php
/**
* WordPress Customizer Comprehensive Reference
* Compiled by @ti_asif
*/


 
Panel
Section
Setting
Control

//  =============================
//  Panel
//  =============================

$wp_customize->add_panel( 'panel_id', array(
	
    'title' 		=> __( 'Example Panel', 'textdomain' ),
    'description' 	=> __( 'Description of the panel.', 'textdomain' ),
    'priority'       	=> 10,
    'capability'     	=> 'edit_theme_options',           // [Roles and Capabilities]
                                                           	// edit_theme_options
                                                           	// manage_options
    
    
    'theme_supports' 	=> '',                              // Optional. This can be used to hide a setting if the theme lacks support for a specific feature (using add_theme_support).
	                                                          // 'custom-header'
	                                                          // 'custom-background'
	                                                          // 'menus'
	                                                          // 'static-front-page'
	                                                          // 'custom-logo'
	                                                          // 'post-formats'
	                                                          // 'post-thumbnails'
	                                                          // 'automatic-feed-links'
	                                                          // 'html5'
	                                                          // 'title-tag'

    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags
) );

//  =============================
//  Section
//  =============================

$wp_customize->add_section( 'section_id', array(
    'title' 			=> __( 'Example Section', 'textdomain' ),
    'description' 		=> __( 'Description of the section.', 'textdomain' ),
    'priority'        	=> 130,
    'theme_supports' 	=> '',                             // Optional. This can be used to hide a setting if the theme lacks support for a specific feature (using add_theme_support).
	                                                          // 'custom-header'
	                                                          // 'custom-background'
	                                                          // 'menus'
	                                                          // 'static-front-page'
	                                                          // 'custom-logo'
	                                                          // 'post-formats'
	                                                          // 'post-thumbnails'
	                                                          // 'automatic-feed-links'
	                                                          // 'html5'
	                                                          // 'title-tag'

    'capability'     	=> 'edit_theme_options',           // [Roles and Capabilities]
                                                           	// edit_theme_options
                                                           	// manage_options

    'active_callback' 	=> 'is_front_page',               // Contextually show/hide customizer controls based on the customizer’s preview context
    													// Conditional Tags: https://codex.wordpress.org/Conditional_Tags
    'panel' => 'panel_id',
) );


//  =============================
//  Setting
//  =============================

$wp_customize->add_setting( 'demo_radio_control', array(
    'default'        	=> 'default_value',
    'capability'     	=> 'edit_theme_options',        // [Roles and Capabilities]
                                                           	// edit_theme_options
                                                           	// manage_options
                                                           	
    'type'           	=> 'theme_mod',			// Specifies the TYPE of setting
							   // 'theme_mod' - Settings can only be used by that specific theme.
							   // 'option'    - Settings can be used by absolutely any theme or plugin.

    'transport' 		=> '',			// (Optional)
    								// 'postMessage'
    								// 'refresh'

    'theme_supports' 	=> '',                      	// (Optional) This can be used to hide a setting if the theme lacks support for a specific feature (using add_theme_support).
		                                                  // 'custom-header'
		                                                  // 'custom-background'
		                                                  // 'menus'
		                                                  // 'static-front-page'
		                                                  // 'custom-logo'
		                                                  // 'post-formats'
		                                                  // 'post-thumbnails'
		                                                  // 'automatic-feed-links'
		                                                  // 'html5'
		                                                  // 'title-tag' 

	'sanitize_callback' => 'esc_url',		// (Optional) A function name to call for sanitizing the input value for this setting.

								// 'sanitize_bookmark'
								// 'sanitize_bookmark_field'
								// 'sanitize_category'
								// 'sanitize_category_field'
								// 'sanitize_comment_cookies'
								// 'sanitize_email'
								// 'sanitize_file_name'
								// 'sanitize_hex_color'
								// 'sanitize_hex_color_no_hash'
								// 'sanitize_html_class'
								// 'sanitize_key'
								// 'sanitize_meta'
								// 'sanitize_mime_type'
								// 'sanitize_option'
								// 'sanitize_post'
								// 'sanitize_post_field'
								// 'sanitize_sql_orderby'
								// 'sanitize_term'
								// 'sanitize_term_field'
								// 'sanitize_text_field'
								// 'sanitize_title'
								// 'sanitize_title_for_query'
								// 'sanitize_title_with_dashes'
								// 'sanitize_trackback_urls'
								// 'sanitize_url'
								// 'sanitize_user'
								// 'sanitize_user_field'
								// 'sanitize_user_object'
								// 'intval'
								// 'absint'
								// 'esc_attr'
								// 'esc_attr'
								// 'esc_attr_e'
								// 'esc_attr_x'
								// 'esc_html'
								// 'esc_html'
								// 'esc_html_e'
								// 'esc_html_x'
								// 'esc_js'
								// 'esc_sql'
								// 'esc_textarea'
								// 'esc_url'
								// 'esc_url_raw'
								// 'wp_filter_nohtml_kses'
								// 'wp_kses_post'

	'sanitize_js_callback' => '', 			// Essentially converts to JSON
) );


//  =============================
//  Controls - Text
//  =============================

$wp_customize->add_control(

	'demo_text_control', 	// ID
	array(			// Arguments
	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',              	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'type'       		=> 'text',			// Input Types
	    									// 'text'
	    									// 'textarea'
										// 'checkbox'
										// 'radio' (requires choices array in $args)
										// 'select' (requires choices array in $args)
	    									// 'range' (requires choices array in $args)
	    									// 'button'
	    									// 'date'
	    									// 'email'
										// 'tel'
										// 'url'
										// 'password'
										// 'number'
										// 'search'

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),
	    
	    'capability' => 'edit_posts',
	) 
);



//  =============================
//  Controls - Radio
//  =============================

$wp_customize->add_control(
    'demo_radio_control',
    array(
	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),

	    'capability' => 'edit_posts', 	    

	    'type'       		=> 'radio',			// Input Types
	    									// 'text'
	    									// 'textarea'
										// 'checkbox'
										// 'radio' (requires choices array in $args)
										// 'select' (requires choices array in $args)
	    									// 'range' (requires choices array in $args)
	    									// 'button'
	    									// 'date'
	    									// 'email'
										// 'tel'
										// 'url'
										// 'password'
										// 'number'
										// 'search'

        'choices' => array(
	            'value1' 	=> 'Choice 1',
	            'value2' 	=> 'Choice 2',
	            'value3' 	=> 'Choice 3',
        ),
    )
);


//  =============================
//  Controls - Checkbox
//  =============================

$wp_customize->add_control(
    'demo_checkbox_control',
    array(

	   'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),

	'capability' 			=> 'edit_posts',

        'type' 				=> 'checkbox',
    )
);


//  =============================
//  Controls - Select
//  =============================

$wp_customize->add_control( 
	'demo_select_control', 
	array(

	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),

	    'capability' 		=> 'edit_posts',

        'type'    			=> 'select',

        'choices'    		=> array(
					            'value1' => 'Choice 1',
					            'value2' => 'Choice 2',
					            'value3' => 'Choice 3',
					        ),
));



//  =============================
//  Controls - Image Upload
//  =============================

$wp_customize->add_control( 
	new WP_Customize_Image_Control($wp_customize, 
		'demo_image_control', 

		array(
	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),

	    'capability' 		=> 'edit_posts',
)));



//  =============================
//  Controls - File Upload
//  =============================

$wp_customize->add_control( 
	new WP_Customize_Upload_Control($wp_customize, 
		'demo_upload_control', 

		array(
	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #900',
						    ),

	    'capability' 		=> 'edit_posts',
)));



//  =============================
//  Controls - Color Picker
//  =============================

$wp_customize->add_control(
    new WP_Customize_Color_Control(
        $wp_customize,
        'demo_color_picker',
        array(

	    'label'      		=> __('Text', 'textdomain'),
	    'description' 		=> __( 'Description', 'textdomain' ),
	    'section'    		=> 'section_id',
	    'settings'   		=> 'settings_id',
	    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
	    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

	    'priority' 			=> 10,

	    'input_attrs'  		=> array(
						        'value' 		=> __( 'Example Text', 'textdomain' ),
						        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
						        'class' 		=> 'my-custom-css-class',
						    	'style' 		=> 'border: 1px solid #000000',
						    ),

	    'capability' 		=> 'edit_posts',
        )
    )
);

//  =============================
//  Controls - Background Image Control
//  =============================

	$wp_customize->add_control( 
		new WP_Customize_Background_Image_Control( 
			$wp_customize, 
			'demo_background_image_control', 
			array(
		    'label'      		=> __('Text', 'textdomain'),
		    'description' 		=> __( 'Description', 'textdomain' ),
		    'section'    		=> 'section_id',
		    'settings'   		=> 'settings_id',
		    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
		    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

		    'priority' 			=> 10,

		    'input_attrs'  		=> array(
							        'value' 		=> __( 'Example Text', 'textdomain' ),
							        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
							        'class' 		=> 'my-custom-css-class',
							    	'style' 		=> 'border: 1px solid #900',
							    ),

		    'capability' 		=> 'edit_posts',
	) ) );

//  =============================
//  Controls - Header Image Control
//  =============================

$wp_customize->add_control( 
	new WP_Customize_Header_Image_Control( 
		$wp_customize, 
		'demo_header_image_control', 
		array(
		    'label'      		=> __('Text', 'textdomain'),
		    'description' 		=> __( 'Description', 'textdomain' ),
		    'section'    		=> 'section_id',
		    'settings'   		=> 'settings_id',
		    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
		    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

		    'priority' 			=> 10,

		    'input_attrs'  		=> array(
							        'value' 		=> __( 'Example Text', 'textdomain' ),
							        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
							        'class' 		=> 'my-custom-css-class',
							    	'style' 		=> 'border: 1px solid #000000',
							    ),

		    'capability' 		=> 'edit_posts', 
) ) );


//  =============================
//  Controls - Cropped Image Control
//  =============================

$wp_customize->add_control( 
	new WP_Customize_Cropped_Image_Control( 
		$wp_customize, 
		'demo_cropped_image_control', 
		array(
		    'label'      		=> __('Text', 'textdomain'),
		    'description' 		=> __( 'Description', 'textdomain' ),
		    'section'    		=> 'section_id',
		    'settings'   		=> 'settings_id',
		    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
		    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

		    'priority' 			=> 10,

		    'input_attrs'  		=> array(
							        'value' 		=> __( 'Example text', 'textdomain' ),
							        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
							        'class' 		=> 'my-custom-class',
							    	'style' 		=> 'border: 1px solid #900',
							    ),

		    'capability' => 'edit_posts', 
		    'flex_width'  => true, // Allow any width, making the specified value recommended. False by default.
		    'flex_height' => false, // Require the resulting image to be exactly as tall as the height attribute (default).
		    'width'       => 1920,
		    'height'      => 1080,
) ) );


//  =============================
//  Controls - Media Control
//  =============================

$wp_customize->add_control( 
	new WP_Customize_Media_Control( 
		$wp_customize, 
		'demo_audio_control', 
		array(
		    'label'      		=> __('Text', 'textdomain'),
		    'description' 		=> __( 'description', 'textdomain' ),
		    'section'    		=> 'section_id',
		    'settings'   		=> 'settings_id',
		    'active_callback' 	=> 'is_front_page',               	// Contextually show/hide customizer controls based on the customizer’s preview context
		    								// Conditional Tags: https://codex.wordpress.org/Conditional_Tags  

		    'priority' 			=> 10,

		    'input_attrs'  		=> array(
							        'value' 		=> __( 'Add Post', 'textdomain' ),
							        'placeholder' 	=> __( 'plceholder text', 'textdomain' ),
							        'class' 		=> 'my-custom-class',
							    	'style' 		=> 'border: 1px solid #900',
							    ),

		    'capability' 		=> 'edit_posts',
    		'mime_type' 			=> 'audio',			// Other Options
	    										// 'image',
	    										// 'audio'
) ) );