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');

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');

• plugin-development
• loop
• theme-customizer
• get-theme-mod

1 Answer 1

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>';
}