Adding a Text Control Through the Customizer in WordPress

A text control can be used to manage a simple theme setting.

And adding text control to a theme is fairly easy. You can use the WordPress customizer API for this purpose.

This is the syntax –

$wp_customizer->add_control('setting_id', $args);

Here setting_id is the id of the setting that the control is associated with. And $args is an array consisting of various parameters as follows –

$args = array(
    'type' => 'text',
    'section' => 'section_id',
    'label' => __( 'Some Label' ),
    'description' => __( 'Some Description' ),
);

The type parameter denote that this is a text control. Means it will generate a text box at the front end.

The label and description are just some text that defines that control. Both of the show up in the front end.

The section_id parameter is the id of the section that this control belongs to. This is an important parameter and without this id, the whole setting will be invisible in the customizer.

The section id can be from a pre-existing section in the customizer or, you can create a whole new section.

If the section is associated with a panel then you will need the panel id in the section (existing panel) or create a new panel.

A text control is always associated with a setting and a section. Hence you will also need to write the code for the associated setting and the section ( and panel if needed ) as follows –

// optional - can be skipped
$wp_customize->add_panel( 'panel_id', 
   array(
     'title' => 'My Awesome Panel', // arbitrary string
     'description' => 'My Awesome panel description' // arbitrary string
     'priority' => 160, // optional - can be skipped
   ) 
);
// optional - can be skipped or existing section can be used
$wp_customize->add_section( 'section_id', // required - existing or new section id
  array(
     'title' => 'My awesome section', // arbitrary string
     'description' => 'My awesome section desciption', // arbitrary string
     'panel' => 'panel_id', // optional - can be skipped
     'priority' => 160, // optional - can be skipped
     'capability' => 'edit_theme_options', // optional - can be skipped
  )
);

// required
$wp_customize->add_setting( 'setting_id', // required - the setting id
  array(
    'type' => 'theme_mod', // optional - can be skipped
    'capability' => 'edit_theme_options', // optional - can be skipped
    'default' => 1, // required
    'transport' => 'refresh', // optional - can be skipped
    'sanitize_callback' => '', // required - takes a function as callback
    'sanitize_js_callback' => '', // optional
  )
);

// required
$wp_customize->add_control('setting_id',
   array(
       'type' => 'text', // required - type of the control
       'section' => 'section_id', // required - new or existing section id
       'label' => __( 'Some Label' ), // arbitrary string
       'description' => __( 'Some Description' ), // arbitrary string
   )
);

Please note that the control needs to be associated with a setting and a section. Only then it will show up on the customizer window.

Also, you will need to put this code inside a callback function from customize_register action hook.

function tornadu_customize_register () {
   // call to add the panel
   // call to add the section
   // call to add the setting
   // call to add the control
}
add_action( 'customize_register', 'tornadu_customize_register' );

If you are registering multiple text controls, then simple write the code to add the text control again, with the desired setting, section and panel (if needed).