␡
- How Does the Theme Customizer Work?
- Adding Customizer Support to Your Theme
- Setting Up Sections, Settings, and Controls
- Enabling the Front End
- Testing It All Out
- That's It, You're Done!
Like this article? We recommend
Setting Up Sections, Settings, and Controls
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Setting Up Sections, Settings, and Controls
First off, we need to specify the section we're modifying in the Theme Customizer. In this case, we're adding some options to the Color section: Content Background Color, Content Text Color, and Content Link Color.
- In your functions.php file, after the opening brace ({) in your $wp_customize function, add the following code, using the name of your theme in place of THEMENAME:
- Next, we need to define the parameters for each Setting and Control. Add the following lines, with the opening brace ({) appearing below the section code you just added:
- Now we can add the Settings and Controls. Add the following code just below that second opening brace ({):
- Add the final closing brace (}) to complete the $wp_customize function.
- Save and close your functions.php file.
$colors = array(); $colors[] = array( 'slug'=>'content_bg_color', 'default' => '#ffffff', 'label' => __( 'Content Background Color', 'THEMENAME' ) ); $colors[] = array( 'slug'=>'content_text_color', 'default' => '#000000', 'label' => __( 'Content Text Color', 'THEMENAME' ) ); $colors[] = array( 'slug'=>'content_link_color', 'default' => '#000000', 'label' => __( 'Content Link Color', 'THEMENAME' ) );
foreach($colors as $color)
{
// SETTINGS
$wp_customize->add_setting( $color['slug'], array( 'default' => $color['default'],
'type' => 'option', 'capability' => 'edit_theme_options' ));
// CONTROLS
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize,
$color['slug'], array( 'label' => $color['label'], 'section' => 'colors',
'settings' => $color['slug'] )));
}