If you register a setting in the customizer, it adds the UI in the customizer panel and stores the option value in the databse, but it doesn’t know what should be changed in the site. You have to use the value of that setting in the frontend in the way you wish.
For example, in your case, it could be like this:
add_action( 'wp_enqueue_scripts', 'cyb_dinamic_styles' );
function cyb_dinamic_styles() {
wp_enqueue_style( 'my-style', get_stylesheet_uri(), array(), '1.0' );
$color = get_theme_mod( 'sec1_background_color', '#ffffff' );
$custom_css = "
.section-one{
background: $color;
}";
wp_add_inline_style( 'my-style', $custom_css );
}
Or maybe like this:
add_action( 'wp_head', 'cyb_head_styles' );
function cyb_head_styles() {
$color = get_theme_mod( 'sec1_background_color', '#ffffff' );
?>
<style>
.section-one {
background: <?php echo $color; ?>
}
</style>
<?php
}
Additionally, if you want to allow the live preview of changes in the customizer screen, you need to create a JavaScript snippet that extends wp.customize
:
( function( $ ) {
// Update background color of .section-one with the
// value of sec1_background_color setting
wp.customize( 'sec1_background_color', function( value ) {
value.bind( function( newval ) {
$('.section-one').css('color', newval );
} );
} );
} )( jQuery );
Lastly, you need to include this JavaScript in the customizer screen. For example:
add_action( 'customize_preview_init', 'cyb_customizer_live_preview' );
function cyb_customizer_live_preview() {
wp_enqueue_script(
'mytheme-customizer',
get_template_directory_uri().'/js/mytheme-customizer.js',
array( 'jquery','customize-preview' ), // Define dependencies
'1.0'
);
}