Hi,
This tutorial covers how we can create a custom control for your word press theme.
Theme Customization API helps WordPress developers to customize and add controls to the “Appearance” → “Customize” admin screen. The Customizer shows the preview of those changes in real time.
It provides a unified interface for users to customize various aspects of their theme and their site, from colors and layouts to widgets, menus, and more.
If you are new to WordPress custom theme developing , please visit here to learn it from scratch. After that open theback born of your theme called functions.php. Create a new function for customize, then register this function using add_action() hook.
Adding New Section, Settings and Controls
Section: When you add a new custom control, must be added a section.
To add a new section to your Theme Customizer, you need to call the $wp_customize->add_section() method.
$wp_customize->add_section( 'mytheme_new_section_name' ,
array(
'title' => __( 'Section Name', 'mytheme name' ),
'priority' => 30,
) );
Settings: Customizer settings are used to get/set some settings for your theme.
To add a new setting to your Theme Customizer, you need to call the $wp_customize->add_setting() method.
$wp_customize->add_setting( 'theme_custom_section_unique _name' , array(
'default' => 'default value for the control',
'transport' => 'preview mode value, value may be postMessage or refresh',
) );
Control: It is an HTML form element that renders on the Theme Customizer page and allows admins to change a setting, and preview those changes in real time. Controls are linked to a single setting, and a single section.
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'theme_custom_section_unique _name', array( 'label' => __( 'label Name', 'mytheme name' ), 'section' => 'your_section_id', 'settings' => 'your_setting_id', ) ) );
After understanding sections,settings and controls, copy these into your custom function created in functions.php. Also don’t forget to replace the section,settings name with your custom name. Register the function by using the hook add_action( ‘customize_register’ , ‘function name’); .
Below shows an example for creating a top bar custom customizer.
// topbar customizer
function hardycodes_topbar_customize( $wp_customize )
{
$wp_customize->add_section('hardycodes_top_bar', array(
'title' =>; __( 'Top Bar', 'hardycodes' ),
'priority' => 30,
));
$wp_customize->add_setting('hardycodes_email', array(
'default' => 'info@example.com',
'capability' => 'edit_theme_options',
'type' => 'option',
));
$wp_customize->add_control(
new WP_Customize_Color_Control($wp_customize,'hardycodes_email',
array(
'label' => __('Email', 'hardycodes'),
'section' => 'hardycodes_top_bar',
'settings' => 'hardycodes_email',
'priority' => 10,
'type' => 'text'
)) );
}
add_action( 'customize_register' , 'hardycodes_topbar_customize');
The result is like this,
