Customizer Panels and Field Types

Customizer Api Fields Type.md

Customizer Panels and Field Types.Refference

PANEL Here’s the basics of adding a new panel and section:

function prefix_customizer_register( $wp_customize ) {

	$wp_customize->add_panel( 'panel_id', array(
	    'priority' => 10,
	    'capability' => 'edit_theme_options',
	    'theme_supports' => '',
	    'title' => __( 'Example Panel', 'textdomain' ),
	    'description' => __( 'Description of what this panel does.', 'textdomain' ),
	) );

	$wp_customize->add_section( 'section_id', array(
	    'priority' => 10,
	    'capability' => 'edit_theme_options',
	    'theme_supports' => '',
	    'title' => __( 'Example Section', 'textdomain' ),
	    'description' => '',
	    'panel' => 'panel_id',
	) );

}
add_action( 'customize_register', 'prefix_customizer_register' );

URL Field

$wp_customize->add_setting( 'url_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'esc_url',
) );

$wp_customize->add_control( 'url_field_id', array(
    'type' => 'url',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'URL Field', 'textdomain' ),
    'description' => '',
) );

EMAIL Field

$wp_customize->add_setting( 'email_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'sanitize_email',
) );

$wp_customize->add_control( 'email_field_id', array(
    'type' => 'email',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'Email Field', 'textdomain' ),
    'description' => '',
) );

PASSWORD Field

$wp_customize->add_setting( 'password_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'sanitize_text_field',
) );

$wp_customize->add_control( 'password_field_id', array(
    'type' => 'password',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'Password Field', 'textdomain' ),
    'description' => '',
) );

TEXTAREA Field

$wp_customize->add_setting( 'textarea_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'esc_textarea',
) );

$wp_customize->add_control( 'textarea_field_id', array(
    'type' => 'textarea',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'Textarea Field', 'textdomain' ),
    'description' => '',
) );

DATE Field

$wp_customize->add_setting( 'date_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => ''
) );

$wp_customize->add_control( 'date_field_id', array(
    'type' => 'date',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'Date Field', 'textdomain' ),
    'description' => '',
) );

RANGE Field

$wp_customize->add_setting( 'range_field_id', array(
	'default' => '',
	'type' => 'theme_mod',
	'capability' => 'edit_theme_options',
	'transport' => '',
	'sanitize_callback' => 'intval',
) );

$wp_customize->add_control( 'range_field_id', array(
    'type' => 'range',
    'priority' => 10,
    'section' => 'section_id',
    'label' => __( 'Range Field', 'textdomain' ),
    'description' => '',
    'input_attrs' => array(
        'min' => 0,
        'max' => 100,
        'step' => 1,
        'class' => 'example-class',
        'style' => 'color: #0a0',
    ),
) );

DROPDOWN Field

$wp_customize->add_setting( 'themeslug_select_setting_id', array(
  'capability' => 'edit_theme_options',
  'sanitize_callback' => 'themeslug_sanitize_select',
  'default' => 'value1',
) );

$wp_customize->add_control( 'themeslug_select_setting_id', array(
  'type' => 'select',
  'section' => 'custom_section', // Add a default or your own section
  'label' => __( 'Custom Select Option' ),
  'description' => __( 'This is a custom select option.' ),
  'choices' => array(
    'value1' => __( 'Value 1' ),
    'value2' => __( 'Value 2' ),
    'value3' => __( 'Value 3' ),
  ),
) );

function themeslug_sanitize_select( $input, $setting ) {

  // Ensure input is a slug.
  $input = sanitize_key( $input );

  // Get list of choices from the control associated with the setting.
  $choices = $setting->manager->get_control( $setting->id )->choices;

  // If the input is a valid key, return it; otherwise, return the default.
  return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
}