Customizer API
The WordPress Customizer allows regular WordPress users like bloggers, designers, and business owners to customize their own websites without the help of a developer. It allows them to edit the website from the front-end and preview the changes in real-time before publishing the changes.
It is highly recommended that you make all the theme customization options available in the WordPress Customizer itself so that normal users who don’t have much technical knowledge can find those settings easily.
Extending Customizer API
Explore the videos for insights and tutorials on Extending Customizer API. This section comprises 5 modules with a combined duration of 1 hour.
| Video Content | Time |
|---|---|
| Extending Customizer API | 09:06 |
| Adding sections and panels | 11:19 |
| Adding custom controls and mods | 16:09 |
| Adding custom JS and partials | 16:38 |
| More on Customizer API | 07:43 |
Check below example, this code adds a new section to the WordPress Customizer, allowing users to change the header text color, and then outputs the selected color in the theme’s header.
<?php
// Add a new section to the Customizer.
function my_theme_customize_register( $wp_customize ) {
$wp_customize->add_section( 'my_theme_section', array(
'title' => __( 'My Theme Settings', 'text-domain' ),
'priority' => 160,
) );
// Add a setting for the header text color.
$wp_customize->add_setting( 'header_text_color', array(
'default' => '#333',
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage', // For real-time preview
) );
// Add a control for the header text color.
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_text_color', array(
'label' => __( 'Header Text Color', 'text-domain' ),
'section' => 'my_theme_section',
) ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );
// Output the customizer settings in the theme.
function my_theme_customize_css() {
?>
<style>
header h1 {
color: <?php echo esc_html( get_theme_mod( 'header_text_color' ) ); ?>;
}
</style>
<?php
}
add_action( 'wp_head', 'my_theme_customize_css' );Ideas to Explore:
- What is Customize API? What are core sections available in Customize API?
- What is the difference between a section, a setting, and a control in the context of the WordPress Customizer API?
- What are some common use cases for using the Customizer API in WordPress theme development?
- Go through the customize_register hook.
- How to customize controls, sections and panels?