Add Customizer in your WordPress theme with all varieties of choices like textual content enter, radio, checkbox. All factor about Customization API.
Copy this code and paste it in “features.php” file in your theme, or create a brand new file for instance “customizer.php” and embrace it in your theme, learn this submit about embrace PHP file in WordPress theme.
perform add_customizer($wp_customize) {
//Enter the choices code beneath:
//Finish.
}
add_action( 'customize_register', 'add_customizer' );
On this instance, we are going to discover ways to add shade choice, for instance an choice to alter “Physique” background shade. Copy the code and paste it inside add_customizer() perform:
/* Customizer API | By Qassim Hassan | wp-time.com */
// Add a brand new part (Physique part)
$wp_customize->add_section( 'ct_body_section', array(
'title' => 'Physique'
) );
// Add a brand new choice to Physique Part
$wp_customize->add_setting( 'op_body_bg_color', array(
'sort' => 'choice',
'default' => '#ffffff', // the default worth, you'll be able to change it.
'transport' => 'refresh',
'sanitize_callback' => 'sanitize_hex_color'
) );
// Coloration choice management
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'op_body_bg_color', array(
'label' => 'Background Coloration',
'part' => 'ct_body_section',
'description' => 'Change physique background shade.',
'settings' => 'op_body_bg_color'
) ) );
The result’s:
Now use this code to show physique background shade model in your theme, copy the code and paste it in “features.php” file or your “customizer.php” file:
perform body_background_color_style(){
// By Qassim Hassan | wp-time.com
if( get_option('op_body_bg_color') ){
?>
<model sort="textual content/css">
physique{
background-color: <?php echo get_option('op_body_bg_color'); ?>;
}
</model>
<?php
}
}
add_action('wp_head', 'body_background_color_style');
On this instance, we are going to discover ways to add Picture Uploader choice, for instance an choice to add your brand. Copy the code and paste it inside add_customizer() perform:
/* Customizer API | By Qassim Hassan | wp-time.com */
// Add a brand new part (Emblem part)
$wp_customize->add_section( 'ct_logo_section', array(
'title' => 'Emblem'
) );
$wp_customize->add_setting( 'op_logo_url', array(
'sort' => 'choice',
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => 'esc_url_raw'
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'op_logo_url', array(
'label' => 'Add Emblem',
'part' => 'ct_logo_section',
'description' => 'Add your brand picture.',
'settings' => 'op_logo_url'
) ) );
The result’s:
Use this code the place you need to show the brand:
<?php if ( get_option('op_logo_url') ) : ?>
<img src=" echo esc_url( get_option("op_logo_url') ); ?>">
<?php endif; ?>
All varieties of choices like textual content enter, radio, checkbox, textarea, with sanitize choices and an instance of output, you discover it in this file.
Learn how to Add Customizer in WordPress Theme
Add Customizer
Copy this code and paste it in “features.php” file in your theme, or create a brand new file for instance “customizer.php” and embrace it in your theme, learn this submit about embrace PHP file in WordPress theme.
perform add_customizer($wp_customize) {
//Enter the choices code beneath:
//Finish.
}
add_action( 'customize_register', 'add_customizer' );
A Coloration Choice
On this instance, we are going to discover ways to add shade choice, for instance an choice to alter “Physique” background shade. Copy the code and paste it inside add_customizer() perform:
/* Customizer API | By Qassim Hassan | wp-time.com */
// Add a brand new part (Physique part)
$wp_customize->add_section( 'ct_body_section', array(
'title' => 'Physique'
) );
// Add a brand new choice to Physique Part
$wp_customize->add_setting( 'op_body_bg_color', array(
'sort' => 'choice',
'default' => '#ffffff', // the default worth, you'll be able to change it.
'transport' => 'refresh',
'sanitize_callback' => 'sanitize_hex_color'
) );
// Coloration choice management
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'op_body_bg_color', array(
'label' => 'Background Coloration',
'part' => 'ct_body_section',
'description' => 'Change physique background shade.',
'settings' => 'op_body_bg_color'
) ) );
The result’s:
Now use this code to show physique background shade model in your theme, copy the code and paste it in “features.php” file or your “customizer.php” file:
perform body_background_color_style(){
// By Qassim Hassan | wp-time.com
if( get_option('op_body_bg_color') ){
?>
<model sort="textual content/css">
physique{
background-color: <?php echo get_option('op_body_bg_color'); ?>;
}
</model>
<?php
}
}
add_action('wp_head', 'body_background_color_style');
An Add Choice
On this instance, we are going to discover ways to add Picture Uploader choice, for instance an choice to add your brand. Copy the code and paste it inside add_customizer() perform:
/* Customizer API | By Qassim Hassan | wp-time.com */
// Add a brand new part (Emblem part)
$wp_customize->add_section( 'ct_logo_section', array(
'title' => 'Emblem'
) );
$wp_customize->add_setting( 'op_logo_url', array(
'sort' => 'choice',
'default' => '',
'transport' => 'refresh',
'sanitize_callback' => 'esc_url_raw'
) );
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'op_logo_url', array(
'label' => 'Add Emblem',
'part' => 'ct_logo_section',
'description' => 'Add your brand picture.',
'settings' => 'op_logo_url'
) ) );
The result’s:
Use this code the place you need to show the brand:
<?php if ( get_option('op_logo_url') ) : ?>
<img src=" echo esc_url( get_option("op_logo_url') ); ?>">
<?php endif; ?>
Extra Choices
All varieties of choices like textual content enter, radio, checkbox, textarea, with sanitize choices and an instance of output, you discover it in this file.