What's new

Welcome to roeaw | Welcome My Forum

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

Add Customizer In WordPress Theme

Hoca

Administrator
Staff member
Joined
Mar 22, 2024
Messages
245
Reaction score
0
Points
16
Add Customizer in your WordPress theme with all varieties of choices like textual content enter, radio, checkbox. All factor about Customization API.

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:

wordpress customization api


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">&#13;
physique{&#13;
background-color: <?php echo get_option('op_body_bg_color'); ?>;&#13;
}&#13;
</model>&#13;
<?php&#13;
}&#13;
}&#13;
add_action('wp_head', 'body_background_color_style');&#13;

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:

&#13;
/* Customizer API | By Qassim Hassan | wp-time.com */&#13;
&#13;
// Add a brand new part (Emblem part)&#13;
$wp_customize->add_section( 'ct_logo_section', array(&#13;
'title' => 'Emblem'&#13;
) );&#13;
&#13;
$wp_customize->add_setting( 'op_logo_url', array(&#13;
'sort' => 'choice',&#13;
'default' => '',&#13;
'transport' => 'refresh',&#13;
'sanitize_callback' => 'esc_url_raw'&#13;
) );&#13;
&#13;
$wp_customize->add_control( new WP_Customize_Image_Control( $wp_customize, 'op_logo_url', array(&#13;
'label' => 'Add Emblem',&#13;
'part' => 'ct_logo_section',&#13;
'description' => 'Add your brand picture.',&#13;
'settings' => 'op_logo_url'&#13;
) ) );&#13;
&#13;


The result’s:

upload image in wordpress customizer


Use this code the place you need to show the brand:

&#13;
<?php if ( get_option('op_logo_url') ) : ?>&#13;
<img src=" echo esc_url( get_option("op_logo_url') ); ?>">&#13;
<?php endif; ?>&#13;

Extra Choices​


wordpress customizer options


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.
 
Top Bottom