0

I was adding some customizer settings and it doesnt seem to work.

this is the html i have:

<div class="section-one">
<h2>section 1</h2>
</div>

the default css in style.css:

/*content sections*/
.section-one{
    height: 300px;
    width:100%;
    background-color: #fff;
    color: blue;
}

and the customizer functions i added:

function mr_customizer_register($wp_customize){
    $wp_customize->add_section('CMWP_colors', array(
        'title' => __('Colors', 'CMWP'),
        'description' => 'Modify the theme colors'
    ));

    $wp_customize->add_setting('sec1_background_color', array(
        'default' => '#ffffff',
    ));
    $wp_customize->add_control( new WP_Customize_Color_Control($wp_customize, 'sec1_background_color', array(
        'label' => __('Edit section 1 background color', 'CMWP'),
        'section' => 'CMWP_colors',
        'settings' => 'sec1_background_color'
    ) ));

}

The setting gets added, i can pick a color, but nothing changes on the site, what could be wrong?

2

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'
    );
}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.