Don't print customizer styles when no setting has been used

Question

Don't print customizer styles when no setting has been used

pickos7

2019年6月14日 10:28

I'm adding some options to a theme through my plugin, I want to change this theme styles and I'm almost there... Now I need to know how I can hide the style tag when no settings are changed (all default not used),

function myplugin_customize_css(){
?
 style
     h2 {color:?php echo get_theme_mod('myplugin_h2_color'); ?;}
     h3 {color:?php echo get_theme_mod('myplugin_h3_color'); ?;}
     p {
        color:?php echo get_theme_mod('myplugin_p_color'); ?;
        font-size:?php echo get_theme_mod('myplugin_p_size'); ?;
     }
     // more  more of these! 
 /style
?php
}
add_action( 'wp_head', 'myplugin_customize_css');

I can do if() statements here but it feels too much, what other ways I can do this... not like this:

function myplugin_customize_css(){
    if (get_theme_mod('myplugin_h2_color') != '' 
        || get_theme_mod('myplugin_h3_color') !=''
        || get_theme_mod('myplugin_p_color') !=''
        || get_theme_mod('myplugin_p_size') !='' ) {
        ?
        style
            // if get_theme_mod('myplugin_h2_color') != ''
             h2 {color:?php echo get_theme_mod('myplugin_h2_color'); ?;}

             // if get_theme_mod('myplugin_h3_color') != ''
             h3 {color:?php echo get_theme_mod('myplugin_h3_color'); ?;}

             // if get_theme_mod('myplugin_p_color') !='' 
             //     get_theme_mod('myplugin_p_size') !='' 
             p {
                // if get_theme_mod('myplugin_p_color') !='' 
                color:?php echo get_theme_mod('myplugin_p_color'); ?;
                // if get_theme_mod('myplugin_p_size') !=''
                font-size:?php echo get_theme_mod('myplugin_p_size'); ?;
             }
             // more  more of these! 
         /style
         ?php
    }
}
add_action( 'wp_head', 'myplugin_customize_css');

Topic theme-customizer get-theme-mod loop plugin-development Wordpress

Category Web

Jacob Peattie · Accepted Answer · 2019年6月14日 10:28

There's not really any trick, you need to check all the values. You can save a little space though, by omitting the != '', which is redundant:

if (
    get_theme_mod( 'myplugin_h2_color' ) ||
    get_theme_mod( 'myplugin_h3_color' ) ||
    get_theme_mod( 'myplugin_p_color' ) ||
    get_theme_mod( 'myplugin_p_size' )
) {

However, it's possible to save Customiser settings into a single array. So if you register your settings with names like:

$wp_customize->add_setting( 'myplugin[h2_color]' );
$wp_customize->add_setting( 'myplugin[h3_color]' );
$wp_customize->add_setting( 'myplugin[p_color]' );
$wp_customize->add_setting( 'myplugin[p_size]' );

Then you can retrieve the values in an array like:

get_theme_mod( 'myplugin' );

If you do this, then you could use array_filter() to remove any empty values, and check if the resulting array is empty. If it isn't, then at least one of the the settings has a value:

$styles = get_theme_mod( 'myplugin' );

if ( ! empty( array_filter( $styles ) ) ) {
    echo '<style>';

    if ( ! empty( $styles['h2_color'] ) {
        printf( 'h2 { color: %s; }', $styles['h2_color'] );
    }

    // etc.

    echo '</style>';
}

Don't print customizer styles when no setting has been used

About